项目中我们各种日期选择都会用到,这里介绍项目中使用Antdesign-vue框架的日期选择框遇到的问题
官方示例控件中没有年度选择的示例,这里总结了网上的网友提到的一些api,做出来的效果,发下效果图
官方文档提供了一个mode属性控制时间类型,但是mode设置为YYYY后,你会发现面板无法操作,官方对此也做了介绍
原因这里也说明了,然后说说我的实现过程
<a-form-item label="年度:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
<a-date-picker v-decorator="['year', {
rules: [{ type: 'object', required: true, message: '请选择年度时间!!' }],
}]"
:open="isopen"
placeholder="请选择年度"
mode="year"
format="YYYY"
@openChange="openmodel"
@panelChange="updateTime"
@change="clearTime"
/>
</a-form-item>
这里用到了一个变量isopen控制面板开关,三个事件函数openmodel、updateTime、clearTime,分别是面板开关函数,以及面板日期更改函数,清除日期时间函数
// 打开时间面板
openmodel(status) {
if (status) {
this.isopen = true;
} else {
this.isopen = false;
}
},
// 更改时间面板
updateTime(val) {
this.form.setFieldsValue({
"year": val
})
this.isopen = false;
},
// 清除时间
clearTime() {
this.form.setFieldsValue({
"year": null
})
},
,当然官方也说了,计划在antdesign-vue@2.0中加入示例组件,如果你等不及的话,可以在自己的项目中对antdesign框架的组件进行二次封装,这也是一个对当下最好的方式。