iView里的日期控件（DatePicker）范围初始化

Posted 2021-09-01 左直拳

iView里有个日期控件：DatePicker，功能很强，还支持时间范围，太贴心了。照以往，一般是要设置2个时间选取控件的。

但问题是，如何用初始值去初始化它呢？
答案是赋给它一个时间数组，数组2个元素，一个开始时间，一个结束时间，都是Date类型。

<FormItem label="预警日期" prop="dtRange">
  <DatePicker
    type="datetimerange"
    format="yyyy年MM月dd日HH时mm分"
    v-model="form1.dtRange"
    placeholder="请选择预警日期范围"
  ></DatePicker>
</FormItem>

<script>
function getAlertDateRange (dt) {
  let st = new Date(dt.valueOf())
  st.setMinutes(0)//分钟清零

  let ft = new Date(st.valueOf())
  ft = new Date(ft.setDate(ft.getDate() + 1))//时间范围相隔1天
  return [st, ft] //返回一个日期数组
}

export default {
  data () {
    return {
      form1: {
        dtRange: getAlertDateRange(new Date()),
      }
    }
  }
}
</script>