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

2021-07-30 15:31:55 阅读：255 来源： 互联网

标签：temp maxDate element let key date 心得选择器 minDate

使用时间段

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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