AntD React:在 DateRangePicker 中禁用特定日期的时间范围
AntD React: Disable time ranges for specific dates in DateRangePicker
我正在构建一个汽车预订应用程序,我试图根据所选汽车的预订在 DateRangePicker 中禁用某些日期和时间。
我正在使用 AntD React DateRangePicker,但我无法禁用特定日期的特定时间范围。如果我禁用一个时间范围,它将在所有日期被禁用。例如,如果汽车 A 在 23.02.2020 13:00 - 25.02.2020 15:00
和 15.03.2020 08:00 - 20.03.2020 17:00
期间被预订,我想禁用时间范围 13:00 - 24:00 of 23.02.2020
、00:00 - 15:00 for 25.02.2020
、08:00 - 24:00 of 15.03.2020
和 00:00 - 17:00 of 20.03.2020
.但是文档中没有这个选项。
我怎样才能做到这一点?
你必须使用 disabledDate
道具才能做到这一点
const format = "DD.MM.YYYY HH:mm";
const disabledDates = [
{
start: "23.02.2020 13:00",
end: "25.02.2020 15:00"
},
{
start: "15.03.2020 08:00",
end: "20.03.2020 17:00"
}
];
<RangePicker
onChange={onChange}
defaultValue={[moment(), moment()]}
showTime
disabledDate={current => {
console.log(current);
return disabledDates.some(date =>
current.isBetween(
moment(date["start"], format),
moment(date["end"], format)
)
);
}}
/>
示例:https://codesandbox.io/s/great-wiles-zedz6
小时示例:https://codesandbox.io/s/frosty-booth-nchl2
您可以在此处阅读有关 moment.isBetween
的更多信息:https://momentjs.com/docs/#/query/is-between/
我正在构建一个汽车预订应用程序,我试图根据所选汽车的预订在 DateRangePicker 中禁用某些日期和时间。
我正在使用 AntD React DateRangePicker,但我无法禁用特定日期的特定时间范围。如果我禁用一个时间范围,它将在所有日期被禁用。例如,如果汽车 A 在 23.02.2020 13:00 - 25.02.2020 15:00
和 15.03.2020 08:00 - 20.03.2020 17:00
期间被预订,我想禁用时间范围 13:00 - 24:00 of 23.02.2020
、00:00 - 15:00 for 25.02.2020
、08:00 - 24:00 of 15.03.2020
和 00:00 - 17:00 of 20.03.2020
.但是文档中没有这个选项。
我怎样才能做到这一点?
你必须使用 disabledDate
道具才能做到这一点
const format = "DD.MM.YYYY HH:mm";
const disabledDates = [
{
start: "23.02.2020 13:00",
end: "25.02.2020 15:00"
},
{
start: "15.03.2020 08:00",
end: "20.03.2020 17:00"
}
];
<RangePicker
onChange={onChange}
defaultValue={[moment(), moment()]}
showTime
disabledDate={current => {
console.log(current);
return disabledDates.some(date =>
current.isBetween(
moment(date["start"], format),
moment(date["end"], format)
)
);
}}
/>
示例:https://codesandbox.io/s/great-wiles-zedz6
小时示例:https://codesandbox.io/s/frosty-booth-nchl2
您可以在此处阅读有关 moment.isBetween
的更多信息:https://momentjs.com/docs/#/query/is-between/