vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > elementui日期选择器选择禁用时间

elementui时间/日期选择器选择禁用当前之前(之后)时间代码实例

作者:子扬丨

当我们在进行网页开发时,通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于elementui时间/日期选择器选择禁用当前之前(之后)时间的相关资料,需要的朋友可以参考下

01. 日期选择

<template>
  <div>
    <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 {
      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>

02. 月份选择(示例)

<template>
    <div>
        <el-date-picker
          v-model="value"
          type="monthrange"
          value-format="yyyy-MM"
          format="yyyy-MM"
          :picker-options="setMonthDisabled"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </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'
              },
            },    
        }
    }
}
</script>

附:element ui date-picker 禁用今天以后日期

<el-date-picker
       v-bind="$attrs"
       v-on="$listeners"
       placeholder="选择日期"
       :picker-options="pickerOptions">
        v-model='dateVal'
</el-date-picker>
 
 
//禁用今天及以后日期
 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 24 * 3600 * 1000
        }
 },
 
//禁用今天以后日期
 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
 },

总结 

到此这篇关于elementui时间/日期选择器选择禁用当前之前(之后)时间的文章就介绍到这了,更多相关elementui日期选择器选择禁用时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文