如何在 React 本机 ios/android datepicker 中限制日期选择

Posted 2023-05-07

【中文标题】如何在 React 本机 ios/android datepicker 中限制日期选择

【英文标题】：How to restrict date selection in React native ios/android datepicker

【发布时间】：2018-05-26 01:56:42

【问题描述】：

我想限制用户在反应原生 ios/android 日期选择器中基于业务逻辑选择特定日期。目前在文档中我只看到可以提供最小日期和最大日期。 那么有没有办法只限制让我们说一个月（5、6、10、12、18）？

注意：这些日期只是一个示例，会因情况而异

【问题讨论】：

默认的原生 iOS/android 日期选择器无法做到这一点，您需要自己创建一个自定义选择器。

【参考方案1】：

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

      
    />

【讨论】：

嗨@Sam，如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

【参考方案2】：

在iOS和Android上使用react-native-datepicker模块，设置一个方法来检查日期是否有效

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