美文网首页
ant-design vue 时间段组件range-picke

ant-design vue 时间段组件range-picke

作者: Rose_yang | 来源:发表于2020-05-25 11:28 被阅读0次

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')
    },

相关文章

网友评论

      本文标题:ant-design vue 时间段组件range-picke

      本文链接:https://www.haomeiwen.com/subject/xttyahtx.html