How to use DatePicker with class component in react native

Question

I am new to react native . and I am creating a form where I am validating input. so the problem is I create class component and now I use datePicker in it. Now I getting error like invallid date or setdate mean how do I define fuunction component or simply where do I define const date setdate in my code

here is my code

class PickerDemo extends Component{

  constructor(props) {
    super(props);
    this.state={
      place:"",
      Distributor:"",
      DistributorCode:"",
      SalesCode:"",
    };
  }

validateInputs = () => {
  //  if (!this.state.accountNo.trim()) 
  if (!this.state.Place.trim()) 
  {
    this.setState({ PlaceError: 'Field Should Not Be An Empty' })
    return;
  }
  if (!this.state.Distributor.trim()) 
  {
    this.setState({DistributorError: 'Field Should Not Be An Empty' })
    return;
  }
  if (!this.state.DistributorCode.trim()) 
  {
    this.setState({ DistributorCodeError: 'Field Should Not Be An Empty' })
    return;
  }
  if (!this.state.SalesCode.trim()) 
  {
    this.setState({ SalesCodeError: 'Field Should Not Be An Empty' })
    return;
  } 
    else {
      Alert.alert("All fields validated")
      return;
    }
  }

  handlePlace = (text) => {
    this.setState({ PlaceError: '' })
    this.setState({ Place: text })
  }
  handleDistributor = (text) => {
    this.setState({ DistributorError: '' })
    this.setState({ Distributor: text })
  }
  handleDistributorCode = (text) => {
    this.setState({ DistributorCodeError: '' })
    this.setState({ DistributorCode: text })
  }
  handleSalesCode = (text) => {
    this.setState({ SalesCodeError: '' })
    this.setState({ SalesCode: text })
  }
  handleDate = (text) => {
    this.setState({ DateError: '' })
    this.setState({ Date: text })
  }

render(){
  const offset = (Platform.OS === 'android') ? -200 : 0;


  //    const [date, setDate] = useState('09-10-2020');
  //    const offset = (Platform.OS === 'android') ? -200 : 0;
  //    const [nature, setnature] = useState('Public');


  return (
    <KeyboardAvoidingView keyboardVerticalOffset={offset} style={styles.form} behavior='padding'>
      <Text style={styles.formLabel}> Retail Information Form </Text>
      <ScrollView style={{flex: 1,}} showsVerticalScrollIndicator={false}>
         <TextInput  maxLength={50} placeholder="Place" style={styles.inputStyle}
         onChangeText={this.handlePlace}  />
         <Text>{this.state.PlaceError}</Text>
         <DatePicker
          style={styles.datePickerStyle}
          date={date} // Initial date from state
          mode="date" // The enum of date, datetime and time
          placeholder="select date"
          format="DD-MM-YYYY"
          minDate="01-01-2016"
          maxDate="01-01-2050"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: { 
               //display: 'none',
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 36,
              borderWidth: 0
            },
          }}
          onDateChange={(date) => {
            setDate(date);
          }}/> 
        <TextInput  maxLength={20} placeholder="Distributor Name" style={styles.inputStyle} 
         onChangeText={this.handleDistributor}  />
         <Text>{this.state.DistributorError}</Text>
        <TextInput  maxLength={3} keyboardType = 'numeric' placeholder="Distributor Code *" style={styles.inputStyle} 
         onChangeText={this.handleDistributorCode}  />
         <Text>{this.state.DistributorCodeError}</Text>
        <View style={styles.inputStyle}>
        <Picker itemStyle={{backgroundColor:'white'}}
         style={{color: '#808080'}}
          selectedValue={nature}
          onValueChange={currentnature => setnature(currentnature)}>
          <Picker.Item  label="Public" value="Public" />
          <Picker.Item  label="Private" value="Private" />
          <Picker.Item  label="Government" value="Government" />
        </Picker>
        </View>
        <TextInput  maxLength={3} keyboardType = 'numeric' placeholder="Sales Team Code " style={styles.inputStyle} 
         onChangeText={this.handleSalesCode}  />
         <Text>{this.state.SalesCodeError}</Text>
        </ScrollView>
        <View style={{ height: 30 }} />
       

question from:https://stackoverflow.com/questions/65919906/how-to-use-datepicker-with-class-component-in-react-native

Answer 1

Waitting for answers