Antd 日期选择器 datepicker根据当前时间来设置禁用时间

littleNicki

已于 2023-04-23 10:42:46 修改

阅读量1.2k

点赞数

文章标签：前端 react

于 2022-09-07 13:32:49 首次发布

本文链接：https://blog.csdn.net/Wildness_/article/details/126743805

版权

<FormItem {...formItemLayout2} label="打款时间" name="remitTime">
    <DatePicker
        style={{width: '100%'}}
        value={payTime}
        defaultValue={paymentInfo.remitTime === null ? null : moment(paymentInfo.remitTime)}
         showTime
         onChange={onChangeTime}
         format="YYYY-MM-DD HH:mm"
         placeholder="选择打款时间"
         disabledDate={disabledDate}
         disabledTime={disabledDateTime}
         />                     
</FormItem>

const disabledDate = (current) => {
    // 不能选今天之后的日期
    return current && current > moment().endOf('day');
};
const range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
}


const disabledDateTime = (dates) => {
    let curDate = new Date();
    let hours = curDate.getHours();
    let minutes = curDate.getMinutes();
    //获取选择的时间
    let selHours = moment(dates).hours();
    let selMinutes = moment(dates).minutes();
    if (dates && moment(dates).date() === moment().date()) {
        //判断选中的是当天
        return {
            disabledHours: () => range(hours + 1, 24),
            disabledMinutes: () => {
                if (selHours!=null && selHours===hours) {
                    //判断选中的是当前小时
                    return range(minutes + 1, 60)
                }
                return []
            }
        };
    }
    return {
        disabledHours: () => [],
        disabledMinutes: () => []
    };
};