element日期时间段选择器的使用心得

使用时间段

<el-date-picker
// control the different select suitation
          v-if="selectOne == false"
          v-model="inputDate"
          unlink-panels
          type="daterange"
          range-separator="至 "
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
//pickerOption is the unique methods for the daterange DateSelector [ELEMENT DEFINE]
          :picker-options="pickerOption"
        >

　　data中

 pickerOption: {
// [date] include the maxDate and minDate
        onPick: (date) => {
          this.searchChangeDate(date);
        },
      },

　　使用时注意转换时间格式，默认{minDate: Thu Jul 01 2021 00:00:00 GMT+0800 (中国标准时间), maxDate: null}←这样的时间格式

// Get the date to filter
    searchChangeDate(date) {
      console.log(date);
      function formatDate(date) {
        // NULL String cannot use the getDate Methods
        if (date) {
          let Y = date.getFullYear() + "-";
          let M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          return Y + M + D;
        }
        return "";
      }
      this.maxDate = formatDate(date.maxDate);
      this.minDate = formatDate(date.minDate);
      console.log("maxD", this.maxDate, "\nminD", this.minDate);
    },

　　我使用watch监听inputDate的变化，由此比较时间大小再返回对应数值

watch:{
//... 
   inputDate() {
      let temp = [];
      let tDate = this.inputDate;

// select different dateSelector has different methods
      if (tDate && this.selectOne) {
        const newData = this.tempData.map((key) => {
          if (key.date == tDate) {
            temp.push(key);
          }
        });
        this.tempData = temp;
      }
      if (tDate && this.selectOne == false) {
        let self = this;
        const newDataMult = this.tempData.map((key) => {
          if (key.date < self.maxDate && key.date > self.minDate) {
            temp.push(key);
          }
        });
        this.tempData = temp;
      }
    },
//...
}

标签：temp,maxDate,element,let,key,date,心得,选择器,minDate
来源： https://www.cnblogs.com/lepanyou/p/15079873.html