ant design vue 日期选择器只选择年份


 

https://antdv.com/docs/vue/introduce-cn/

 

1
2
3
4
5
6
7
8
9
10
11
12
13
< a-form-model  :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
             < a-form-model-item  label="年度/季度" >
                 < a-date-picker
                 mode="year"
                 placeholder="请选择年份"
                 format='YYYY'
                 v-model="form.yearQuarter" 
                 style="width:100%"
                 :open='yearShowOne' 
                 @openChange="openChangeOne"
                 @panelChange="panelChangeOne"/>
             </ a-form-model-item >
</ a-form-model >

  

年度打开关闭状态,true为打开,false为关闭

yearShowOnefalse

 

1
2
3
4
5
6
7
8
9
10
11
12
13
methods: {
      // 弹出日历和关闭日历的回调
       openChangeOne(status) {
             if  (status){
                 this .yearShowOne =   true
             }
         },
      // 得到年份选择器的值
      panelChangeOne(value) {
             this .form.yearQuarter = value;
             this .yearShowOne =  false ;
         }
}

     <a-date-picker
                  mode="year"
                  placeholder="请选择年份"
                  format='YYYY'
                  v-model="searchForm.year"
                  style="width:100%"
                  :open='yearShowOne'
                  @openChange="openChangeOne"
                  @panelChange="panelChangeOne"/>
                  
                  yearShowOne: false,
                  
                  
                  openChangeOne(status) {
      if (status){
        this.yearShowOne =  true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      let aa = value.toString();
      this.searchForm.year= aa.substring(11,15);
      this.yearShowOne = false;
    }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM