a-date-picker时间组件时间不可选，精确到时分秒

最新推荐文章于 2025-09-24 10:11:10 发布

原创最新推荐文章于 2025-09-24 10:11:10 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

ant-design-vue项目实战专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用React日期时间选择器组件，限制用户只能选择当前时间及以后的日期，同时根据选定日期调整时间范围和可用性。

需求：格式 YYYY-MM-DD HH:mm:ss 时间默认填充 00:00:00；不可选在当前时间以前
的日期时间，举例：当前时间 2024 年 2 月 2 日 16:40:01 ,如提交日期为 2024 年 2 月 2 日00:00:00，属于不可提交当前时间之前的日期时间。

实现效果
在这里插入图片描述

<a-date-picker
  format="YYYY-MM-DD HH:mm:ss"
  valueFormat="YYYY-MM-DD HH:mm:ss"
  :disabled-date="disabledDate"
  :disabled-time="disabledDateTime"
  :show-time="true"
  :disabled="!!id"
  @panelChange="handlePanelChange"
  @change="handleDateChange"
  v-decorator="['effectiveTime', {rules:[{required: true,message:'请选择申报限重申报日期'}]}]"
  placeholder="请选择申报限重申报日期"
/>

range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    disabledDate(current) {
      // 不能选当前时间以前的时间
      return current && current < moment()
    },
    disabledDateTime() {
      // 判断已选日期是否是今天，如果是今天，设置时分秒可选范围为当前的时间，否则都可选
      const today = moment().format('YYYY-MM-DD')
      let h = 0
      let m = 0
      let s = 0
      // 判断已选时间是否为今天
      if (this.currentDate && moment(this.currentDate.valueOf()).format('YYYY-MM-DD') === today) {
        // 所选小时
        const ch = moment(this.currentDate.valueOf()).hour()
        // 所选分钟
        const cm = moment(this.currentDate.valueOf()).minute()
        // 今天的当前小时
        h = moment().hour()
        if (ch === h) {
          m = moment().minute()
        }
        if (ch === h && cm === m) {
          s = moment().second()
        }
      }
      return {
        disabledHours: () => this.range(0, h),
        disabledMinutes: () => this.range(0, m),
        disabledSeconds: () => this.range(0, s)
      }
    },
    // 面板变更时记录下所选时间
    handlePanelChange(value, mode) {
      this.currentDate = value
    },
    // 时间发生变化时回调
    handleDateChange (value, mode) {
      this.currentDate = value
    },