正在阅读：

Ant design Vue a-date-picker实现年份选择

vue-ant.png

当前版本：1.6.4 不支持直接选择年份的组件，官方也给出了相关的说明，可能在未来版本中加入该组件，同时，可以参考react中的组件修改方法
官方说明地址：

https://www.antdv.com/docs/vue/faq-cn/


代码实现：

当前需要对组件a-date-picker进行改造，如下：
html：
<a-date-picker
mode="year"
format="YYYY"
:value="state.time"
:open="state.isopen"
placeholder="请选择年份"
@focus="changeopen"
@panelChange="handlePanelChange1">
</a-date-picker>
JS：
handlePanelChange1(value, mode) {
this.mode1 = mode
console.log(value);
console.log(mode);
this.state.time = value
this.state.isopen = false
},
changeopen() {
this.state.isopen = true;
}

效果：

bbecb9da-d3db-4547-8dbe-71e211d5647d.png
主要通过 focus 实现该日期框的打开和关闭， 使用panelChange 获取当前选择的年份。
该日志由 bemender 于 2020年09月20日 发表

转载请注明文本地址：https://www.bemhome.com/post/7.html

qrcode