"ant-design-vue": "^1.78"

a-date-picker实现年份选择器

  <a-form-model-item
    class="set-position"
    :class="showValidate? 'validate-input' : ''"
    :labelCol="labelColHalf"
    :wrapperCol="wrapperColHalf"
    placeholder="请选择"
    prop="hjYear"
  >
    <template slot="label">
      <span style="color: #fa000c;margin: 0 5px 0 0;">*</span>
      <span>获奖年份</span>
    </template>
    <a-date-picker
      :mode="'year'"
      :picker="'year'"
      :open="yearShowOne"
      v-model="model.hjYear"
      format="YYYY"
      placeholder="请输入"
      @openChange="openChangeOne"
      @panelChange="panelChangeOne"
      @change="handleDateChange"
      style="width: 100%;"
    ></a-date-picker>
    <div v-if="showValidate" class="validate-mess">请输入获奖年份</div>
  </a-form-model-item>
    
// js
data() {
	return {
	   yearShowOne: false, // 年份选择器的显示
       showValidate: false // 单独校验
	}
},
methods: {
        // 弹出日历和关闭日历的回调
        openChangeOne(status) {
            if (status) {
                this.yearShowOne = true
            }
        },
        // 得到年份选择器的值
        panelChangeOne(value) {
            this.yearShowOne = false
            this.$set(this.model, 'hjYear', value)
            this.showValidate = false
        },
        handleDateChange(value, Str) {
            // console.log(value, Str)
            if (Str == '') {
                this.showValidate = true
            }
        }
}

<style lang="less">
.validate-mess {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    position: absolute;
    top: 27px;
    left: 2px;
    color: #f5222d;
    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.validate-input {
    .ant-input {
        border-color: #f5222d;
    }
}
</style>

a-range-picker实现年份范围选择器

  <a-form-item label="获奖年份">
    <a-range-picker
      v-model="queryParam.hjYear"
      :mode="['year', 'year']"
      :picker="['year', 'year']"
      :open="yearShowOne"
      format="YYYY"
      :placeholder="['开始时间', '结束时间']"
      @change="handleDateChange"
      @openChange="openChange"
      @panelChange="handlePanelChange"
    >
      <template slot="renderExtraFooter" slot-scope="mode">
        <a-button type="primary" @click="handelDateOk">确定</a-button>
      </template>
    </a-range-picker>
  </a-form-item>
  
  //js
  data() {
  	queryParam: {},
  	yearShowOne: false,
  },
  methods:{
        handlePanelChange(value) {
            this.queryParam.hjYear = value
            this.queryParam.hjYear_begin = moment(value[0]).format('YYYY')
            this.queryParam.hjYear_end = moment(value[1]).format('YYYY')
        },
        openChange(status) {
            this.yearShowOne = status
        },
        handelDateOk() {
            this.yearShowOne = false
        },
        handleDateChange(value, str) {
            console.log(value, str, '日期改变')
            if (value.length == 0) {
                this.queryParam.hjYear_begin = ''
                this.queryParam.hjYear_end = ''
            }
        },
}

查询时把 hjYear 删掉，传范围