Vue element DateTimePicker date time selector secondary packaging

In the development of management system projects, using the elementUi library date time selector is the most common and most commonly used. If you need to use it, it is very troublesome to write one by one and it is not convenient to use. If it is packaged into a component, it is easy to manage. Just use this component and call it. can use.

Subcomponents:
type display type can be year/month/date/week/datetime/datetimerange/daterange
valueFormat format of bound value, generally the data format of parameters passed to the background
pickerOptions: shortcut key and configuration item
defaultTime: after the date is selected The default specific time data format is an array ['00:00:00', '23:59:59']

  <div>
     <el-date-picker
     @change="changeTimeValue"
      v-model="selectTimeDate"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      :default-time="defaultTime"
     >
    </el-date-picker>
<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    valueFormat: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }, 
    defaultTime: {
      type: Array,
      default: () => {
        return []
      }
    },
    vModel: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      selectTimeDate: []
    }
  },
  watch: {
    vModel(val) {
      this.selectTimeDate = val
    }
  },
  methods: {
    changeTimeValue(val) {
      this.$emit('changeTimeValue', val)
    }
  }
}
</script>

parent component:

 <data-picker 
      :type="'datetimerange'" 
      :valueFormat="'yyyy-MM-dd HH:mm:ss'" 
      :pickerOptions="pickerOptions" 
      :defaultTime="['00:00:00','23:59:59']"
      @changeTimeValue="changeTimeValue"
      :vModel="dateTimeRangeVal"
     ></data-picker>
<script>
import dataPicker from '@/components/dataPicker.vue'
export default {
  components: {
    dataPicker
  },
  data() {
    return {
     pickerOptions: {
        shortcuts: [{
        text: '今天',
        onClick(picker) {
            const end = new Date();
            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '昨天',
        onClick(picker) {
            const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
            const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
            picker.$emit('pick', [start, end]);
        }
        },{
        text: '最近一周',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近一个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近三个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
        }
        }]
     },
     dateTimeRangeVal: []
    }
  },
  methods: {
   // 子组件传过来的值 以下是对选着的值最大区间限制在6个月之内 不需要直接赋值就行
    changeTimeValue(val) {
      if(val) {
        let min = new Date(val[0])
        let max = new Date(val[1])
        let now = new Date()
        let min6 = new Date(Date.now() - (30 * 24 * 3600 * 1000)*6)
        let timeSection = new Date((max.valueOf() - (30 * 24 * 3600 * 1000)*6)).Format("yyyy-MM-dd hh:mm:ss.S")
        let cha = (max.getFullYear() - min.getFullYear() > 0) ? (max.getMonth() + (max.getFullYear() - min.getFullYear()) * 12) : (max.getMonth() - min.getMonth())
        if(max>now && min > min6) {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else if(max > now && min < min6) {
            this.dateTimeRangeVal = [min6.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        }else if(cha > 6 && max<now) {
            this.dateTimeRangeVal = [timeSection, max.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), max.Format("yyyy-MM-dd hh:mm:ss.S")]
        }
      }
    }
  }
}
</script>