zoukankan      html  css  js  c++  java
  • 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="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="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;
        }

  • 相关阅读:
    记一次动态依赖包版本过高解决过程
    Centos8更改国内源阿里云
    记一次vs2019安装GDB实现Cmake远程linux调试
    Tu te prends pour qui?
    中国高等教育是个啥:官僚主义的垄断黑洞
    关闭ThinkPad HDD APS Logging Service
    python Tlinter按钮接收多个参数
    第一章
    IE7的一个边界BUG
    让LumaQQ.NET支持接收群自定义表情和贴图
  • 原文地址:https://www.cnblogs.com/csjoz/p/15392404.html
Copyright © 2011-2022 走看看