web-dev-qa-db-ja.com

ReactネイティブiOS / Android日付ピッカーで日付選択を制限する方法

React Native ios/Android日付ピッカーのビジネスロジックに基づいて、ユーザーが特定の日付を選択できないように制限したいと思います。現在、ドキュメントでは、最小日付と最大日付のみを指定できます。それで、月の（5、6、10、12、18）とだけ制限する方法はありますか？

注：これらの日付は単なる例であり、ケースごとに変更されます

reactjsreact-nativedatepickerreact-native-androidreact-native-ios
11
Sam

IOSの例

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

      }}
    />
8
Oleksandr Cherniavenko

使用する - react-native-datepicker iOS用モジュールおよびAndroid、日付が有効かどうかを確認するメソッドを設定します

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