AntDesign年度日期选择框

项目中我们各种日期选择都会用到,这里介绍项目中使用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框架的组件进行二次封装,这也是一个对当下最好的方式。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀猪刀-墨林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值