Vue - element 时间选择器设置禁用日期

风轻轻~

已于 2022-06-30 11:33:04 修改

阅读量1k

点赞数

分类专栏： # Vue__组件库文章标签： vue elementui

于 2021-07-14 11:32:25 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/118723524

版权

Vue__组件库专栏收录该内容

13 篇文章 0 订阅

订阅专栏

element 地址：
https://element.eleme.cn/#/zh-CN/component/date-picker

组件中使用

<template>
  <div>
    <el-date-picker
       v-model="value1"
       type="date"
       value-format="yyyy-MM-dd"
       :picker-options="pickerOptions"
     >
     </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      pickerOptions: {
        disabledDate(date) {
		  // 2021-07-11 至 2021-07-13 禁选，返回true代表禁用
          if (
            date.getTime() > new Date("2021-07-10") &&
            date.getTime() < new Date("2021-07-13")
          ) {
            return true;
          }
          // 设置过去时间不可选，返回true代表禁用
          //let zero=new Date().setHours(0, 0, 0, 0);
          //if(date.getTime()<zero){
          //  return true;
          //}
          return false;
        },
      },
    };
  },
};
</script>

<style scoped>
</style>