Date component of secondary encapsulation element

Time:2021-10-12

 

 https://blog.csdn.net/weixin_42565137/article/details/90482500

 

Time and date component of secondary encapsulation elment UI

import utils from '../utils/utils'

export default {
  data() {
    return {
      timeValue: [],
      tiemType: 'datetimerange',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
      //Shortcut options
      pickerOptions: {
        shortcuts: [{
          Text: 'last week',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          },
        }, {
          Text: 'last month',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          },
        }, {
          Text: 'last three months',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          },
        }],
      },
    }
  },
  props: {
    //Can I clear it
    clearable: {
      type: Boolean,
    },
    //Show default time
    showDefaultTime: {
      tyep: Boolean,
    },
    //Default time
    defaultTime: {
      type: Array,
    },
    //Time control type
    type: {
      type: String,
    },
  },
  mounted() {
    this.tiemType = this.type || this.tiemType
    if (this.type === 'daterange') {
      // this.valueFormat = 'yyyy-MM-dd'
    }
    console.log(this.$store.state.hour)
    console.log(this.$store.state.minute)
    this.setDefaultTime()
  },
  methods: {
    //Change time
    changeTimeValue(val) {
      if (this.type === 'daterange') {
        val[1] = val[1].replace('00:00:00', '23:59:59')
      }
      this.$emit('timeVal', val || [])
    },

    //Set default time
    setDefaultTime() {
      const { hour, minute } = this.$store.state
      if (this.showDefaultTime === false) {
        this.$emit('timeVal', [])
        this.timeValue = []
      } else if (this.type === 'daterange') {
        const startTime = new Date(new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000)
        const endTime = new Date(new Date().setHours(23, 59, 59, 0))
        const startTimeStr = utils.formatDateTime(startTime)
        const endTimeStr = utils.formatDateTime(endTime)
        if (this.defaultTime) {
          this.timeValue = this.defaultTime
          this.$emit('timeVal', [
            utils.formatDateTime(this.defaultTime[0]),
            utils.formatDateTime(this.defaultTime[1]),
          ])
        } else {
          this.timeValue = [startTimeStr, endTimeStr]
          this.$emit('timeVal', [startTimeStr, endTimeStr])
        }
      } else {
        const startTime = new Date(new Date().setHours(hour, minute, 0, 0) - 24 * 3600 * 1000)
        const endTime = new Date(new Date().setHours(hour, minute, 0, 0))
        const startTimeStr = utils.formatDateTime(startTime)
        const endTimeStr = utils.formatDateTime(endTime)
        if (this.defaultTime) {
          this.timeValue = this.defaultTime
          this.$emit('timeVal', [
            utils.formatDateTime(this.defaultTime[0]),
            utils.formatDateTime(this.defaultTime[1]),
          ])
        } else {
          this.timeValue = [startTimeStr, endTimeStr]
          this.$emit('timeVal', [startTimeStr, endTimeStr])
        }
      }
    },

  },
}



  .el-picker-panel__footer {
    button:nth-child(1) {
      display: none;
    }
  }

 

In fact, the parent component can directly call the child component to set the default time method to refresh the data

reset() {
      this.$refs.datePicker.setDefaultTime()
      // this.formData2.time = [];
      // this.$set(this.formData2, 'time', [`${this.startTime}`, `${this.endTime}`]);
      // console.log(this.formData2.time);
      // [this.searchParams.beginTimeStr, this.searchParams.endTimeStr] = this.formData2.time
    },
    //Get time
    getTimeVal(e) {
      // console.log(e);
      [this.searchParams.beginTimeStr, this.searchParams.endTimeStr] = e
      // if (this.timeStatus === 'first') {
      //   this.startTime = this.searchParams.beginTimeStr
      //   this.endTime = this.searchParams.endTimeStr
      //   this.timeStatus = 'second'
      // }
    },

 

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]