vue+element-ui的el-date-picker时间选择器只能选择当前周

最近遇到一个这样一个需求,开始时间和结束时间只能选择当前周时间,而且结束时间不能比开始时间早;

上效果图:

 结构文件

<el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="params.startTime"
          type="datetime"
          :editable="false"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="请选择开始时间"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="params.endTime"
          type="datetime"
          :editable="false"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="请选择结束时间"
          :disabled="!params.startTime"
          :picker-options="pickerOptionsend"
        >
        </el-date-picker>
      </el-form-item>

js代码

<script>
export default {
data() {
    return {

  pickerOptions: {
        disabledDate(date) {
          let data = new Date(); //当前日期

          let year = Number(data.getFullYear()); //当前年
          let nowMonth = Number(data.getMonth());
          let month = Number(data.getMonth()) + 1; //当前月

          let day = Number(data.getDate()); //当天

          //计算某日是本月第几周

          let mydate = new Date(year, month - 1, day);

          let weekday = mydate.getDay(); //获取该日是星期几,0代表星期日//今天本周的第几天
          let sart = new Date(
            new Date(year, nowMonth, day + 1 - weekday)
          ).getTime();
          let end = new Date(
            new Date(year, nowMonth, day + 7 - weekday)
          ).getTime();
          //这里设置当前周以外的不可选
          return date.getTime() < sart || end < date.getTime();
        },
      },
      pickerOptionsend: this.disabledDate(),
}
}
methods: {
 disabledDate(date) {
      let that = this;
      return {
        disabledDate(date) {
          let data = new Date(); //当前日期

          let year = Number(data.getFullYear()); //当前年
          let nowMonth = Number(data.getMonth());
          let month = Number(data.getMonth()) + 1; //当前月

          let day = Number(data.getDate()); //当天

          //计算某日是本月第几周

          let mydate = new Date(year, month - 1, day);

          let weekday = mydate.getDay(); //获取该日是星期几,0代表星期日//今天本周的第几天
          if (that.params.startTime) {
            let sart = new Date(
              new Date(that.params.startTime).getTime() + 24 * 60 * 60 * 1000
            );
            let end = new Date(
              new Date(year, nowMonth, day + 7 - weekday)
            ).getTime();
            //这里设置当前周以外的不可选
            return date.getTime() < sart || end < date.getTime();
          }
        },
      };
    },
}
}

</script>

猜你喜欢

转载自blog.csdn.net/chen3647/article/details/128443792