禁用antd DatePicker的日期和时间

时间:2017-09-22 06:57:02

标签: reactjs react-redux antd

我正在使用antd。{/ p>中的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>

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

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

可以使用disabledDate和disabledTime来实现吗?还有其他建议。

4 个答案:

答案 0 :(得分:1)

是的,您可以使用disabledTime来满足要求。 当用户设置startTime;在你的onStartTimeChange处理程序中;为您的endTimer设置endTimerDisabledTime状态(反之亦然;因此,当用户首次设置endTime时;您应在startTimerDisabledTime处理程序中设置适当的onEndTimeChange

enter image description here

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

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

在您的情况下,您可以使用startDate或endDate代替Date.now()

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

希望澄清。

答案 1 :(得分:0)

以下代码应该有效:

 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" />

答案 2 :(得分:0)

对于日期范围,您可以这样使用

vector<float> sig(size);

答案 3 :(得分:0)

skipDays和allowDays可以是两天之间的差异天。

const disabledDate = current => {
// Can not select days before today and no of skip days
if (props.skipDays) {
  return (
    current &&
    current <
      moment()
        .startOf('day')
        .add(props.skipDays, 'day')
  );
}
// Can not select days before today and allow only some days from today
if (props.allowDays) {
  return (
    current &&
    (current < moment().startOf('day') ||
      current >
        moment()
          .startOf('day')
          .add(props.allowDays, 'day'))
  );
}
// Can not select days before today
return current && current < moment().startOf('day');
};