element el-date-picker Date TimePicker 联动最多选择15天的时间

最新推荐文章于 2024-04-10 19:59:36 发布

软软不吃肉

最新推荐文章于 2024-04-10 19:59:36 发布

阅读量533

点赞数

文章标签： vue.js javascript 前端

原文链接：https://www.jianshu.com/p/2f2a20f24e8b

版权

一、使用Date TimePicker

<el-date-picker
            v-model="timeRange"
            type="datetimerange"
            align="right"
            :default-time='defaultTime'
            value-format="yyyy-MM-dd HH:mm:dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleChangeTime"
            :clearable="false"
          ></el-date-picker>

二、定义变量

 data () {
   return {
     selectDate: '',
     defaultTime: ['00:00:00', '23:59:59'],
     
     timeRange: [],
    pickerOptions: {
       onPick: ({ maxDate, minDate }) => {
         this.selectDate = minDate.getTime()
         if (maxDate) {
           this.selectDate = ''
         }
       },
       disabledDate: (time) => {
         if (this.selectDate !== '') {
           const one = (15 * 24 * 3600 - 1) * 1000 // 00:00:00 到23:59:59
           const minTime = this.selectDate - one
           const maxTime = this.selectDate + one
           return time.getTime() < minTime || time.getTime() > maxTime
         }
       }
     }
}
}