antdv RangePicker 组件控制开始时间（分钟）不等于结束时间（分钟）

原创已于 2023-08-10 16:25:38 修改 · 825 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #antd #a-range-picker

于 2023-08-10 16:24:26 首次发布

文章介绍了如何在Vue中使用AntDesign的rangePicker组件实现日期时间选择器，并限制了相邻时间间隔。方法包括设置默认值、计算禁用的时间范围以及处理日期和小时相同时的分钟禁用逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 <a-range-picker
    :show-time="{ format: 'YYYY-MM-DD HH:mm', defaultValue: defaultValue() }"
    :disabled-time="disabledTrainTime"
    @calendarChange="calendarRangeChange"/>
</template>



methods: {
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
     // 选择器初始值为【开始时间，开始时间+1min】
    defaultValue() { 
      return [moment(moment().format('LT'), 'HH:mm'), moment(moment().format('LT'), 'HH:mm').add(1, 'minutes')]
    },
    disabledTrainMinutes() {
      const min = new Date(this.form?.getFieldValue('plan_training_datetime')[0]).getMinutes()// 选择的第一个时间的分钟数
      return this.range(0, 60).splice(0, min + 1) // 返回结束日期被限制后的分钟数
    },
     disabledTrainTime(_, type) {
      if (this.selectedDate && type === 'end') { // 当选择第一个日期时，限制第二个日期选择器的分钟数
        const date1 = moment(this.form?.getFieldValue('plan_training_datetime')[0]).format('L')
        const date2 = moment(this.form?.getFieldValue('plan_training_datetime')[1]).format('L')
        const hour1 = new Date(this.form?.getFieldValue('plan_training_datetime')[0]).getHours()
        const hour2 = new Date(this.form?.getFieldValue('plan_training_datetime')[1]).getHours()
       if (date1 === date2 && hour1 === hour2) { // 当日期和小时相同时 才会有disabled分钟
        return {
          disabledMinutes: () => this.disabledTrainMinutes()
        }
       } else {
        return {}
       }
      }
    },
}