Jeecg-boot年份选择组件

        日期选择框（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的解决办法 - 一江西流 - 博客园