乐趣区

关于vue.js:elementUI中的eldatepicker日期月份时间选择器禁用选中当前和以后的日期

jiezi

问题形容

工夫选择器抉择日期、月份在我的项目中比拟常见，比方查问历史记录，咱们须要抉择具体日期或者发申请，获取历史数据。所以咱们须要对工夫选择器做一些管制，比方历史记录查问的话，就不能抉择以后日期和当前的日期了。所以就须要把以后日期和将来日期给禁用掉，本文记录一下相应的代码写法。

应用饿了么 UI 必定是要用官网给到的 api，这里咱们应用的是 picker-options 和 disabledDate 去管制，附上官网文档地址链接：https://element.eleme.cn/#/zh…

禁用日期案例

效果图

代码如下 

<template>
  <div id="app">
    <el-date-picker
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="请抉择日期"
      v-model="dayDate"
      :picker-options="setDisabled"
    ></el-date-picker>
  </div>
</template>

<script>
export default {data() {
    return {
      timer: null,
      dayDate: "",
      setDisabled: {disabledDate(time) {return time.getTime() > Date.now();  // 可选历史天、可选以后天、不可选将来天
          // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选以后天、不可选将来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选以后天、可选将来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选以后天、可选将来天
        },
      },
    };
  },
  /*
    8.64e7 是迷信计数法 8.64 乘以 10 的 7 次方，即为 86400000 也就是 1000*60*60*24 也就是一天的毫秒数。因为 Date.now()
    办法可能返回失去自 1970 年 1 月 1 日 00:00:00(UTC) 到以后工夫的毫秒数。咱们是北京工夫的时区，也就是为东 8 区，终点工夫对应就是："1970/01/01 08:00:00"

    picker-options 须要一个最终的布尔值，所以是否减去 8.64e7 也就是是否往前推移一天，也就是是否蕴含以后的天数
  */
};
</script>

<style lang="less" scoped>
#app {
  width: 950px;
  height: 600px;
  box-sizing: border-box;
  margin: 50px;
}
</style>

禁用日期简略，上面咱们说一下禁用月份，禁用月份须要对日期格局做一个转换并判断即可

禁用月份案例

效果图

代码如下 

<template>
  <div id="app">
    <el-date-picker
      v-model="value"
      format="yyyy-MM"
      value-format="yyyy-MM"
      type="month"
      placeholder="请抉择月份"
      :picker-options="setMonthDisabled"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {data() {
    return {
      value: "",
      setMonthDisabled: {disabledDate(time) {
          // 获取以后的月份信息
          const date = new Date(); // 获取以后的工夫根本信息，值是这样的：Tue Jul 20 2021 14:59:43 GMT+0800 ( 中国规范工夫)
          const year = date.getFullYear(); // 获取以后年份，值是这样的：2021
          let month = date.getMonth() + 1; // 获取以后月份，值是这样的：6   getMonth() 办法返回值是 0 -11，也就是 1 月份到 12 月份，所以要加上 1，才是以后月份
          if (month >= 1 && month <= 9) {
            // 如果是 1 月到 9 月就要在后面补上一个 0   比方：02、07    月份这样示意
            month = "0" + month;
          }
          const nowDate = year.toString() + month.toString(); // 转换成字符串拼接，最终失去年和月，比方此时的工夫是 2021 年 7 月 20 号，所以 nowDate 的值是：202107

          // 获取工夫选择器的月份信息
          const timeyear = time.getFullYear(); // 获取工夫选择器的年份（有很多）let timemonth = time.getMonth() + 1; // 与下面同理
          if (timemonth >= 1 && timemonth <= 9) {timemonth = "0" + timemonth;}
          const elTimeData = timeyear.toString() + timemonth.toString();

          // 返回，工夫选择器的日期月份大于以后日期的月份，又因为 disabledDate 函数是管制月份禁用不可选
          // 所以，最终就是：工夫选择器的月份大于以后的月份，就都禁用掉，所以就实现了最终成果：// 大于等于以后月份都不可选 
          return elTimeData <= nowDate; // 这里尽管是字符串，然而弱类型语言 js 会做一个转换，是能够比拟大小的如：'202107' > '202008'
        },
      },
    };
  },
  methods: {},};
</script>

<style lang="less" scoped>
#app {
  width: 950px;
  height: 600px;
  box-sizing: border-box;
  margin: 50px;
}
</style>

其实写法也是多样的，欢送大家独特交流学习，共同进步

退出移动版