美文网首页
element el-date-picker datetim

element el-date-picker datetim

作者: 疯泽清 | 来源:发表于2021-03-02 11:08 被阅读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}},

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

    相关文章

      网友评论

          本文标题:element el-date-picker datetim

          本文链接:https://www.haomeiwen.com/subject/joytqltx.html