zoukankan      html  css  js  c++  java
  • elementUI日期组件限制日期范围 吴小明

    限制区间30天:

          pickerMinDate: '',
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              this.pickerMinDate = minDate.getTime()
              if (maxDate) this.pickerMinDate = ''
            },
            disabledDate: (time) => {
              if (this.pickerMinDate !== '') {
                const one = 30 * 24 * 3600 * 1000
                const minTime = this.pickerMinDate - one
                const maxTime = this.pickerMinDate + one
                return time.getTime() < minTime || time.getTime() > maxTime
              }
            }
          }

    限制区间30天,不能大于今日:

          pickerMinDate: '',
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              this.pickerMinDate = minDate.getTime()
              if (maxDate) this.pickerMinDate = ''
            },
            disabledDate: (time) => {
              if (this.pickerMinDate !== '') {
                const one = 30 * 24 * 3600 * 1000
                let minTime = this.pickerMinDate - one
                let maxTime = this.pickerMinDate + one
                if (maxTime > new Date()) maxTime = new Date() // 限制不能选择今天之后的日期
                return time.getTime() < minTime || time.getTime() > maxTime
              }
              return time.getTime() > Date.now()
            }
          }

    限制区间30天,不能小于今日:

          pickerMinDate: '',
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              this.pickerMinDate = minDate.getTime()
              if (maxDate) this.pickerMinDate = ''
            },
            disabledDate: (time) => {
              if (this.pickerMinDate !== '') {
                const one = 30 * 24 * 3600 * 1000
                let minTime = this.pickerMinDate - one
                let maxTime = this.pickerMinDate + one
                if (minTime < new Date()) minTime = new Date() // 限制不能选择今天之前的日期
                return time.getTime() < minTime || time.getTime() > maxTime
              }
              return time.getTime() < Date.now() - 8.64e7 // 加上 - 8.64e7 就可以选择今天
            }
          }

    选择今天及之前的日期:

          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() > Date.now()
            }
          }

    选择今天之前的日期:

          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() > Date.now() - 8.64e7
            }
          }

    选择今天及之后的日期:

          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() < Date.now() - 8.64e7
            }
          }

    选择今天之后的日期:

          pickerOptions: {
            disabledDate: (time) => {
              return time.getTime() < Date.now()
            }
          }

    结束日期不能大于开始日期:

  • 相关阅读:
    实现非父子之间通信,兄弟组件之间的数据传递--eventBus
    Vue的核心思想是什么..........
    Vue——核心思想--mvvm
    高效遍历匹配Json数据,避免嵌套循环
    js 报错(intermediate value)(...) is not a function
    【Three.js】three.js 中的矩阵变换及两种旋转表达方式
    【Vue源码】将二维数组变为一维数组
    【移动端】cordova实现退出app功能
    【移动端】ionic cordova 打包debug调试版、release发布版
    【Vue源码】document.querySelector()方法
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15654978.html
Copyright © 2011-2022 走看看