使用a-date-picker 年份(year)时间组件踩坑记录

遇到的问题：

使用ant design vue组件库，a-date-picker标签写年份选择输入框

1. 无法获取选中的值
2. 日期下拉面板的显示与收起控制
3. 使用allowClear属性时，点击右侧清空表单 ‘ X ’ ，无法清空输入框

演示实例

序——使用软件及框架版本

1. vue 2.6.11
2. ant-design-vue 1.7.1
3. moment.js（日期转换依赖）

设计思路

根据官方提供的文档，了解到其中有3个事件属性：change,panelChange,openChange，3个事件属性分别对应：value改变的回调，面板切换的回调（选中值或者月份等切换月份都会触发），面板显示与收起的回调。

具体代码过程

1. template模板区域

<template>
  <div style="margin: 50px 50px">
    <a-date-picker
      format="YYYY年"
      mode="year"
      :value="createValue"
      placeholder="选择年份"
      :open="isopen"
      @change="onChange"
      @openChange="openChange"
      @panelChange="panelChange"
    >
    </a-date-picker>
  </div>
</template>

2. js区域

<script>
import moment from 'moment'

export default {
  name: 'aYearPicker',
  components: {},
  data () {
    return {
      isopen: false,
      createValue: null,
      Year: null
    }
  },
  methods: {
    moment,
    // 使用change事件来清除输入框中的值
    onChange () {
      this.createValue = null
      this.Year = null
    },
    // 使用openChange事件控制日期下拉面板显示与收起
    openChange (isopen) {
      if (isopen) {
        this.isopen = true
      } else {
        this.isopen = false
      }
    },
    // 使用panelChange事件控制选中年份的方法
    panelChange (value) {
      // 接收panelChange返回的值
      this.createValue = value
      // 用monent格式化时间为年，格式化为4位字符串，如果有需要传递数据时为字符串可以这样单独格式化为一份数据
      this.Year = moment(value).format('YYYY')
      this.isopen = false
    }
  }
}
</script>

Find me

Gitee：gitee.com/heyhaiyon/a…

微信公众号：heyhaiyang

掘金：heyhaiyang

博客园：heyhaiyang

头条号：heyhaiyang