Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to restrict date selection in React native ios/android datepicker

I would like to restrict users from selecting particular dates based on business logic in react native ios/ android date pickers. Currently in the document i only see that a min date and max date can be provided. So is there a way to only restrict lets say (5 , 6, 10, 12 , 18) of a month?

Note: these dates are just an example would change from a case to case scenario

like image 880
Sam Avatar asked Dec 12 '17 11:12

Sam


2 Answers

For IOS example

    <DatePickerIOS
      date={this.state.chosenDate}
      onDateChange={(date) => {
        if(isAllowedDate(date))  {
          this.setState({chosenDate: newDate})
        }
        else {
          this.setState({error:'you can not select this date ...'})
        }

      }}
    />
like image 51
Oleksandr Cherniavenko Avatar answered Oct 24 '22 13:10

Oleksandr Cherniavenko


use react-native-datepicker module for iOS and Android , set a method to check if date valid or not

render(){
    return(
        ...
        <DatePicker
            mode="date"
            placeholder="select date"
            format="YYYY-MM-DD"
            onDateChange={this.saveDateIfValid}
        />
        ...
    )
}


saveDateIfValid = (date) =>
{
    if(date){
        let dateArray = data.split("-");
        let validDays = [5,6,10,12,18];
        let selectedDay = parseInt(dataArray[2]);
        if(validDays.indexOf(selectedDay) > -1){
            //date is valid
            this.setState({date : date});
            return;     //end the method
        }
    }

    //not valid
    this.setState({date : null});
}
like image 26
Ali Faris Avatar answered Oct 24 '22 12:10

Ali Faris