Ant Design封装年份选择组件的方法

常见问题

在平时的业务场景中，我们需要用到一个年份的选择组件。但是在antd2.x的版本中，antd的DatePicker组件还没有mode属性，不能单独设置为年份选择器。虽然antd3.x添加了mode属性，但是我在使用的过程中还是发现了一些问题，官网中也有提到相应解决方案，但是并没有完全解决我的问题，再次记录一下我的解决方案。

问题一

DatePicker组件设置成年份选择后，点击年份后onChange事件不会触发，value获取不到，面板也不会关闭，点击面板外的区域可以关闭面板但年份没选上，只有选择年份后敲回车键才能正确返回，如此设计估计要被用户……直接上代码

<template>
  <div class="yearPicker">
    <a-date-picker
      placeholder="请选择年份"
      format="YYYY"
      mode="year"
      @change="onChange"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
};
</script>

页面效果：

解决方法

仔细阅读官网文档，发现了DatePicker组件的openChange事件和panelChange事件，于是有了以下的解决方案

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

<script>
import moment from "moment";
export default {
  components: { moment },
  data() {
    return {
      open: false,
      year: moment()
    };
  },
  methods: {
    openChange(status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    panelChange(value){
      this.year = value;
      this.open = false;
    }
  }
};
</script>

如此解决了点击选取万年份后面板不能关闭的问题，但是随之而来的我又发现了新的问题，就是清除按钮不生效了！！！

那就只能重写清空事件或者设置allowClear属性为false了，还有就是DatePicker组件的的手动输入日期是不能用的，但是不知道为什么还要弄这东西，建议开发的时候把输入框隐藏掉。

隐藏后：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue移动端日期选择组件

    先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm install vue-mobile-calendar or:(from the dist folder) <script src=&quo

  • 解决antd日期选择组件,添加value就无法点击下一年和下一月问题

    原因: 表单监听了关闭事件,执行了setState,若是给closeFloatingLayer增加延时就可看出来antd数据的变化. 解决方法: DatePicker外面套一层div,然后阻止冒泡 补充知识:antd 的 RangePicker 中日期选择近三月 今天遇到一个问题,日期插件中只能选择近三个月.代码如下: 属性中 disabledDate 就是日期禁止选择. 1.当前天之前 2.当前天之后 3.近三月 4.后三月 以上这篇解决antd日期选择组件,添加value就无法点击下一年和下

  • Vue无限滑动周选择日期的组件的示例代码

    之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue.当时又没有找到合适的第三方插件,就花了点时间用原生JavaScript写了出来,当时心中就想把它写成基于Vue的组件,这短时间闲了把它弄出来了!,在这个过程中遇到了一个坑,后面会提出来! 先看效果  思路 根据用户传入日期(不传默认今天),获取上一周,当周,下一周对应的日期放数组dates里 let vm = this this.dates.push( { date: moment(vm.de

  • vue左右滑动选择日期组件封装的方法

    vue左右滑动选择日期组件封装的方法

    现在做的项目中遇到了左右滑动选择日期的一个功能,然后我封装了一下这个组件,现在分享给大家看一下: 效果图: 1.安装dayjs日期文件 npm install dayjs --save 2.封装的组件: <template>   <div class="m-calendar" ref="calendar">     <div class="m-toolbar">       <div class=&quo

  • 基于vue2.0+vuex的日期选择组件功能实现

    基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • vue.js实现仿原生ios时间选择组件实例代码

    vue.js实现仿原生ios时间选择组件实例代码

    前言 最近几个月一直在看VUE,然后试着只用原生js+vue实现某些组件. PC端时间选择组件 这是最开始实现的pc上的时间选择,平时移动端也在做,所以就想实现一下移动端的时间选择器,下面分享一下我实现移动端滚轮特效时间选择器的思路和过程.整个组件是基于vue-cli来进行构建的 功能 1.时间选择[ A.年月日选择 B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择] 2.滚轮效果[ A.构成一个圆环首尾相连 B.不构成首尾相连] 3.时间选择范围设置(所选时间超过范围将弹窗提示),分钟间

  • 基于Vue组件化的日期联动选择器功能的实现代码

    基于Vue组件化的日期联动选择器功能的实现代码

    我们的社区前端工程用的是element组件库,后台管理系统用的是iview,组件库都很棒,但是日期.时间选择器没有那种" 年份 - 月份 -天数 " 联动选择的组件.虽然两个组件库给出的相关组件也很棒,但是有时候确实不是太好用,不太明白为什么很多组件库都抛弃了日期联动选择.因此考虑自己动手做一个. 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象,如:Sun Sep 02 2018 00:00:00 GMT+08

  • Vue下拉选择框Select组件使用详解(二)

    Vue下拉选择框Select组件使用详解(二)

    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,默认宽度290 ②placeholder属性 ③是否禁用下拉的disabled属性 已预设下拉列表最多8条,超过时滚动显示,具体可自定义调整,如果下拉选项过长省略号显示,鼠标悬浮显示全称,由于业务需求,设置mode属性,区别默认name和value  与  dictKey和dictVal ①创建组件Select.vue <tem

  • Vue下拉选择框Select组件使用详解(一)

    Vue下拉选择框Select组件使用详解(一)

    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 展开图如下: ①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式: <template>   <div class="m-select-wrap">     <input       :class="['u-select-input f16', color === 'blue' ? '' : 'white-color'

  • vue-calendar-component 封装多日期选择组件的实例代码

    vue-calendar-component 封装多日期选择组件的实例代码

    实现效果 安装vue-calendar-component日历组件 cnpm i vue-calendar-component --save //国内镜像 引入 import Calendar from "vue-calendar-component"; export default { components: { Calendar }, } 封装 <template> <div class="x-f"> <Calendar ref=&

随机推荐