AntD-3.x-YearPicker #

/**
 * Custom yearPicker for antd 3.x datePicker does not have picker option
 */

import React, { FC, forwardRef, useState } from 'react'
import { DatePicker } from 'antd'

interface IYearPicker {
  placeholder: string
  format?: string
  size?: 'large' | 'small' | 'default'
  value?: any
  onChange?: (value) => void
}

const YearPicker: FC<IYearPicker> = (
  { placeholder, format, size, value, onChange = () => {} },
  ref
) => {
  const [isOpen, setIsOpen] = useState(false)
  const handlePanelChange = (time) => {
    onChange(time)
    setIsOpen(false)
  }
  const handleOpenChange = (status) => {
    setIsOpen(status)
  }
  const clearValue = () => {
    onChange(null)
  }

  return (
    <DatePicker
      ref={ref}
      placeholder={placeholder}
      format={format}
      {...(size && { size })}
      {...(value && { value })}
      open={isOpen}
      mode="year"
      onOpenChange={handleOpenChange}
      onPanelChange={handlePanelChange}
      onChange={clearValue}
    />
  )
}

export default forwardRef(YearPicker)

/**
 * Custom yearPicker for antd 3.x datePicker does not have picker option
 */

import React, { FC, forwardRef, useState } from 'react'
import { DatePicker } from 'antd'

interface IYearPicker {
  placeholder: string
  format?: string
  size?: 'large' | 'small' | 'default'
  value?: any
  onChange?: (value) => void
}

const YearPicker: FC<IYearPicker> = (
  { placeholder, format, size, value, onChange = () => {} },
  ref
) => {
  const [isOpen, setIsOpen] = useState(false)
  const handlePanelChange = (time) => {
    onChange(time)
    setIsOpen(false)
  }
  const handleOpenChange = (status) => {
    setIsOpen(status)
  }
  const clearValue = () => {
    onChange(null)
  }

  return (
    <DatePicker
      ref={ref}
      placeholder={placeholder}
      format={format}
      {...(size && { size })}
      {...(value && { value })}
      open={isOpen}
      mode="year"
      onOpenChange={handleOpenChange}
      onPanelChange={handlePanelChange}
      onChange={clearValue}
    />
  )
}

export default forwardRef(YearPicker)