【Element】日期时间选择器【封装】- 开始时间不能晚于结束时间+底部”清空“按钮不关闭日期框

需求

普通使用

template:

需求

时间日期选择器 - 开始时间不能晚于结束时间

普通使用

一个页面使用，不用封装，直接使用！

template:

       <el-date-picker type="datetime" :time-arrow-control="true" :picker-options="pickerOptions0" v-model="startDate"
        placeholder="开始时间" style="width: 165px" align="right"></el-date-picker>

       <el-date-picker type="datetime" :time-arrow-control="true" :picker-options="pickerOptions1" v-model="endDate"
        placeholder="结束时间" style="width: 165px" align="right"></el-date-picker>

type

显示类型

year/month/date/week/ datetime/datetimerange/daterange

time-arrow-control

是否使用箭头进行时间选择

picker-options

当前时间日期选择器特有的选项，来做指的判断

data:

data() {
      return {
        startDate: new Date(new Date() - 24 * 60 * 60 * 1000 * 30), //开始时间:一月前
        endDate: new Date(), //结束时间
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > this.endDate
            }
          },
          selectableRange: '00:00:00 - 23:59:59'
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.startDate) {
              if (this.startDate.format('hh:mm:ss') != '00:00:00') {
                return time.getTime() < new Date(this.startDate - 1 * 24 * 60 * 60 * 1000)
              } else {
                return time.getTime() < this.startDate
              }
            }
          },
          selectableRange: '00:00:00 - 23:59:59'
        },
}
},

注意结束时间 pickerOptions1中判断的时候需要往前翻一天，否则不能开始、结束时间在同一天
往前翻一天需要看看是不是00:00:00 ，结束时间判断即可 --此为坑
selectableRange ：时间范围
注意开始、结束时间的默认值

watch监听值的变化：

    watch: {
      startDate(newVal, oldVal) {
        if (newVal != null && this.endDate != null) {
          let oldDate = oldVal == null ? '' : oldVal.format('yyyyMMdd hh:mm:ss');
          let endDate = this.endDate.format('yyyyMMdd');
          // 如果开始时间值有变化再执行,减少渲染
          if (oldDate !== newVal.format('yyyyMMdd hh:mm:ss')) {
            // 如果当前值的日期等于结束时间的日期，则时间范围为00:00:00-结束时间的时分秒（本系统截止到分）
            if (newVal.format('yyyyMMdd') == endDate) {
              this.pickerOptions0.selectableRange =
                '00:00:00 - ' + this.endDate.format('hh:mm:ss');
            } else {
              //如果日期不相等，则开始时间时间范围为全范围
              this.pickerOptions0.selectableRange = '00:00:00 - 23:59:59';
            }
          }
        }
      },
      endDate(newVal, oldVal) {
        if (newVal != null && this.startDate != null) {
          let oldDate = oldVal == null ? '' : oldVal.format('yyyyMMdd hh:mm:ss');
          let startDate = this.startDate.format('yyyyMMdd');
          // 如果时间有变再执行,减少渲染
          if (oldDate !== newVal.format('yyyyMMdd hh:mm:ss')) {
            // 如果当前值的日期等于开始时间的日期，则时间范围为开始时间的时分秒 - 23:59:59（本系统截止到分）
            if (newVal.format('yyyyMMdd') === startDate) {
              this.pickerOptions1.selectableRange =
                this.startDate.format('hh:mm:ss') + ' - 23:59:59';
            } else {
              //如果日期不相等，则结束时间时间范围为全范围
              this.pickerOptions1.selectableRange = '00:00:00 - 23:59:59';
            }
          }
        }
      },
    },

对开始时间及结束时间进行实时监听
详见注释

在接口中传入:

startTime: this.startDate == null ? '' : this.startDate.format("yyyy-MM-dd hh:mm:ss"),
endTime: this.endDate == null ? '' : this.endDate.format("yyyy-MM-dd hh:mm:ss"),

注意对null值的处理 PS：将日期清除时组件值为null
转换字符

全局封装

新建文件data_picker.vue

<template>
  <div style="display: inline-block;">
    <el-date-picker type="datetime" :picker-options="pickerOptions0" v-model="startDate" placeholder="开始时间"
      style="width: 200px"></el-date-picker>
    <el-date-picker type="datetime" :picker-options="pickerOptions1" v-model="endDate" placeholder="结束时间"
      style="width: 200px"></el-date-picker>
  </div>
</template>
<script>
  export default {
    props: ['startDate', 'endDate'],
    data() {
      return {
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > this.endDate
            }
          },
          selectableRange: '00:00:00 - 23:59:59'
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.startDate) {
              if (this.startDate.format('hh:mm:ss') != '00:00:00') {
                return time.getTime() < new Date(this.startDate - 1 * 24 * 60 * 60 * 1000)
              } else {
                return time.getTime() < this.startDate
              }
            }
          },
          selectableRange: '00:00:00 - 23:59:59'
        },
      }
    },
    watch: {
      startDate(newVal, oldVal) {
        if (newVal != null && this.endDate != null) {
          let oldDate = oldVal == null ? '' : oldVal.format('yyyyMMdd hh:mm:ss');
          let endDate = this.endDate.format('yyyyMMdd');
          // 如果开始时间值有变化再执行,减少渲染
          if (oldDate !== newVal.format('yyyyMMdd hh:mm:ss')) {
            // 如果当前值的日期等于结束时间的日期，则时间范围为00:00:00-结束时间的时分秒（本系统截止到分）
            if (newVal.format('yyyyMMdd') == endDate) {
              this.pickerOptions0.selectableRange =
                '00:00:00 - ' + this.endDate.format('hh:mm:ss');
            } else {
              //如果日期不相等，则开始时间时间范围为全范围
              this.pickerOptions0.selectableRange = '00:00:00 - 23:59:59';
            }
          }
        }
        this.$emit('update:startDate', newVal);
      },
      endDate(newVal, oldVal) {
        if (newVal != null && this.startDate != null) {
          let oldDate = oldVal == null ? '' : oldVal.format('yyyyMMdd hh:mm:ss');
          let startDate = this.startDate.format('yyyyMMdd');
          // 如果时间有变再执行,减少渲染
          if (oldDate !== newVal.format('yyyyMMdd hh:mm:ss')) {
            // 如果当前值的日期等于开始时间的日期，则时间范围为开始时间的时分秒 - 23:59:59（本系统截止到分）
            if (newVal.format('yyyyMMdd') === startDate) {
              this.pickerOptions1.selectableRange =
                this.startDate.format('hh:mm:ss') + ' - 23:59:59';
            } else {
              //如果日期不相等，则结束时间时间范围为全范围
              this.pickerOptions1.selectableRange = '00:00:00 - 23:59:59';
            }
          }
        }
        this.$emit('update:endDate', newVal);
      },
    },
  }

</script>
<style scoped>

</style>

在文件中使用此封装：

<dataPicker :startDate.sync="startDate" :endDate.sync="endDate" />

或者在main.js中引入

//时间选择器
import dataPicker from '@/components/modules/data_picker'
Vue.component('dataPicker', dataPicker)

此为通过.sync 实现父子数据双向绑定：

this.$emit('update:startDate', newVal);

底部”清空“按钮不关闭日期框

监听change事件，当点击清空的时候时间值为null，然后在里面打开日期框。具体代码如下：

@change="selectTime"

selectTime(v) {
  // 点清空按钮
  if (v === null) {
    this.$refs.datePicker.showPicker()
    //清空代码****
    ****
    return
  }
}

原文链接：https://blog.csdn.net/Hei_lovely_cat/article/details/114023652

需求

普通使用

template:

data:

watch监听值的变化 ：

在接口中传入:

全局封装

底部”清空“按钮不关闭日期框

watch监听值的变化：