React Native Validation input error logic

Question

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!

Answer 1

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.