Question

我正在使用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>

这里的要求是：

对于startDate，应禁用超出结束日期的日期，并且应禁用超出结束时间的时间。

我使用disabledDate实现了禁用日期。

现在我正在尝试使用disabledTime道具，但我无法理解如何仅在给定时间内禁用分钟

例如如果结束时间：18：34 然后应该启用从00:00到18:33的所有时间，并且应该禁用从18:34到23:59的所有时间。

==============================

getDateTime(value) {
    const dateTime = {};
    dateTime.date = value.format('MM/DD/YYYY');
    dateTime.hour = value.hour();
    dateTime.minute = value.minute();
    return dateTime;
}

getDisplayTime(dateTime) {
    const date = dateTime.date;
    const hour = dateTime.hour;
    const minute = dateTime.minute;
    const timeStr = `${date} ${hour}:${minute}`;
    return moment(timeStr, 'MM/DD/YYYY HH:mm');
}

onStartTimeChange(value) {
    if (value) {
        this.props.updateStartTime(this.getDateTime(value));
    }
}

onEndTimeChange(value) {
    if (value) {
        this.props.updateEndTime(this.getDateTime(value));
    }
}

getStartValue() {
    return this.getDisplayTime(this.props.startTime);
}

getEndValue() {
    return this.getDisplayTime(this.props.endTime);
}

disabledStartDate(current) {
    // Can not select days after end date
    const endDate = this.getEndValue();
    return current && endDate && current.valueOf() > endDate.valueOf();
}

range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

disabledStartDateTime(current) {
    const endDate = this.getEndValue();
    if (current && endDate && current.valueOf() !== endDate.valueOf()) {
        return {};
    }
    const hour = current.hour();
    const minute = current.minute();
    return {
        disabledHours: () => {
            if (hour < 23) {
                let start = hour;
                if (minute !== 0) {
                    start += 1;
                }
                return this.range(start, 24);
            }
            return [];
        },
        disabledMinutes: () => {
            if (current.hour() === hour) {
                return this.range(minute, 60);
            }
            return [];
        }
    };
}

<LocaleProvider locale={enUS}>
    <DatePicker
      format='MM/DD/YYYY HH:mm'
      defaultValue={this.getStartValue()}
      showTime={{format: 'HH:mm'}}
      allowClear={false}
      showToday={false}
      disabledDate={this.disabledStartDate}
      disabledTime={this.disabledFromDateTime}
      hideDisabledOptions={true}
      onChange={this.onStartTimeChange}
    />
</LocaleProvider>

<LocaleProvider locale={enUS}>
    <DatePicker
      format='MM/DD/YYYY HH:mm'
      defaultValue={this.getEndValue()}
      showTime={{format: 'HH:mm'}}
      allowClear={false}
      showToday={false}
      hideDisabledOptions={true}
      onChange={this.onEndTimeChange}
    />
</LocaleProvider>

==============================

Answer 1

<DatePicker ... showTime={{ format: "...", disabledMinutes: this.disabledMinutes}} />

然后

disabledMinutes = ( hour ) => {
    let minutes = []
    // Check which minutes 0..59 should be disabled during this hour
    // and push each minute to the minutes array. 
    return minutes
}

antd DatePicker：仅在给定小时内禁用分钟

1 个答案: