element-ui datepicker date picker date range selected to limit the maximum

As shown, the demand to select a maximum range of seven days

 <el-date-picker
        v-model="pickerDate"
        type="daterange"
        :picker-options="pickerOptions"
        @change="handlePickerDate"
        range-separator="至"
        format="yyyy-MM-dd"
        value-format="timestamp"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
  </el-date-picker>
timeOptionRange: null , 

pickerOptions: { 
        onpick: Time => {
               the this .searchList.timeOptionRange = time.minDate 
        }, 
        disabledDate: Time => { 
              the let timeOptionRange = the this .searchList.timeOptionRange 
              the let Seven = 24 * 3600 * 1000 *. 6
               IF ( timeOptionRange) {
                 // / * select the date and the current date is less than 7 days * / 
                the let current = new new a date ( new new a date () the toLocaleDateString ()). - timeOptionRange.getTime()
                return (time.getTime() > timeOptionRange.getTime()+ (current < seven?current:seven) ||
                  time.getTime() < timeOptionRange.getTime()-seven)
              }else {
                return time.getTime() > Date.now();
              }
            },
            shortcuts: [{
              text: '最近三天',
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近七天',
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三十天',
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
                picker.$emit('pick', [start, end]);
              }
        }]
  },             
handlePickerDate(e){
if(!e){
this.timeOptionRange = null
}
},
 

 

Guess you like

Origin www.cnblogs.com/zzzzzwt/p/11314970.html