zoukankan      html  css  js  c++  java
  • vue + element 日期选择器(选择日期范围) 日期不可选范围

    Element 日期选择器(选择日期范围)的组件长这样色儿的

    没有其他需求的话直接怼  是没有问题的。 一个开始时间;一个结束时间 用这个还是挺香的     主要还是 看需求吧  如果非要弄两个时间选择器 也行

    主要是记录 日期选择器中 选择日期范围  这个玩意儿

    日期选择的需求 无非是 可选择范围问题
    例1:只可以选择当前日期  之前的日期范围(包括今天 或者 不包括今天)

    例2:只可以选择当前日期 之后的日期范围(包括今天 或者 不包括今天)

    例3:固定一段日期范围  (最近一个月,一周,三个月)

    暂时我能想到的就这些个 需求

    只可以选择当前日期  之前的日期范围(包括今天 或者 不包括今天)

    // 我是用element 在线预览编辑的  
    
    //html部分
    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"              
          end-placeholder="结束日期">
        </el-date-picker>
        <div>{{value1}}</div>
      </div>
    
    // vue data部分
    
    data() {
          return {
            pickerOptions: {
              disabledDate(time){
                return time.getTime() > Date.now()-8.64e7
              }
            },
            value1: '',
          };
        }

    // value-format 就是你v-model value1的值  如果你要yyyy-MM-dd格式就写这个   要时间戳 就写 timestamp

    // 日期不可选主要是 pickerOptions 里的disabledDate函数 在作怪
    // 如果需要今天 可选 那就 time.getTime() > Date.now() - 8.64e7
    // 如果需要今天 可选 那就 time.getTime() > Date.now()
     

    只可以选择当前日期 之后的日期范围(包括今天 或者 不包括今天)

    和上面代码是一样的 主要是将 pickerOptions 里的 disabledDate函数中的 return 判断改一下

    改为 小于 就行了噻  

    今天可选 time.getTime() > Date.now()

    今天可选 time.getTime() > Date.now - 8.64e7

  • 相关阅读:
    Python有哪些华而不实的技巧?
    json:dumps/loads & pickl
    json模块与第三方模块的引入
    os 及 sys 模块补充
    如何白嫖视频会员
    python和SAS的思考
    5、根据进程号PID查询其服务路径
    5、安装mongodb 异常
    2、shell 判断字符串是否包含另一个字符串
    【九校2D2T1】旋转子段
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/13219604.html
Copyright © 2011-2022 走看看