ant design vue 日期组件选择日期范围

1,566 阅读1分钟

环境

项目为vue2.x项目,目的为开始日期不能大于结束日期,结束日期不能小于开始日期。

Html代码

     <a-date-picker
          format="YYYY-MM-DD"
          :disabled-date="disabledDateBegin"
          :show-time="false"
          v-model="queryParam.createTime_begin"
          valueFormat="YYYY-MM-DD"
          placeholder="请选择开始时间"
        />
    
        <a-date-picker
          format="YYYY-MM-DD"
          :disabled-date="disabledDateEnd"
          :show-time="false"
          v-model="queryParam.createTime_end"
          valueFormat="YYYY-MM-DD"
          placeholder="请选择结束时间"
        />

Js代码

data() {
      return {
        queryParam: {
          createTime_begin: '',
          createTime_end: '',
        }
      }
    },
    methods: {

      /**
       * 开始时间禁用选择
       */
      disabledDateBegin(current) {
        if (!this.queryParam.createTime_end) {
          return false
        }
	// 转换为时间戳再进行比较
        return current && (new Date(current.format('YYYY-MM-DD'))).getTime() > (new Date(this.queryParam.createTime_end)).getTime()
      },

      /**
       * 结束时间禁用选择
       */
      disabledDateEnd(current) {
        if (!this.queryParam.createTime_begin) {
          return false
        }
	// 转换为时间戳再进行比较
        return current && (new Date(current.format('YYYY-MM-DD'))).getTime() < (new Date(this.queryParam.createTime_begin)).getTime()
      }

    }