ElementUI el-date-picker 限制選中日期前後30天,大於當天不可選

wangmiaozero發表於2020-12-04
<template>
  <el-date-picker v-model="date" 
    type="daterange" 
     range-separator="—" align="right" 
     start-placeholder="開始日期" 
     end-placeholder="結束日期" 
     value-format="yyyy-MM-dd"
     :picker-options="pickerOptions"
      @change="onChangeDate">
    </el-date-picker> 
  </template>

  <script>
  export default {
      data() {
          return {
              pickerMinDate:'',
              date:[],
              pickerOptions:{
                  onPick: (obj) => {
                      this.pickerMinDate = new Date(obj.minDate).getTime();
                  },
                  disabledDate:(time)=> {
                      if (this.pickerMinDate) {
                          const day1 =  30 * 24 * 3600 * 1000
                          let maxTime = this.pickerMinDate + day1
                          let minTime = this.pickerMinDate - day1
                          return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                      }else{
                          return time.getTime() > Date.now()+0 * 24 * 3600 * 1000
                      }
                  }
              }
          };
      },
      created() {
          this.getSelectList();
      },
      computed: {
      },
      methods: {
        onChangeDate(val) {
               this.params.StartDate = val[0];
               this.params.EndDate = val[1];
              if (val) {
                  this.params.StartDate = val[0];
                  this.params.EndDate = val[1];
              } else {
                  let StartDate = this.$FormatTime("YYYY-mm-dd",new Date());
                  let EndTime = this.$FormatTime("YYYY-mm-dd",new Date());
                  let list =  EndTime.split('-');
                  let EndDate = JSON.stringify((JSON.parse(list[0])+1))+'-'+list[1]+'-'+list[2];
                  this.params.StartDate = StartDate;
                  this.params.EndDate = EndDate;
              }
          }
      }
  };
  </script>

  <style lang="scss" scoped>
  </style>

 

相關文章