禁用 antd DatePicker 的日期和时间

IT技术 reactjs react-redux antd
2021-05-20 18:07:08

我正在使用antd 的DatePicker。

<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/D/YYYY HH:mm"
      defaultValue={this.getStartValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="Start"
      allowClear={false}
      onOk={this.onStartTimeChange}
    />
</LocaleProvider>
<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/DD/YYYY HH:mm"
      defaultValue={this.getEndValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="End"
      allowClear={false}
      onOk={this.onEndTimeChange}
    />
</LocaleProvider>

我在我的州有开始和结束时间的value。

要求是不允许用户在结束时间之后的开始时间选择任何内容。此外，用户不应选择开始时间之前的结束时间。

这可以使用 disabledDate 和 disabledTime 来实现吗？有没有其他推荐。

4个回答

是的，您可以使用disabledTime来满足要求。当用户设置startTime; 在您的onStartTimeChange处理程序中；endTimerDisabledTime为您的 endTimer设置一个状态以使用（反之亦然；所以当用户第一次设置时endTime；您应该startTimerDisabledTime在您的onEndTimeChange处理程序中设置一个适当的）

在此处输入图片说明

对于禁用日期，disabledDate可以使用props。这与工作方式不同，disabledTime并希望您传递一个返回布尔值的函数来启用/禁用日期。

function disabledDate(current) {
  // Can not select days before today and today
  return current && current.valueOf() < Date.now();
}

在您的情况下，Date.now()您可以使用 startDate 或 endDate而不是。

有关更多详细信息，请参阅此演示：https : //ant.design/components/date-picker/#components-date-picker-demo-disabled-date

希望澄清。

这是我使用接受开始和结束日期范围的闭包修复它的方法

function disableDateRanges(range = { startDate: false, endDate: false }) {
  const { startDate, endDate } = range;
  return function disabledDate(current) {
    let startCheck = true;
    let endCheck = true;
    if (startDate) {
      startCheck = current && current < moment(startDate, 'YYYY-MM-DD');
    }
    if (endDate) {
      endCheck = current && current > moment(endDate, 'YYYY-MM-DD');
    }
    return (startDate && startCheck) || (endDate && endCheck);
  };
}

你可以在 DatePicker 上调用它：

<DatePicker disabledDate = { disableDateRanges({endDate: new Date('2021-01-01'),startDate:new Date('2020-01-01')}) } />

您可以使用

   <DatePicker
            disabledDate={(current) => {
              let customDate = moment().format("YYYY-MM-DD");
              return current && current < moment(customDate, "YYYY-MM-DD");
            }} 
     />

下面的代码应该可以工作：

 disabledDate = (value) =>{
     const form = this.props.form;
    // Can not select days before today and today
    return  value < form.getFieldValue('startDate');
};

并使用以下语法禁用：

 <DatePicker disabledDate={this.disabledDate} placeholder="End Date" />
其它你可能感兴趣的问题
上一篇简单的 ReactJs 示例不起作用 下一篇如何使用玩笑测试 React 类中渲染以外的功能？