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
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 ...'})
}
}}
/>
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});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With