title: how to validate DateTimePickerModal with yup and formik in React native?
body: <p>Here is my screen component with two textinputs from the link. I have removed some other code that isn't necessary to this issue.
  When i choose the date from the popup it appears in the text input but doesnt get validated.
  I cannot use the result of DatePicker component as it is , so i am doing some formating and saved to a function getDate.</p>
  <p>How would you go about implemnting this ? is there any better way</p>
  <p><a href="https://i.stack.imgur.com/43dCq.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useContext, useEffect } from 'react';
  import {
    StyleSheet,
    View,
    Text,
    TextInput,
    TouchableOpacity,
    ScrollView,
    KeyboardAvoidingView,
    Platform,
    Image,
  
  
  } from 'react-native';
  
  import { icons, COLORS, } from '../constants';
  
  import { Formik } from 'formik';
  import * as yup from "yup";
  
  import client from '../api/client';
    
  import DateTimePickerModal from "react-native-modal-datetime-picker";
  
  
  
  const addfarm = ({ navigation, Arrival_Date }) =&gt; {
  
  const addFarmValidationSchema = yup.object().shape({
    Farm_Code: yup.string().required('Please Enter the chick price'),
   Arrival_Date: yup.string().required('Please Choose a date'),
  
  });
  
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    const [date, setDate] = useState('');
  
    const showDatePicker = () =&gt; {
      setDatePickerVisibility(true);
    };
  
    const hideDatePicker = () =&gt; {
      setDatePickerVisibility(false);
    };
  
    const handleConfirm = (date) =&gt; {
      hideDatePicker();
      setDate(date);
  
    };
  
  
    const getDate = () =&gt; {
      let tempDate = JSON.stringify(date).split(/[ ",T,]/);
      return date !== ''
        ? `${tempDate[1]}`
        : '';
  
  
    };
  
  
    const newDate = getDate();
  
    const addFarmInfo = {
      Farm_Code: '',
      Arrival_Date: '',
  
    };
  
  
    const add = async (values) =&gt; {
      const res = await client({
        method: 'POST',
        url: '/Farm/SaveFarm',
        data: JSON.stringify({ ...values, id })
      })
        .then(res =&gt; console.log(res.data))
        .catch(err =&gt; console.log(err))
    }
  
    return (
  
      &lt;KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : null}
        style={{ flex: 1 }}&gt;
        &lt;ScrollView style={styles.container}&gt;
          &lt;Formik
            initialValues={addFarmInfo}
            validateOnMount={true}
            onSubmit={add}
            validationSchema={addFarmValidationSchema}&gt;
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              values,
              touched,
              errors,
              isValid,
              setFieldValue,
            }) =&gt; {
  
              const {
                Farm_Code,
                Arrival_Date,
  
              } = values
  
              return (
  
                &lt;View
                  style={{
                    paddingHorizontal: '10%',
                    paddingTop: 50,
                    marginTop: 50,
                    backgroundColor: COLORS.main_background,
                  }}&gt;
                  &lt;Text style={styles.auth_text}&gt;Add Farm&lt;/Text&gt;
  
  
                  &lt;Text style={styles.tag}&gt;
                    Farm Code:
                  &lt;/Text&gt;
                  &lt;View
                    style={[styles.textInputView, { marginBottom: 10 }]}&gt;
                    &lt;TextInput
                      onChangeText={handleChange('Farm_Code')}
                      onBlur={handleBlur('Farm_Code')}
                      value={Farm_Code}
                      placeholder="Farm Code"
                      placeholderTextColor={COLORS.placeholder_fonts}
                      selectionColor={COLORS.drawer_button}
                      style={styles.textInput}
  
                    /&gt;
  
                    &lt;Image
                      source={!errors.Farm_Code ? icons.tick : icons.close}
                      resizeMode="stretch"
                      style={{
                        width: 18,
                        height: 18,
                        tintColor: !errors.Farm_Code ? COLORS.drawer_button : 'red',
                        alignItems: 'center',
                        marginRight: 10,
                      }}
                    /&gt;
  
                  &lt;/View&gt;
                  {(errors.Farm_Code &amp;&amp; touched.Farm_Code) &amp;&amp;
                    &lt;Text style={styles.errors}&gt;{errors.Farm_Code}&lt;/Text&gt;
                  }
  
  
  
  
  
                  &lt;Text style={styles.tag}&gt;
                    Arrival Date:
                  &lt;/Text&gt;
  
                  &lt;View
                    style={[styles.textInputView, { marginBottom: 10 }]}&gt;
  
                    &lt;TextInput
                      onChangeText={handleChange('Arrival_Date')}
                      onBlur={handleBlur('Arrival_Date')}
                      value={newDate}
                      onFocus={showDatePicker}
                      placeholder="yyyy/mm/dd"
                      placeholderTextColor={COLORS.placeholder_fonts}
                      selectionColor={COLORS.drawer_button}
                      style={styles.textInput}
  
                    /&gt;
  
  
  
  
                    &lt;TouchableOpacity style={{ marginRight: 10, }}
                      onPress={showDatePicker}
  
                    &gt;
                      &lt;DateTimePickerModal
                        isVisible={isDatePickerVisible}
                        mode="date"
                        onConfirm={handleConfirm}
                        onCancel={hideDatePicker}
                      /&gt;
  
                      &lt;Image
                        source={icons.calendar}
                        resizeMode="stretch"
                        style={{
                          width: 18,
                          height: 18,
                          tintColor: COLORS.secondary_fonts,
                          alignItems: 'center'
                        }}
                      /&gt;
                    &lt;/TouchableOpacity&gt;
  
  
                    &lt;Image
                      source={!errors.Arrival_Date ? icons.tick : icons.close}
                      resizeMode="stretch"
                      style={{
                        width: 18,
                        height: 18,
                        tintColor: !errors.Arrival_Date ? COLORS.drawer_button : 'red',
                        alignItems: 'center',
                        marginRight: 10,
                      }}
                    /&gt;
  
                  &lt;/View&gt;
  
                  {(errors.Arrival_Date &amp;&amp; touched.Arrival_Date) &amp;&amp;
                    &lt;Text style={styles.errors}&gt;{errors.Arrival_Date}&lt;/Text&gt;
                  }
  
  
                  {(errors.Arrival_Date &amp;&amp; touched.Arrival_Date) &amp;&amp;
                    &lt;Text style={styles.errors}&gt;{errors.Arrival_Date}&lt;/Text&gt;
                  }
  
  
                  {/* Save */}
                  &lt;TouchableOpacity
                    disabled={!isValid}
                    onPress={handleSubmit}
                    style={[styles.button, { backgroundColor: isValid ? COLORS.authButtons : COLORS.placeholder_fonts, marginTop: 10 }]}&gt;
                    &lt;Text style={styles.button_Text}&gt;Save&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                &lt;/View&gt;
              )
            }
            }
          &lt;/Formik &gt;
        &lt;/ScrollView&gt;
      &lt;/KeyboardAvoidingView&gt;
  
  
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: COLORS.main_background,
    },
    textInput: {
      flex: 1,
      paddingLeft: 10,
      color: 'black',
    },
    auth_text: {
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center',
      marginBottom: 5,
    },
    button: {
      height: 50,
      width: '100%',
      marginVertical: 20,
      borderRadius: 10,
      alignItems: 'center',
      justifyContent: 'center',
    },
    button_Text: {
      fontSize: 18,
      color: COLORS.white,
    },
    login_nav: {
      fontSize: 12,
      textAlign: 'center',
      fontWeight: '400',
      marginTop: 10,
  
    },
    errors: {
      fontSize: 14,
      color: 'red',
      fontWeight: '400',
      marginTop: 5,
    },
    textInputView: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1,
      borderRadius: 10,
      height: 50,
      width: '100%',
      borderColor: COLORS.secondary_fonts,
  
    },
  
  
  
    tag: {
      color: 'black',
      fontSize: 15,
      marginBottom: 4,
      marginLeft: 4
    },
  
  });
  
  export default addfarm;</code></pre>
  </div>
  </div>
  </p>