Antd-Vue 日期选择框的使用

提交

需要提交的值：startTime、endTime。格式为：YYYY-MM-DD

<a-range-picker
  v-model="showTime"
  @change="timeChange"
/>

// 组件的 allowClear 不起作用，因此用三元做判断，当 change 事件选择的值，存在时利用第三方库 moment.js 做格式化处理，并赋值，不存在则置空。
timeChange(val, valStr) {
  this.startTime = valStr[0]
    ? moment(valStr[0]).format("YYYY-MM-DD")
    : undefined
  this.endTime = valStr[1]
    ? moment(valStr[1]).format("YYYY-MM-DD")
    : undefined
},

回显

v-model 绑定 showTime，showTime 为数组，只用来回显。其实 change 事件触发时，showTime 也发生了改变，但我们不进行处理，只处理 startTime 和 endTime 用于提交。

// 使用 $set 将moment格式化处理的数据，放入 showTime 数组中，防止 vue 的视图不更新。
this.$set(this.showTime, 0, moment(startDate, "YYYY-MM-DD"))
this.$set(this.showTime, 1, moment(endDate, "YYYY-MM-DD"))

预设日期范围

<a-range-picker
  v-model="searchTime"
  :ranges="{
    最近一个月: [      moment(new Date()).subtract(1, 'months'),      moment(new Date())    ],
    最近三个月: [      moment(new Date()).subtract(3, 'months'),      moment(new Date())    ],
    最近六个月: [      moment(new Date()).subtract(6, 'months'),      moment(new Date())    ],
    最近一年: [      moment(new Date()).subtract(1, 'years'),      moment(new Date())    ]
  }"
  @change="timeChange"
/>

选择时，限制最大时间

举例：限制最多选择 15 天

<a-range-picker
  v-model="showTime"
  :disabled-date="disabledDate"
  :ranges="{
    最近七天: [
      moment(new Date()).subtract(6, 'days'),
      moment(new Date())
    ],
    最近十五天: [
      moment(new Date()).subtract(14, 'days'),
      moment(new Date())
    ]
  }"
  :placeholder="['开始时间', '结束时间']"
  @change="timeChange"
  @calendarChange="calendarChange"
/>

change 事件只有点击了第二个日期，才会有回调。calendarChange 事件，在点击第一个事件时就有回调，因此，使用该事件获得第一个选择的值作为基点值。

// 设置选择的时间值作为基点
calendarChange(val) {
  this.firstSelectTime = val[0]
},
// 禁用基点值前后 15 天的选项，保证最多只能选 15 天
disabledDate(current) {
  if (this.firstSelectTime) {
    return (
      current < moment(this.firstSelectTime).subtract(14, "days") ||
      current > moment(this.firstSelectTime).add(14, "days")
    )
  }
},