DatePicker日期选择器不能选择过去的时间(===当前时间之前的时间)

收集了js 和ts 的时间选择器的写法:

【react+ts+antd】

组件:

{form.getFieldValue('status') === '03' &&
                    getFieldDecorator('timingPublishTime', {
                        initialValue:
                            isEdit && infomentDetail.timingPublishTime
                                ? moment(infomentDetail.timingPublishTime)
                                : moment(),
                        rules: [{ required: true, message: '请选择定时发布时间' }]
                    })(
                        <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            disabledDate={disabledDate}
                            showTime
                            disabledTime={disabledTime}
                        />
                    )}

方法:

const range = (start: any, end: any) => {
        const result = [];
        for (let i = start; i < end; i += 1) {
            result.push(i);
        }
        return result;
    };
    // 不可选择以前的时间
    const disabledDate = (currentDate: any) => currentDate && currentDate < moment();
    const disabledTime = (date: any) => {
        const hours = moment().hours();
        const minutes = moment().minutes();
        const seconds = moment().seconds();
        // 当日只能选择当前时间之后的时间点
        if (date && moment(date).date() === moment().date()) {
            return {
                disabledHours: () => range(0, 24).splice(0, hours),
                disabledMinutes: () => range(0, 60).splice(0, minutes + 1),
                disabledSeconds: () => range(0, 60).splice(0, seconds + 1)
            };
        }
        return {
            disabledHours: () => [],
            disabledMinutes: () => [],
            disabledSeconds: () => []
        };
    };

a-date-picker 限制选择当前时间以后的时间

disabledDate(current) {
      const time = moment().endOf('day').subtract(1, 'days')
      return current && current < time
    },
    rangeHours(start, end, value, chooseday, day) {
      const result = []
      if (chooseday === day) {
        for (let i = start; i < end; i++) {
          if (i < value) {
            result.push(i)
          }
        }
      }
      return result
    },
    rangeMinutes(start, end, value, chooseday, day, chooseh, h) {
      const result = []
      if (chooseday === day && chooseh === h) {
        for (let i = start; i < end; i++) {
          if (i < value) {
            result.push(i)
          }
        }
      }
      return result
    },
    rangeSeconds(start, end, value, chooseday, day, chooseh, h, choosem, m) {
      const result = []
      if (chooseday === day && chooseh === h && choosem === m) {
        for (let i = start; i < end; i++) {
          if (i < value) {
            result.push(i)
          }
        }
      }
      return result
    },
    disabledDateTime(date) {
      // 选中的时间
      const choosetime = moment(date).format('HH-mm-ss')
      const chooseday = parseInt(moment(date).format('YYYY-MM-DD').split('-')[2])
      const chooseh = parseInt(choosetime.split('-')[0])
      const choosem = parseInt(choosetime.split('-')[1])
      // 当前时间
      const nowtime = moment().format('HH-mm-ss')
      const day = parseInt(moment().format('YYYY-MM-DD').split('-')[2])
      const h = parseInt(nowtime.split('-')[0])
      const m = parseInt(nowtime.split('-')[1])
      const s = parseInt(nowtime.split('-')[2])
      return {
        disabledHours: () => this.rangeHours(0, 24, h, chooseday, day),
        disabledMinutes: () => this.rangeMinutes(0, 60, m, chooseday, day, chooseh, h),
        disabledSeconds: () => this.rangeSeconds(0, 60, s, chooseday, day, chooseh, h, choosem, m)
      }
    },
<a-col :span="12">
                <a-form-item :labelCol="labelCol"
                             :wrapperCol="wrapperCol"
                             label="票面出发时间">
                  <a-date-picker style="width: 100%"
                                 show-time
                                 :disabled-date="disabledDate"
                                 :disabled-time="disabledDateTime"
                                 format="YYYY-MM-DD HH:mm:ss"
                                 placeholder="请选择票面出发时间"
                                 v-decorator="['buyticketDepartureTime', {rules: [{required: true, message: '请选择票面出发时间'}]}]" />
                </a-form-item>
              </a-col>

参考文章:

1.a-date-picker 限制选择当前时间以后的时间 - 小拐 - 博客园2.【react+ts+antd】DatePicker日期选择器不能选择过去的时间(===当前时间之前的时间) - 芝麻小仙女 - 博客园

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值