Jeecg-boot年份选择组件

最新推荐文章于 2024-01-30 16:02:53 发布

会握爪的小金毛

最新推荐文章于 2024-01-30 16:02:53 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/sdnu08gis/article/details/124662172

版权

Jeecg-boot 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

博客解决了在Ant Design中使用DatePicker设置mode='year'无法选择和关闭面板的问题。文章提供了一个自定义的JYearPicker组件，通过监听mode、openChange和panelChange事件来实现年份选择并自动关闭面板的功能。示例代码展示了组件的实现和调用方式，帮助开发者在项目中正确实现仅选择年份的日期选择框。

摘要由CSDN通过智能技术生成

日期选择框（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>

调用示例代码：