zoukankan      html  css  js  c++  java
  • el-date-picker 时间日期格式,选择范围限制

      el-date-picker 使用时,有时候想要限制用户选择的访问,但是用的是datetimerange类型的选择器,不想单独写两个起始的选择器。我发现网上的方案大部分都是单独写两个,个别datetimerange的选择器说的也不是很清楚,也有一些bug,这里贴出我的解决办法

      使用picker-options属性的disabledDate去控制范围。返回true代表禁止,就无法点击选择器的确认按钮。

    <el-date-picker
         :picker-options="pickerOptions"
          size="medium"
          v-model="searchTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
    ></el-date-picker>
    data() {
        return {
          maxDate: null,
          minDate: null,
          pickerOptions: {
         // 当我们选择日期时的回调方法。返回两个日期的最大值和最小值,第一次返回一个值,第二次返回两个值 onPick: ({ maxDate, minDate }) => {
          //当我们选择两个值的时候,就认为用户已经选择完毕 if (maxDate != null && minDate != null) { this.maxDate = maxDate; this.minDate = minDate; } }, disabledDate: time => { let maxDate = this.maxDate; let minDate = this.minDate; if (maxDate != null && minDate != null) { let days = maxDate.getTime() - minDate.getTime();
           //计算完之后必须清除,否则选择器一直处于禁止选择的状态 this.maxDate = null; this.minDate = null; return parseInt(days / (1000 * 60 * 60 * 24)) > 30; } else { //设置当前时间后的时间不可选 return time.getTime() > Date.now(); } } } }; },

    当我们选择的范围超过30天时,确认按钮无法点击

     当小于或等于30天时,可以确认

  • 相关阅读:
    html和css基础
    Chrome的插件使用
    04
    03
    MySQL的下载与安装(超完整)
    IDEA运行单元测试报错:java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing
    IDEA 快捷键合集
    IDEA + Spring的安装以及入门案例创建(超详细)
    Java NullPointerException异常的原因
    Eclipse 显示 错误:找不到或无法加载主类
  • 原文地址:https://www.cnblogs.com/lwjQAQ/p/12856155.html
Copyright © 2011-2022 走看看