Demand background

Background project wants to use the time selector to select a period of time for data screening. Element itself has time components that can select the date range, but the component is too large to display on the mobile terminal, so it needs to repackage a time selector that can adapt to the mobile terminal.

The specific requirements

  • The start time must be less than or equal to the end time
  • You can select a date or date-time point
  • You can set the default value. If you do not select a specific time, the end time is 23:59:59 of the current day
  • The time needs to be converted to a timestamp and the units converted to seconds

Code implementation

HTML part:

// Use two radio dates
<template>
  <div>
    <el-date-picker
      v-model="start_time"
      :type="dateType"
      placeholder="Select date"
      :picker-options="pickerOptions"
    />
    <span>-</span>
    <el-date-picker
      v-model="end_time"
      :type="dateType"
      placeholder="Select date"
      :picker-options="pickerOptionsWeekday1"
    />
  </div>
</template>
Copy the code

Data processing part:

export default class extends Vue {
  // Time selector type
  // The value can be date (date only) or datetime (date and time optional)
  @Prop({ default: 'date'}) dateType? : string// Set the default value. The data format is {start_time: XXX, end_time: XXX}, in ms
  // If you do not manually select the end time, you are advised to upload the end time to 00:00:00 of the current day
  @Prop({ default: ' '}) defaultDate? : any private start_time:any =' '
  private end_time:any = ' '
  The start time must be shorter than or equal to the end time. If no end time is selected, the start time is not limited
  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()
  // Limit the end time
  private limitsDate1() {
    return {
      disabledDate: (time: any) = > {
        if(this.start_time){
          return time.getTime() <= +new Date(this.start_time) - 1000 * 60 * 60 * 24}}}}// The date and time picker does not need to process the end time separately. The end time of the date picker should be 23:59:59 of the day
 // Convert time to timestamp in s(back-end requirements)
  @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) {
    // The date and time picker does not need to process the end time separately. The end time of the date picker should be 23:59:59 of the day
    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
    }
  }
}
Copy the code

Working with component Examples

<DateTimePicker v-model="date" dateType="datetime"/>
// The parent component listens for date changes and organizes its own data structure
Copy the code