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

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

需求

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

普通使用

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

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
  }
}

获取本周、本月、本机、本年的第一天

时间格式化：

	   //日期格式化，返回值形式为yy-mm-dd
      timeFormat: function (date) {
        if (!date || typeof(date) === "string") {
          this.error("参数异常，请检查...");
        }
        var y = date.getFullYear(); //年
        var m = date.getMonth() + 1; //月
        var d = date.getDate(); //日

        return y + "-" + m + "-" + d;
      },

本周第一天：

//获取这周的周一
function getFirstDayOfWeek (date) {

    var weekday = date.getDay()||7; //获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7

    date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
    return this.timeFormat(date);
}

本月第一天：

	  //获取当月第一天
      getFirstDayOfMonth: function (date) {
        date.setDate(1);
        return this.timeFormat(date);
      },

本季度第一天：

//获取当季第一天
function getFirstDayOfSeason (date) {
    var month = date.getMonth();
    if(month <3 ){
        date.setMonth(0);
    }else if(2 < month && month < 6){
        date.setMonth(3);
    }else if(5 < month && month < 9){
        date.setMonth(6);
    }else if(8 < month && month < 11){
        date.setMonth(9);
    }
    date.setDate(1);
    return this.timeFormat(date);
}

当年第一天：

//获取当年第一天
function getFirstDayOfYear (date) {
    date.setDate(1);
    date.setMonth(0);
    return this.timeFormat(date);
}

调用方法：

	setTimeFun:function () {
        var date = new Date();
        var today= this.timeFormat(date) //当前日期
        console.log("当前日期:"+today)
        
        var next = new Date(date.getTime() + 24*60*60*1000);
        var nextDate = this.timeFormat(next) //当前日期后一天
        console.log("当前日期:"+nextDate )
        
        var firstDayOfMonth = this.getFirstDayOfMonth(date) //本月第一天
        console.log("本月第一天:"+firstDayOfMonth )
		//........省略其他打印
      }