侧边栏壁纸
  • 累计撰写 12 篇文章
  • 累计创建 14 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

Antd vue版本中DatePicker如何实现年选择框

马化云
2022-04-08 / 0 评论 / 0 点赞 / 869 阅读 / 638 字
温馨提示:
本文最后更新于 2022-04-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

antd vue版本中DatePicker不支持年选择框,需要对DatePicker添加事件来实现年选择
Antdv官网DatePicker文档

前端部分

<a-date-picker
mode="year"
placeholder="请选择年份"
format="YYYY"
v-model="year"
style="width: 100%"
:open="yearShowOne"
@openChange="openChangeOne"
@panelChange="panelChangeOne"/>

事件

  // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    }
    // 得到年份选择器的值
    panelChangeOne(value, model) {
      this.planentity.year = value
      this.yearShowOne = false
      this.$forceUpdate()
      this.$refs.form.clearValidate('year')    
    }

提示

注意:正常情况下年选择都是配合Form表单使用得,如果正好需要检验年选择框是否必填就需要注意了。如果不添加clearValidate清除该输入项得必填校验会发现校验不通过。

博主关闭了所有页面的评论