element el-date-picker datetime控制结束时间大于其实时间

功能:1.结束时间必须大于开始时间

            2.时间格式必须要yyyy-MM-dd HH:mm:ss

            3.添加默认当前时间起始时间默认00:00:00 结束时间默认23:59:59

如下图所示

时间type  datetime

第一步首先添加默认时间(注意时间必须和value-format的格式一样,要不时间默认不上)

data中添加属性
 startTime: this.getTime(1, 1),   endTime: this.getTime(1, 2),

getTime(day, type) {

      const today = new Date()

      const targetday = today.getTime() + 1000 * 60 * 60 * 24 * day

      today.setTime(targetday) // 关键代码

      const tYear = today.getFullYear()

      let tMonth = today.getMonth()

      let tDate = today.getDate()

      tMonth = this.doHandleMonth(tMonth + 1)

      tDate = this.doHandleMonth(tDate)

      if (type === 1) {

        return tYear + '-' + tMonth + '-' + tDate + ' ' + '00:00:00'

      } else { return tYear + '-' + tMonth + '-' + tDate + ' ' + '23:59:59' }}

第二步就是控制开始时间如果选择时间,结束时间就不可以选择比开始时间小的时间

      1.开始时间添加@change回调赋值给startTime

         startTime = new Date(this.searchParams.startTime)

      2.结束时间添加pickerOptions开进行判断设置禁用状态

        pickerOptions: {disabledDate(time) {return time.getTime() < startTime}},

                                 方法可能很多,自己思考完成,静坐参考,请多指教

你可能感兴趣的:(element el-date-picker datetime控制结束时间大于其实时间)