el-date-picker日期时间处理

日期处理成时间范围的写法

使用到DatePicker 日期选择器和monent

先下载monent

npm install moment

页面中引入

import moment from 'moment'

vue

<el-form-item label="周" v-show="queryParams.queryType == 1">
            <el-date-picker
            v-model="weeklyDate"
            :picker-options="{'firstDayOfWeek': 1}"
            type="week"
            placeholder="周"
            @change="newDateWeekHandle"
            style="width: 280px"
            :format="startDate + ' 至 ' + endDate"
            >
            </el-date-picker>
          </el-form-item>

:picker-options="{'firstDayOfWeek': 1}"是从周一到周日

js中对日期的处理

 /* 日期处理 */
      newDateWeekHandle() {
        const now = new Date(this.weeklyDate);
        console.log(now);
        const nowTime = now.getTime();
      const day = now.getDay();
      const oneDayTime = 24*60*60*1000;
      const mondayTime = nowTime - (day-1)*oneDayTime;
      const sundayTime = nowTime + (7-day)*oneDayTime;
      this.startDate =  moment(mondayTime).format('YYYY-MM-DD');
      this.endDate =  moment(sundayTime).format('YYYY-MM-DD');
      console.log(  this.startDate);
      console.log( this.endDate);
    },
 

2.日期选择禁用日期的写法

通过配置picker-options配置指定禁用日期（pickerOptions写到data里面

<el-form-item label="日期">
            <el-date-picker
              v-model="queryParams.createDate"
              style="width: 300px"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="日期"         
         :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>

2

    pickerOptions: {
   disabledDate(time) {
      return time.getTime() >= Date.now()- 8.64e7 ;
      /* time.getTime() < Date.now() - 8.64e7  禁用日期不包含当前日

time.getTime() > Date.now() - 8.64e7  禁用日期包含当前日 */
/* 指定日期的写法 */
   }
},