element el-date-picker datetim

2021-03-02  本文已影响0人  疯泽清

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

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

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

如下图所示

时间type  datetime

<el-date-picker v-model="searchParams.startTime" type="datetime" class="dateItem" value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择起始时间"  @change="determine" />

<el-date-picker v-model="searchParams.endTime" type="datetime" class="dateItem" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" :picker-options="pickerOptions" />

第一步首先添加默认时间(注意时间必须和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}},

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

上一篇下一篇

猜你喜欢

热点阅读