csjoz11

导航

统计

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

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:
 
JavaScript
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 获取当前选择的年份。

posted on   csjoz11  阅读(2276)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
点击右上角即可分享
微信分享提示