Element-UI和Element-Plus时间组件使用笔记

框架支持

• ‌Element-Plus‌：专为Vue 3设计，支持Composition API和Vue 3的其他新特性。
• ‌Element-UI‌：基于Vue 2，使用Options API

一.时间范围选择限制

1.Element-UI使用

参考‌Element-UI官方文档https://element.eleme.cn/#/zh-CN/component/datetime-picker

<template>
    <div>
        <el-date-picker v-model="form.time" type="datetime" size="mini" placeholder="选择时间" style="width:  210px" :format="getTimeFormat(form.time)" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"/>
    </div>
</template>
<script>
export default {
computed: {
    pickerOptions(){
      let selectDate = new Date(this.form.time)
      let selectableRangeData = '00:00:00 - 23:59:00'
      if(selectDate && moment(this.firstTime).format('YYYY-MM-DD') == moment(this.form.time).format('YYYY-MM-DD')){
        selectableRangeData = this.firstEvaporatorTime + ' - 23:59:00'
      }
      return {
        selectableRange: selectableRangeData,
        disabledDate: time => {
          return time.getTime() + (24*60*60*1000) <= new Date(moment(this.firstTime).format('YYYY-MM-DD')).getTime()
        },
      }
    },
  },
}
</script>

2.Element-Plus使用

参考‌Element-Plus官方文档https://element-plus.org/zh-CN/component/datetime-picker.html

<template>
    <div>
        <el-date-picker style="width:320px" v-model="searchData.DateRange" type="datetimerange"
                              range-separator="至" start-placeholder="开始日期"
                              end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" @change="clearDateRange" @calendar-change="onCalendarChange"></el-date-picker>
    </div>
</template>
<script>
export default {
    methods: {
},
    disabledDate(time)  {
      let today = new Date().getTime()
      if(this.choiceDate){ 
        const range = 1 * 24 * 3600 * 1000;
        let minTime = this.choiceDate.getTime() - range;
        let maxTime = this.choiceDate.getTime() + range;
        maxTime = maxTime > today ? today : maxTime;
        return time.getTime() < minTime || time.getTime() > maxTime;
      }
      return time.getTime() > today;
    },
    onPick({ maxDate, minDate }) {
          this.choiceDate = minDate.getTime();
          if (maxDate && maxDate.getTime() > new Date().getTime()) {
              this.choiceDate = "";
          }
    },
    onCalendarChange(dates){
      this.choiceDate = null
      let hasSelectDate = dates !== null && dates.length > 0
	    this.choiceDate = hasSelectDate ? dates[0] : null
    },
    clearDateRange(val){
      if(!val) {
        this.choiceDate = null
        this.DateRange = []
      }
    },
    }
}
</script>