zoukankan      html  css  js  c++  java
  • ElementUI日期选择器时间选择范围限制

      ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。

    一、单个输入框的

    //组件代码
    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptions">
    </el-date-picker>

      设置选择七天之前到今天的日期

    data(){
        return {
            pickerOptions:{
                disabledDate(time){
                    let _now = Date.now(),
                        seven = 7 * 24 * 60 * 60 * 1000,
                        sevenDays = _now - seven;
                    return time.getTime() > _now || time.getTime() < sevenDays;
                  //大于当前的禁止,小于7天前的禁止 } } } }

      这个return刚开始有点难理解,大致可以理解为time.getTime()就是里面的每个日期都会来遍及比较一遍,比当前时间大,为true,禁止;小于7天前的时间,为true,禁止。

    二、两个输入框

    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="开始日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptions1">
    </el-date-picker>

      限制结束日期不能大于开始日期

    data(){
        return {
             pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
    
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            }
        }
    }
  • 相关阅读:
    Java-技术专区-JVM调优常用参数
    Alibaba-技术专区-Dubbo的SPI应用与原理
    Java-技术专区-深入理解SPI机制
    Alibaba-技术专区-Dubbo SPI扩展点加载机制
    Java-技术专区-线程基础
    Java-技术专区-精巧好用的DelayQueue
    Alibaba-技术专区-Sentinel流量降级监控
    Java-技术专区-Java线程池ThreadPoolExecutor的理解
    SpringCloud-技术专区-SpringCloud组件原理
    机器码和伪指令
  • 原文地址:https://www.cnblogs.com/goloving/p/9122788.html
Copyright © 2011-2022 走看看