? ? ? ? 日期选择框（DatePicker）设置mode = "year"，弹出面板以年份显示，但是无法选择，也无法关闭面板。这是因为?<DatePicker mode="year" />?不等于?YearPicker，<RangePicker mode="month" />?不等于?MonthRangePicker。?mode?属性是在 antd 3.0 时，为了控制面板展现状态而添加的属性，以支持展示时间面板等需求而添加的。mode?只会简单的改变当前显示的面板，不会修改默认的交互行为（比如 DatePicker 依然是点击日才会完成选择并关闭面板）。
解决方案：利用?mode、openChange?和?panelChange?等方法去封装一个?YearPicker?组件
参考代码（可直接当组件使用）：
<template>
<a-date-picker
dropdownClassName="j-date-picker"
mode="year"
format="YYYY"
:placeholder="placeholder"
@change="handleDateChange"
v-model="yearVal"
:open="dateopen"
@openChange="openChangeYear"
@panelChange="panelChangeYear"
:disabled="disabled"
:getCalendarContainer="getCalendarContainer"
v-bind="$attrs"/>
</template>
<script>
import moment from 'moment'
export default {
name: "JYearPicker",
components:{
moment
},
props: {
placeholder: {
type: String,
default: '',
required: false
},
value: {
type: String,
required: false
},
disabled: {
type: Boolean,
required: false,
default: false
},
getCalendarContainer: {
type: Function,
default: (node) => node.parentNode
}
},
data() {
let dateStr = this.value;
return {
yearVal: !dateStr?null:moment(dateStr).format('YYYY'),
dateopen: false
}
},
watch: {
value (val) {
if(!val){
this.yearVal = null;
}else{
this.yearVal = moment(val).format('YYYY');
}
}
},
methods: {
moment,
handleDateChange(mom, dateStr) {
this.$emit('change', dateStr);
this.yearVal=null;
},
openChangeYear(status) {
if (status) {
this.dateopen = true;
} else {
this.dateopen = false;
}
},
// 选择年之后 关闭弹框
panelChangeYear(value) {
this.yearVal = value;
this.dateopen = false;
this.$emit('input', moment(value).format("YYYY"));
}
}
}
</script>
<style scoped>
</style>调用示例代码：
?
?
参考连接：关于antd 日期组件只选择年份，设置mode=year无法获取value的解决办法 - 一江西流 - 博客园
