年份范围选择器

实现效果

年份范围选择器组件

  由于element官方的DatePicker日期选择器的type没有yearrange

<template>
  <div class="picker-year">
    <el-form :inline="true" ref="year-range-picker" :model="formData" :rules="rules">
      <el-form-item prop="yearStart">
        <el-date-picker
          v-model="formData.yearStart"
          value-format="yyyy"
          format="yyyy 年"
          @change="onDateChange"
          :picker-options="pickerOptionsStart"
          :placeholder="startPlaceholder"
          type="year">
        </el-date-picker>
      </el-form-item>
      <span class="range-word">-</span>
      <el-form-item prop="yearEnd">
        <el-date-picker
          v-model="formData.yearEnd"
          value-format="yyyy"
          format="yyyy 年"
          @change="onDateChange"
          :picker-options="pickerOptionsEnd"
          :placeholder="endPlaceholder"
          type="year">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "YearRangePicker",
  data() {
    return {
      formData: {
        yearStart: '',
        yearEnd: '',
      },
      rules: {
        yearStart: [
          {required: true, message: '请选择开始年份', trigger: 'change'}
        ],
        yearEnd: [
          {required: true, message: '请选择结束年份', trigger: 'change'}
        ],
      },
      pickerOptionsStart: {
        disabledDate: (date) => {
          if(this.formData.yearEnd) {
            return Date.parse(date) > new Date().setFullYear(this.formData.yearEnd) || Date.parse(date) > new Date().getTime()
          } else {
            return Date.parse(date) > new Date().getTime()
          }
          
        },
      },
      pickerOptionsEnd: {
        disabledDate: (date) => {
          return Date.parse(date) <= new Date().setFullYear(this.formData.yearStart) || Date.parse(date) > new Date().getTime()
        },
      }
    }
  },
  props: {
    value: {
      type: Array,
      default: []
    },
    startPlaceholder: {
      type: String,
      default: '开始年份'
    },
    endPlaceholder: {
      type: String,
      default: '结束年份'
    }
  },
  mounted() {
    if (this.value && this.value.length>1) {
      this.formData.yearStart = String(this.value[0]);
      this.formData.yearEnd = String(this.value[1]);
    }
  },
  methods: {
    onDateChange(value) {
      if (!value) {
        this.formData = {
          yearStart: '',
          yearEnd: ''
        }
      }
      this.$refs["year-range-picker"].validate((valid) => {
        if (valid) {
          this.$emit('change', [Number(this.formData.yearStart), Number(this.formData.yearEnd)])
          this.$emit('input', [Number(this.formData.yearStart), Number(this.formData.yearEnd)])
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>

<style scoped>
.picker-year {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.range-word {
  margin-right: 10px;
}
</style>

引用

import YearRangePicker from './YearRangePicker.vue'

components: {
	YearRangePicker,
},

data() {
	return {
		yearRange: [2021, 2022],
	}
)

<year-range-picker
	v-model="yearRange"
	>
</year-range-picker>