• element UI datepicker组件限制可选日期范围


    长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下:

    然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options 中的 disableDate 即可对可选日期进行限制。如下:

    <el-date-picker
       type="date"
       placeholder="选择日期"
       v-model="start_time"
       style=" 100%;"
       value-format="yyyy-MM-dd"
       :picker-options="startDateDisabled"
       @change="getStartTime"
       >
    </
    el-date-picker>
    data () {
      return {
            startDateDisabled: {},
            endDateDisabled: {}
       }                       
    }

    这里是我对开始日期和结束日期的限制条件:

    created () {
      // 限制开始日期不能超过当前日期 this.startDateDisabled.disabledDate = function (time) { return (time.getTime() + 24 * 3600 * 1000) > Date.now() }
      // 限制结束日期:当前日期往后的日期都不能选取
    this.endDateDisabled.disabledDate = function (time) { return time.getTime() > Date.now() } }

    效果如下:

      

      因为我想要开始的日期是从今天及往后都不能选取,所以在time.getTime()后加一天的时间(即24*3600*1000),如果有其他的限制,根据自己的需要来进行调整即可

  • 相关阅读:
    Windows 编程
    javascript 快速入门
    python 在windows下监听键盘按键
    eleme 项目使用到的库
    lftp 快速使用
    自动测试工具
    Cookie(1)
    fillder script使用
    Boost.Hana
    Haskell语言学习笔记(50)Extra
  • 原文地址:https://www.cnblogs.com/secretAngel/p/11425592.html
Copyright © 2020-2023  润新知