美文网首页
ant design vue 日期选择器只选择年份

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

作者: SY | 来源:发表于2021-11-15 15:12 被阅读0次
    image.png
    <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为关闭

    yearShowOne: false

    methods: {
         // 弹出日历和关闭日历的回调
          openChangeOne(status) {
                if (status){
                    this.yearShowOne =  true
                }
            },
         // 得到年份选择器的值
         panelChangeOne(value) {
                this.form.yearQuarter = value;
                this.yearShowOne = false;
            }
    }
    

    相关文章

      网友评论

          本文标题:ant design vue 日期选择器只选择年份

          本文链接:https://www.haomeiwen.com/subject/yatqtrtx.html