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

这篇具有很好参考价值的文章主要介绍了vue+element-ui的el-date-picker时间选择器只能选择当前周。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

上效果图：

vue+element-ui的el-date-picker时间选择器只能选择当前周,vue.js,ui,elementui,javascript

结构文件

<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代码文章来源地址https://www.toymoban.com/news/detail-535439.html

<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>

到了这里，关于vue+element-ui的el-date-picker时间选择器只能选择当前周的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！