antdesign DatePicker 禁止选择历史的日期及时间_datepicker不允许选择过去的日期

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

AntDesign（4.x） DatePicker组件禁止选择历史的日期及时间的js实现

1、DatePicker API说明

参数	说明	类型
disabledDate	不可选择的日期	(currentDate: moment) => boolean
showTime	增加时间选择功能	Object \| boolean
disabledTime（showTime）	不可选择的时间	function(date)

2、DatePicker 禁用历史日期

<DatePicker
    format="YYYY-MM-DD"
    disabledDate={(current) => {
        // Can not select days before today and today
		return current < moment().startOf('day');
3、DatePicker （showTime） 禁用历史时间
 
<DatePicker
    showTime
    format="YYYY-MM-DD HH:mm:ss"
    disabledDate={ (current) => {
        return current < moment().startOf('day');
    disabledTime = {(dates) => {
        	//获取当前的时间
            let curDate = new Date();
            let hours = curDate.getHours();
            let minutes = curDate.getMinutes();
            let seconds = curDate.getSeconds();
            //获取选择的时间
            let selHours = moment(dates).hours();
            let selMinutes = moment(dates).minutes();
            let selSeconds = moment(dates).seconds();
            if (dates && moment(dates).date() === moment().date()) {
                //判断选中的是当天
                return {
                    disabledHours: () => range(0,hours),
                    disabledMinutes: () => {
                        if (selHours!=null && selHours===hours) {
                            //判断选中的是当前小时
                            return range(0,minutes)
                        return []
                    disabledSeconds: () => {
                        if (selMinutes!=null && selMinutes===minutes) {
                            //判断选中的是当前分钟
                            return range(0,seconds)
                        return []
        return {
            disabledHours: () => [],
            disabledMinutes: () => [],
            disabledSeconds: () => [],
    placeholder="选择时间"
4、AntDesign官方提供的range函数
 
const range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    return result;
5、实现的效果
 
 //限制当天之前的日期不可选
  disabledDate(current) {
   return current && current <moment().subtract(1, days); //当天之前的不可选，不包括当天
  //return current && current < moment().endOf(
{form.getFieldValue('status') === '03' &&
                    getFieldDecorator('timingPublishTime', {
                        initialValue:
                            isEdit && infomentDetail.t
                                    $('#dayPicker').datetimepicker({            format: 'yyyy-MM-dd hh:ii',            autoclose:true,            startDate:new Date(),//只要加上此代码即可            startView:0,            minView:0,            ...
                                    需求：选择日期时，只能选择当天及之后的日期，之前的日期不可选；选择时间时，只能选择当日当前及之后的时间点；
例子：如果当前时间时 2021年01月10日 08:08:08，那么 DatePicker 组件可选的日期和时间范围只能是 2021年01月10日 08:08:08 之后的日期和时间，如：2021年01月10日 08:09:00
解决方案： 因为使用的是 Ant Design V4.0 版本组件库，该 DatePicker 组件有两个属性：disabledDate和 disableTime...
                                    需求：选择某个时间段 过去的时间不可选 当开始日期选择今天时，时分秒默认为当前时间，结束日期的时间为一天的最后一秒（防止结束日期也选择今天）
templete
<el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model.trim="date"
                        :picker-options="pic

AntDesign（4.x） DatePicker组件 禁止选择历史的日期及时间的js实现

1、DatePicker API说明

2、DatePicker 禁用历史日期

3、DatePicker （showTime） 禁用历史时间

4、AntDesign官方提供的range函数

5、实现的效果

AntDesign（4.x） DatePicker组件禁止选择历史的日期及时间的js实现

3、DatePicker （showTime）禁用历史时间