ElementUI-DatePicker日期选择器（二次封装）

需求背景

后台项目想使用时间选择器选择一段时间进行数据筛选，element中本身有可选择日期范围的时间组 件，但是组件比较大在移动端显示有问题，所以需要重新封装一个可以适配移动端的时间选择器。

具体需求

• 可选择时间段，开始时间应小于等于结束时间
• 可以选择日期，也可选择日期时间点
• 可以设置默认值，且若不选择具体的时间（几点几分几秒），结束时间应为当天的 23:59:59
• 时间需要转换为时间戳且单位转换为秒

代码实现

html部分：

// 可用两个单选日期凑一下
<template>
  <div>
    <el-date-picker
      v-model="start_time"
      :type="dateType"
      placeholder="选择日期"
      :picker-options="pickerOptions"
    />
    <span>-</span>
    <el-date-picker
      v-model="end_time"
      :type="dateType"
      placeholder="选择日期"
      :picker-options="pickerOptionsWeekday1"
    />
  </div>
</template>

数据处理部分：

export default class extends Vue {
  // 时间选择器类型
  // 值可为 date（仅选日期） 或 datetime（可选择日期以及时间）
  @Prop({ default: 'date' }) dateType?: string
  // 设置默认值,数据格式为 { start_time: xxx,  end_time: xxx },单位为 ms
  // 若不手动选择时间点，结束时间建议传当天的 00:00:00
  @Prop({ default: '' }) defaultDate?: any

  private start_time:any = ''
  private end_time:any = ''
  // 限制开始时间，需小于等于结束时间，没有选择结束时间则不限制
  private pickerOptions= this.limitsDate()
  private limitsDate() {
    return {
      disabledDate: (time: any) => {
        if(this.end_time){
          return time.getTime() >=  +new Date(this.end_time) + 1000 * 60 * 60 * 24
        }
      }
    }
  }
  private pickerOptionsWeekday1:any =  this.limitsDate1()
  // 限制结束时间
  private limitsDate1() {
    return {
      disabledDate: (time: any) => {
        if(this.start_time){
          return time.getTime() <= +new Date(this.start_time) - 1000 * 60 * 60 * 24
        }
      }
    }
  }
 // 日期时间选择器不需要单独处理结束时间，日期选择器结束时间应为当天的23:59:59
 // 时间转换为时间戳且单位为s(后端要求)
  @Watch('start_time', { immediate: true })
  private handlerStart(nv: any) {
    let date:any = {
      start_time: nv ? Math.ceil(+new Date(nv) / 1000) : '',
      end_time: this.dateType === 'datetime' ? (this.end_time ? Math.ceil(+new Date(this.end_time) / 1000) : '') : (this.end_time ?  Math.ceil(+new Date(this.end_time) / 1000 + 86399) : '')
    }
    this.$emit('input', date)
  }
  @Watch('end_time', { immediate: true })
  private handlerEnd(nv: any) {
    // 日期时间选择器不需要单独处理结束时间，日期选择器结束时间应为当天的23:59:59
    let date:any = {
      start_time: this.start_time ? Math.ceil(+new Date(this.start_time) / 1000) : '',
      end_time: this.dateType === 'datetime' ? (nv ? Math.ceil(+new Date(nv) / 1000) : '') : (nv ?  Math.ceil(+new Date(nv) / 1000 + 86399) : '')
    }
    this.$emit('input', date)
  }
  
  @Watch('defaultDate', { immediate: true })
  private handlerdate(nv: any, ov: any) {
    if(nv.start_time) {
      this.start_time = nv.start_time
      this.end_time = nv.end_time
    }
  }
}

使用组件示例

<DateTimePicker v-model="date" dateType="datetime"/>
// 父组件监听一下date值变化，自行整理数据结构