Ant Design中date-picker组件设置mode="month"或mode="year"后无法获取到value及关闭选择面板的解决方法

问题描述

使用 ant-design 组件，将 mode 设置为 month 或 year 后，无法获取到选择的时间，也无法自动关闭选择面板。

下面是代码片段：

<a-date-picker mode="month" v-model="month"></a-date-picker>

<a-date-picker mode="year" v-model="year"></a-date-picker>

对于 mode 属性，官方文档是这样介绍的：

下面是官方的解释

当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？ 在业务开发中，你可能有年份选择，月份范围选择，周范围选择等需求，此时你给现有组件增加了 mode 属性，却发现无法进行点击选择行为，面板也不会关闭。

这是因为 不等于 YearPicker， 不等于 MonthRangePicker。 mode 属性是在 antd 3.0 时，为了控制面板展现状态而添加的属性，以支持展示时间面板等需求而添加的。mode 只会简单的改变当前显示的面板，不会修改默认的交互行为（比如 DatePicker 依然是点击日才会完成选择并关闭面板）。

解决方案

1、通过 open 属性，手动管理日期选择面板的开启与关闭。 2、通过监听 openChange 获取日期选择组件的 value，代替原 change 回调。 3、在 panelChange 回调中处理一下日期选择面板的状态，同时获取一下最新的 value。

总之，要结合 open、openChange和panelChange，以实现预期的效果。

话不多说，上代码：

<a-date-picker
    mode="'year"
    v-model="year"
    :open="isDatePanelOpen"
    @openChange="onDatePanelOpenChange"
    @panelChange="onPanelChange"
/>

onDatePanelOpenChange(status) {
    this.isDatePanelOpen = status
},
onPanelChange(year) {
    this.year = year
    this.isDatePanelOpen = false
}

以上就是 Ant Design 中 date-picker 组件设置 mode="month" 或 mode="year" 后无法获取到 value 及关闭选择面板的解决方法。

本文地址：https://www.tides.cn/p_vue-ant-design-date-picker-mode-month-or-year