React Native Validation input error logic-CodePudding

I'm hoping to get help with my validation error logic for my React Native App.

My app has 2 input fields. I want the user to choose a Start Date and an End Date (Date format YYYY-MM-DD) (DATE must be typed to follow design constrains). Once the search button is clicked I then use the date range to call api.

Here is the code I got for the input button part:

  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  return(


 <TextInput 
      style={styles.inputDate} 
      placeholder='Start Date YYYY-MM-DD'
      onChangeText={setStartDate}/> 
      
      <TextInput 
      style={styles.inputDate} 
      placeholder='End Date YYYY-MM-DD'
      onChangeText={setEndDate}/> 

      <View style={styles.buttonSearch}>
      <Button 
      title='Search' 
      onPress={searchDateRange} (calls the api) />
      </View>

So I would like to make sure the user enters a date that matches a string length of 10 (ex 2021-01-01 ) and a date that contains numbers and "-" (trying to avoid date in this format = 2021/01/01 as it wont work with my api)

This is what I have tried so far but no success:

  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

const submitSearch = () => {
      if(setStartDate.length = 10 ){
          searchDateRange(call api function)
      }else{
    Alert.alert('opss!', 'date must follow the YYYY-MM-DD format', [{text: 'ok'}])
      }
  }

  return(

 <TextInput 
      style={styles.inputDate} 
      placeholder='Start Date YYYY-MM-DD'
      onChangeText={setStartDate}/> 
      
      <TextInput 
      style={styles.inputDate} 
      placeholder='End Date YYYY-MM-DD'
      onChangeText={setEndDate}/> 

      <View style={styles.buttonSearch}>
      <Button 
      title='Search' 
      onPress={submitSearch} />
      </View>

I also tried this:

      const [startDate, setStartDate] = useState();
      const [endDate, setEndDate] = useState();

    const submitSearch = (text) => {
          if(text.length = 10 ){
              setStartDate(text)
              searchDateRange(call api function)
          }else{
   Alert.alert('opss!', 'date must follow the YYYY-MM-DD format', [{text: 'ok'}])
          }
      }

      return(

     <TextInput 
          style={styles.inputDate} 
          placeholder='Start Date YYYY-MM-DD'
          onChangeText={text => setStartDate(text)}/> 
          
          <TextInput 
          style={styles.inputDate} 
          placeholder='End Date YYYY-MM-DD'
          onChangeText={setEndDate}/> 

          <View style={styles.buttonSearch}>
          <Button 
          title='Search' 
          onPress={submitSearch} />
          </View>

So, the final goal is to check both dates to make sure they match the date format and call the api. Thanks everyone for your help!

CodePudding user response：

You may use regex expression in submitSearch to validate date format for 'YYYY-MM-DD'.

const submitSearch = () => {
    var date_regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
    if(!date_regex.test(startDate)){
      Alert.alert('opss!', 'Start date must follow the YYYY-MM-DD format', [{text: 'ok'}]);
      return;
    }

    if(!date_regex.test(endDate)){
      Alert.alert('opss!', 'End date must follow the YYYY-MM-DD format', [{text: 'ok'}]);
      return;
    }

    //Call API function here
}

You may see more in the post here.