ant-design vue 时间段组件range-picker设置选择范围

1、时间限制范围 开始时间~结束时间不能超过31天

2、时间限制范围 结束时间不能超过今天

   <a-form-item
                label="订单时间:"
                :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 16 }"
              >
                <a-range-picker v-decorator="['orderTime']"
                  format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledDate"
                  :showTime="{
                hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
              }"
                  :placeholder="['开始日期', '结束日期']"
                  @openChange="onOpenChange"
                  @calendarChange="onCalendarChange"
                  @change="onChangeTimer" />
              </a-form-item>
// data 中声明
 disabledCurrent: null,
  /**
     * 清空禁用时间段的设置
     */
    onOpenChange (status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer (moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate (current) {
      if (!this.disabledCurrent) return false

      return (current && current < moment(this.disabledCurrent).subtract(1, 'M').startOf('day')) || current > moment(this.disabledCurrent).add(1, 'M').endOf('day')
    },
 /**
     * 2、时间限制范围 结束时间不能超过今天
     */
    disabledDate (current) {
      return current < moment().subtract(31, 'days').startOf('day') || current > moment().endOf('day')
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容