Element UI日期选择器二次封装

Element UI日期选择器二次封装

针对element ui组件日期选择器进行二次封装，实现点击年月日可以自由切换日期范围。

<template>
  <div class="time-box">
    <el-radio-group
      v-model="radio"
      size="small"
      style="margin-right: 10px"
      @change="onChange"
    >
      <el-radio-button label="year">年</el-radio-button>
      <el-radio-button label="month">月</el-radio-button>
      <el-radio-button label="day">日</el-radio-button>
    </el-radio-group>

    <div v-if="radio == 'year'" style="margin-right: 10px">
      <el-date-picker
        v-model="startYear"
        style="width:130px"
        type="year"
        value-format="yyyy"
        placeholder="选择开始年">
      </el-date-picker>
      <span style="margin: 10px">至</span>
      <el-date-picker
        style="width:130px"
        v-model="endYear"
        type="year"
        value-format="yyyy"
        placeholder="选择结束年">
      </el-date-picker>
    </div>

    <el-date-picker
      v-else
      v-model="value"
      :type="pickerType"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="radio == 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
      style="margin-right: 10px"
      :picker-options="pickerBeginOption"
    ></el-date-picker>

    <el-button icon="el-icon-search" type="primary" @click="search">
      搜索
    </el-button>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: [
    'label',
    'num',
    'numColor',
    'numUnit',
    'num2',
    'num2Color',
    'num2Unit',
    'icon',
    'pickerBeginOption',
  ],
  data: function () {
    return {
      radio: 'day',
      value: [],
      pickerType: 'daterange',
      startYear:moment().add(-1, 'year').format('YYYY'),
      endYear:moment().format('YYYY'),
    }
  },
  mounted() {
    let start = moment().add(-6, 'day').format('YYYY-MM-DD')
    let end = moment().format('YYYY-MM-DD')
    this.value = [start, end]

    let params = {
      dateType: this.radio,
      startDate: start,
      endDate: end,
    }
    this.$emit('onMounted', params)
  },
  methods: {
    onChange(value) {
      if (value == 'day') {
        let start = moment().add(-6, 'day').format('YYYY-MM-DD')
        let end = moment().format('YYYY-MM-DD')
        this.value = [start, end]
        this.pickerType = 'daterange'
      } else if (value == 'month') {
        let start = moment().add(-1, 'month').format('YYYY-MM')
        let end = moment().format('YYYY-MM')
        this.value = [start, end]
        this.pickerType = 'monthrange'
      } else if(value == 'year') {
        let start = moment().add(-1, 'year').format('YYYY')
        let end = moment().format('YYYY')
        this.startYear = start
        this.endYear = end
      }
    },
    search() {
      let start, end
      let values = []

      if(this.radio == 'year') {
          if(!this.startYear || !this.endYear) {
            this.$message.error('请选择时间')
            return
          }
          if(parseInt(this.startYear) > parseInt(this.endYear)){
            this.$message.error('开始年不能大于结束年')
            return
          }
      } else if(!this.value) {
        this.$message.error('请选择时间')
        return
      }

      if(this.radio == 'year') {
        values = [`${this.startYear}-01-01`, `${this.endYear}-12-31`]
      } else {
        values = this.value
      }
      if (values && values.length > 1) {
        if (this.radio == 'month') {
          start = values[0] + '-01'
          end =
            values[1] + '-' + moment(values[1], 'YYYY-MM').daysInMonth()
        } else {
          start = values[0]
          end = values[1]
        }

        let params = {
          dateType: this.radio,
          startDate: start,
          endDate: end,
        }
        this.$emit('onSearch', params)
      }

    },
  },
}
</script>
<style lang="less" scoped>
.time-box {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
  /deep/ .el-range-separator {
    margin-right: 5px;
  }
}
</style>