在开发中需要使用到年份的选择器，由于项目使用的是 Antd3.0 版本，在查看文档后发现并没有可以直接使用的组件，并且在项目的多个地方需要使用到，就打算基于 DatePicker 写一个 YearPicker 组件。

首先在 DatePicker 组件中有一个 mode 属性

该属性控制面板的状态，我们选择使用 year 来让面板显示年份。

只有这个属性是远远不够的，如果要实现选择年份的功能，我们还需要手动控制选择器的弹窗显示，选中后的回调等等。

那么就要用到这两个属性

onOpenChange 的使用就很简单了

  const [isopen, setIsOpen] = useState<boolean>(false);
  const handleOpenChange = (status: boolean) => {
    setIsOpen(status)
定义一个 isopen 来控制年份选择面板显示和隐藏，当触发 handleOpenChange 方法，直接将 status 赋值给 isopen 即可。
 
而 handlePanelChange 方法就是我们用来拿到选择年份并处理的方法了，
 
  // 拿到 value 并进行处理,给 YearPicker 组件赋值
  const handlePanelChange = (value: any) => {
    setIsOpen(false);
    // value 可能是父组件传来的值，也可能是操作组件选择的年份值，需要变为 moment 对象再给组件赋值
    const momentYear = moment(value, 'YYYY');
    // 返回给父组件的值为格式化的值
    const yearFormat = moment(momentYear).format('YYYY');
    // 组件只接受 moment 对象的值
    setYear(momentYear);
    handleChange(Number(yearFormat));
首先该方法拿到的参数可能是我们选择年份面板取到的值，也可能是我们在父组件中需要进行初始化而传来的值，由于组件的 value 只接受 moment 对象的值，所以在赋值之前，先用 moment 转换一下。
 
这里需要注意的是，第二个参数指定转换的格式，我们需要将年份转换成 moment 对象，所以是 'YYYY'
 
然后我们拿到值后进行两个操作，一个是给组件赋值，一个是将年份传给父组件进行使用，这里的 handleChange 方法是通过父组件传过来的取到值后进行的操作。
 
到这里一个简单的 YearPicker 组件差不多就写好了，我们还可以在对其进行稍微加工。
 
首先，该组件如果使用在搜索表单中，那他可能会需要一个清除的功能，这里我们使用 onChange 方法搭配 allowClear 属性。
 
当点击清除触发 onChange 方法，直接将组件和父组件的值重新设置。
 
  const handleChanges = (date: any) => {
    setYear(date);
    handleChange(date);
 最后将 handleChanges、handlePanelChange 方法抛出给父组件，这里使用 useImperativeHandle + forwardRef 方法。
 
  useImperativeHandle(ref, () => ({
    handleChanges,
    handlePanelChange,
function YearPicker({ handleChange, allowClear = true }: IProps, ref: any) {
  const [year, setYear] = useState<Moment>();
  const [isopen, setIsOpen] = useState<boolean>(false);
  const handleOpenChange = (status: boolean) => {
    setIsOpen(status)
  // 拿到 value 并进行处理,给 YearPicker 组件赋值
  const handlePanelChange = (value: any) => {
    setIsOpen(false);
    // value 可能是父组件传来的值，也可能是操作组件选择的年份值，需要变为 moment 对象再给组件赋值
    const momentYear = moment(value, 'YYYY');
    // 返回给父组件的值为格式化的值
    const yearFormat = moment(momentYear).format('YYYY');
    // 组件只接受 moment 对象的值
    setYear(momentYear);
    handleChange(Number(yearFormat));
  const handleChanges = (date: any) => {
    setYear(date);
    handleChange(date);
  // 传递给父组件 change 方法
  useImperativeHandle(ref, () => ({
    handleChanges,
    handlePanelChange,
  return (
    <DatePicker
      mode="year"
      placeholder="请选择年份"
      open={isopen}
      format="YYYY"
      value={year}
      onOpenChange={handleOpenChange}
      onPanelChange={handlePanelChange}
      onChange={handleChanges}
      style={{ width: '100%' }}
      allowClear={allowClear}
export default forwardRef(YearPicker);
 
 用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份。
在 html 页面上放置一个带有 id 或 css 类的文本框。 在指定的 id 或类名上调用yearpicker jquery 方法。 Yearpicker 准备好了。 例子$("#txtDate").yearpicker({ 更改年份：true });
changeYear ：如果值为 true，则它将显示一个下拉列表以选择年份。 否则，您可以使用左/右箭头更改年份。 minDate/maxDate ：限制用户从特定范围中选择年份（与 jquery 日期选择器相同）。 dateFormat : 要在 minDate/maxDate 属性中指定的日期格式。
import React from 'react';
import moment from 'moment';
class DateDemo extends React.Component{
 disabledDate = (current) => {
  return current < moment> moment().add(6, 'day') ;
 datePickerChange = (date) => {
  console.log(date,'date即为DatePicker选中的时间');
import React, { Component } from 'react';
import './yearpanel.less'
import YearPanel from 'rc-calendar/lib/year/YearPanel'
import gregorianCalendar from 'gregorian-calendar'
import ReactMixin from 'react-mixin';
import PickerMi
				
1、选中年度，开始时间与结束时间只能在当前选中的年度里选择，如选中2021，则开始和结束日期的选择框中只能在2021选择，其它年度禁选
<a-row :gutter="5">
<a-col :span="24">
    <a-form-item label="年度：">
      <a-date-picker
        :allowClear='false'
        mode="year" 
        placeholder="请选
import { DatePicker } from 'antd'
const [dates, setDates] = useStaten<[Moment, Moment] | null>(null)
<DatePicker.RangePicker
    onCalendarChange={val => setDates(val)}
    disabledDate={disabledDate}
				
虽然在antd的4X版本以后支持了年份和季度的时间选择器，但是项目中版本升级可能遇到很多不兼容的地方，而且没有时间去更改，所有需要对第版本的组建进行更改
import React, { Component } from 'react';
import { DatePicker,Form, Button } from 'antd';
const FormItem = Form.Item
class ...
				
antd vue时间选择器（年选择器）
最近项目中用到了antd vue，项目中的版本是1.5.2版本，在做日期选择器时发现只有日，周，月份选择器，独独缺少年份选择器，如果你的项目也是怕升级对整体影响太多，不妨试试下面这种方式来达到年份选择效果。
HTML:
	  <a-date-picker
	    format="YYYY"
	    mode="year"
	    :value="year"
	    :open="open"
	    @openChange="o
				
需求：年份选择器，当前年之后的数据置灰不可选择
思路：通过操作dom获取每一个年份数据，和当前年数据对比，不符合要求的给其加上样式datepicker-year-disabled
实现效果：在这里插入代码片
在template中
<a-date-picker
     v-model="queryParam.yearValue"
     mode="year"
     format="YYYY"
     :open="yearShow"
     @openChange="openChange
				
1、前情提要
当初还是antd2.X版本时，DatePicker组件还不支持mode属性，不能单独设置为年份选择器。但是公司项目刚好很多地方都有根据年份做筛选的需求，因为antd不支持，因此，使用了Select组件来实现年份选择。
但是，遭到了客户的强烈吐槽，“你们这个UI风格还是要一致撒”，哈哈????，官方吐槽最为致命！没办法了，我自己也没法说服自己了，只能照着antd的UI风格自己撸一个YearPicker咯。（时间选择控件YearPicker基于React，antdwww.cnblogs.com
				
工作中需要用到单独是年的时间选择器,发现vant中唯独没有年的,所以自己写了一个,也不难,就是弹出层和选择器组合,为方便后续用,所以记录.
如果是按需引入,需要引入Popup 弹出层和Picker 选择器
<template>
    <div class="navigate between_center">
      <div class="timeSelect">
        <div class="datetimePick.
DatePicker[picker=“week”]
DatePicker[picker=“year”]
DatePicker[picker=“quarter”] (4.1.0 新增)
RangePicker
国际化配置
import