Element ui中时间插件 el-date-picker 禁止选中规定日期前后的时间

element-ui 的时间选择器中,有一个picker-options 的属性,属性值中有个disabledDate 可以设置禁用状态,类型为函数,参数为今天日期,通过返回Boolean值来确定日期是否可以选择。

标签代码如下

<el-date-picker
   type="date"
   value-format="yyyy-MM-dd"
   v-model="dateTime"
   size="small"
   :picker-options="pickerOptions"
></el-date-picker>

pickerOptions设置如下

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
};
</script>

pickerOptions 是在data组件中返回的。

当前值首先是个对象(Object)然后里面第一个参数为 disabledDate 。字面意思也好理解,禁止选中时间。而这个所谓的禁止选中时间就是禁止选中 return 出的值。
上例代码中8.64e7 是科学计数法算出的值,实际为(8.64×10×10×10×10×10×10×10),也就是一天毫秒数。因为此需求是当天时间可以选中所以需要减去8.64e7,根据自身需求而定。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容