element ui时间选择器el-date-picker关于日期禁用disabledDate的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui时间选择器el-date-picker关于日期禁用disabledDate的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目中很多场景都用到时间范围选择的组件：

<el-date-picker disableddate,vue.js,elementui,前端

这时候我们过多选择的是elment ui里面的el-date-picker组件，但是又嫌弃人家原始的这个丑陋

<el-date-picker disableddate,vue.js,elementui,前端

所以选择自己组装，有没有小伙伴像我这样写的呢：

//页面组件
        <el-col :span="6">
          <el-date-picker 
             v-model="datePickerStart" 
             :disabled-date="disabledDateStart" 
             type="date"
             value-format="yyyy-MM-dd" 
             placeholder="开始时间" />
        </el-col>
        <el-col :span="1">
          <div class="blockText">-</div>
        </el-col>
        <el-col :span="6">
          <el-date-picker 
              v-model="datePickerEnd" 
              :disabled-date="disabledDateEnd" 
              type="date"  
              value-format="yyyy-MM-dd"
              placeholder="结束时间" />
        </el-col>


//日期禁用方法
    disabledDateStart(time) {
      const beginDateVal = this.datePickerEnd;
      if (beginDateVal) {
        return (
          time.valueOf() >=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },

    disabledDateEnd(time) {
      const beginDateVal = this.datePickerStart;
      if (beginDateVal) {
        return (
          time.valueOf() <=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },

发现始终不触发disabledDate，不会走进禁用的方法。寻思再三后，看官网介绍它并不是组件的Attributes。

<el-date-picker disableddate,vue.js,elementui,前端

哈哈最终原来是这么使用的：

<el-date-picker 
  v-model="datePickerStart"  
  type="date"
  :picker-options="{ disabledDate: disabledDateStart }" 
  value-format="yyyy-MM-dd" 
  placeholder="开始时间"
/>

也可以这么使用

<el-date-picker 
    v-model="datePickerStart" 
    type="date"
    :picker-options="pickerOptions" 
    value-format="yyyy-MM-dd" 
    placeholder="开始时间" 
/>

//在date里定义
 data() {
    return {
      pickeroptions: {
        disabledDate: time => {
          const beginDateVal = this.datePickerEnd;
          if (beginDateVal) {
            return (
              time.valueOf() >=
              new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
            );
          }
        }
      },
      datePickerStart: "",
      datePickerEnd: "",
    }
  }

个人推介第一个，符合我们日常的逻辑文章来源地址https://www.toymoban.com/news/detail-715642.html

到了这里，关于element ui时间选择器el-date-picker关于日期禁用disabledDate的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！