使用elementui el-date-picker默认展开日期选择器

1,268 阅读1分钟

场景:在项目中需要直接展示日期选择器,支持选择开始结束时间,禁用接口返回日期之前所有日期,如图

image.png

<el-date-picker
    v-model="value1"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    ref="daterange"
    class="date_style"
    popper-class="dateranges"
    @blur="chooseDate"
    :picker-options="pickerOptions"
    @change="handlechange"
 > </el-date-picker>
 export default { 
     data(){ 
         value1: '',
         pickerOptions: { 
             disabledDate: this.disabledDate 
         }, 
         startTime: '', 
         endTime: '', 
         timeAll: [] 
     }, 
     methods: { 
         // 日期禁用 
         disabledDate(time) { 
             var date = ''; 
             if (this.lastDate) { // 接口返回日期格式20230715,需要禁用包含这个日期之前的所有日期 
                 date = this.lastDate.slice(0, 4) + '-' + this.lastDate.slice(4, 6) + '-' + this.lastDate.slice(6, 8) 
             }
             return time.getTime() < new Date(date); 
          }, 
          // 失去焦点 
          chooseDate() {
              this.$refs.daterange.focus(); // 选择日期后依旧触发焦点 
          }, 
          // 修改日期 
          handlechange(val) { 
              // val 返回格式为[Sun Jul 16 2023 00:00:00 GMT+0800 (中国标准时间), Fri Jul 21 2023 00:00:00 GMT+0800 (中国标准时间)]需转换年月日 
              this.startTime = this.formatDateTime(val[0]); 
              this.endTime = this.formatDateTime(val[1]); 
              this.timeAll = this.getAll(this.startTime, this.endTime); // 开始结束时间之间的每一天集合['2023-07-16', '2023-07-17', '2023-07-18'] 
          }, 
          // 中国标准时间 转换成 年月日 
          formatDateTime (date) { 
              var y = date.getFullYear();
              var m = date.getMonth() + 1; 
              m = m < 10 ? ('0' + m) : m; 
              var d = date.getDate(); 
              d = d < 10 ? ('0' + d) : d;
              var h = date.getHours(); 
              var minute = date.getMinutes(); 
              minute = minute < 10 ? ('0' + minute) : minute; 
              return y + '-' + m + '-' + d; 
          }, 
          // 获取开始结束时间之间的每一天 
          getAll(start, end) { 
              let dateList = []; 
              var startTime = this.getDate(start); 
              var endTime = this.getDate(end); 
              while ((endTime.getTime() - startTime.getTime()) >= 0) { 
                  var year = startTime.getFullYear(); 
                  var month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1; 
                  var day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate(); 
                  dateList.push(year + "-" + month + "-" + day);
                  startTime.setDate(startTime.getDate() + 1); 
              } 
              return dateList; 
          }, 
     } 
} 
<style lang="scss"> 
.dateranges{ 
    width: 640px; 
    height: 273px; 
    box-shadow: none!important; 
    .el-picker-panel{ 
        box-shadow: none!important; 
    } 
    .popper__arrow{ 
        display: none!important; 
    } 
    .el-picker-panel__body-wrapper{ 
        width: 640px; 
    } 
    .el-date-table td { 
        padding: 1px 0; 
    } 
    .el-date-table th { 
        padding: 0px; 
    } 
    .el-date-range-picker__content{
        padding: 9px; 
    } 
}
</style>