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

Question

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

That is not possible with the default native iOS/android datepicker and you need to create a custom picker for yourself. — Himanshu Dwivedi, Jan 21 '18 at 17:26

score 8 · Answer 1 · answered Jan 23 '18 at 11:00

8

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 ...'})
        }

      }}
    />

answered Jan 23 '18 at 11:00

Oleksandr Cherniavenko

1,475
8
14

Hi @Sam if this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answer-er and yourself. There is no obligation to do this. – chridam Feb 19 '18 at 15:12

score 1 · Answer 2 · answered Jan 27 '18 at 21:34

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});
}

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

2 Answers2