el-date-picker日期时间选择器设置快捷选项

el-date-picker日期时间选择器设置快捷选项

快捷方式有今天、最近1小时、最近3小时、最近5小时、昨天、最近三天

• html部分

<v-form-item>
  <el-date-picker style="width:325px;" v-model="time" size="small" prefix-icon="el-icon-date"
    type="datetimerange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间"
    :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
 </v-form-item>

• js部分

<script>
export default {
  data() {
    return {
      pickerMinDate: null,
      pickerMaxDate: null,
      day14: 14 * 24 * 3600 * 1000,
      time: '',
      pickerOptions: {
        // 开始日期和结束日期间隔14
        disabledDate:(time)=>{
          if (this.pickerMinDate) {
            return (time.getTime() > (this.pickerMinDate + this.day14)) || (time.getTime() < (this.pickerMinDate - this.day14))
          }
          return false
        },
        onPick:({ maxDate, minDate })=>{
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const ref = new Date().toLocaleDateString().replace(/\//g,'-')
            const start = new Date(ref + ' 00:00:00')
            const end = new Date()
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近1小时',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近5小时',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 5)
            picker.$emit('pick', [start, end])
          }
        },{
          text: '昨天',
          onClick(picker) {
            const ref = `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()-1}`
            const start = new Date(ref + ' 00:00:00')
            const end = new Date(ref + ' 23:59:59')
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近三天',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
    };
  },
  updated(){
    console.log(this.time)
  },
  methods: {
    
  }
}
</script>