YearPickerInput

Year picker input with dropdown. Select single year, multiple years, or a years range from a dropdown.

Import


import { YearPickerInput } from '@tidbcloud/uikit'

Basic Usage


import { useState } from 'react'
import { YearPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState<Date | null>(null)
  return <YearPickerInput label="Pick year" placeholder="Pick year" value={value} onChange={setValue} />
}

Multiple Years

Set type="multiple" to allow selecting multiple years:


import { useState } from 'react'
import { YearPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState<Date[]>([])
  return (
    <YearPickerInput type="multiple" label="Pick years" placeholder="Pick years" value={value} onChange={setValue} />
  )
}

Years Range

Set type="range" to pick a range of years:


import { useState } from 'react'
import { YearPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null])
  return (
    <YearPickerInput
      type="range"
      label="Pick years range"
      placeholder="Pick years range"
      value={value}
      onChange={setValue}
    />
  )
}

Custom Value Format

Use valueFormat prop to customize display format:


import { YearPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <YearPickerInput valueFormat="YY" type="multiple" label="Pick year" placeholder="Pick year" />
}

Change dropdown to modal with dropdownType="modal":


import { YearPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <YearPickerInput dropdownType="modal" label="Pick year" placeholder="Pick year" />
}

Key Props

Prop	Type	Description
value	DateValue	Selected year value (controlled)
onChange	(value: DateValue) => void	Called when value changes
type	’default’ \| ‘multiple’ \| ‘range’	Picker type
label	ReactNode	Input label
placeholder	string	Input placeholder
clearable	boolean	Show clear button when has value
dropdownType	’popover’ \| ‘modal’	Dropdown type
valueFormat	string	dayjs format for displayed value
minDate	string \| Date	Minimum selectable date
maxDate	string \| Date	Maximum selectable date
disabled	boolean	Disable the input
error	ReactNode	Error message