antd vue时间选择器(年选择器)

antd vue时间选择器(年选择器)

最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种方式来达到年份选择效果。
HTML:

	<div>
	  <a-date-picker
	    format="YYYY"
	    mode="year"
	    :value="year"
	    :open="open"
	    @openChange="openChange"
	    @panelChange="panelChange"
	  />
	</div>

JS:

<script>
import moment from "moment"
export default {
  components: { moment },
 	data() {
    return {
      open: false,
      year: moment(),
    };
  },
  	methods: {
	    moment,
	    //Ant Design封装年份选择组件
	    openChange(status) {
	      if (status) {
	        this.open = true;
	      } else {
	        this.open = false;
	      }
	    },
	    panelChange(value){
	      this.year = value;
	      this.open = false;
	    },
 	}
 }

看效果:
在这里插入图片描述

更新日志
目前官网更新的1.6.3版本中说已解决了这个问题,大家可以试试。

  • 13
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值