头图

ant-design-vue中a-date-picker组件只选择年份

逆风微笑的代码狗

一、ant-design-vue中a-date-picker组件只选择年份

在ant-design日期选择器中只选择年份的日期选择器,但目前ant-design还没有只选择年份的日期控件
image.png

下面是组件代码:

在template中

<a-form-model-item label="开始年限:" prop="yaerMode" >
   <a-date-picker
    mode="year"
    placeholder="请选择年份"
    format="YYYY"
    v-model="yaerMode"
    style="width:100%"
    :allowClear="false"
    :open="yearShowOne"
    @openChange="openChangeOne"
    @panelChange="panelChangeOne"
  />
</a-form-model-item>

在data中

//年度计划的打开关闭状态,true为打开,false为关闭
yearShowOne:false,
//添加对话框的表单绑定
yaerMode:moment(new Date()).format('YYYY')    //开始年限,

在methods方法中,handleOpenChange回掉函数的参数是boolean值,当打开控件时为true,关闭时为false,但是控制控件的显示和隐藏需要的是open属性,所以让open属性跟随者这个回掉参数改变即可控制面板的显示和隐藏。
handlePanelChange方法可以获取到选择之后的值,在赋值给模型属性就可以使用了。不然会在时期选择之后再页面中不显示获取到的年份。

// 弹出日历和关闭日历的回调
openChangeOne(status){
    //status是打开或关闭的状态
    this.yearShowOne =  !this.yearShowOne
 },
// 得到年份选择器的值
panelChangeOne(value){
     this.yaerMode = value
     this.yearShowOne =  !this.yearShowOne
 },
阅读 278
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
文章目录
宣传栏