Skip to Content
DocsCloud UI PrimitiveMonthPickerInput

MonthPickerInput

Month, multiple months, and months range picker input with dropdown.

Import

import { MonthPickerInput } from '@tidbcloud/uikit'

Basic Usage

import { MonthPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <MonthPickerInput label="Pick month" placeholder="Pick month" />
}

Multiple Dates

import { MonthPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <MonthPickerInput type="multiple" label="Pick months" placeholder="Pick months" />
}

Date Range

import { MonthPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <MonthPickerInput type="range" label="Pick month range" placeholder="Pick month range" />
}

Value Format

Customize the display format using valueFormat (dayjs format).

import { MonthPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <MonthPickerInput valueFormat="YYYY MMM" type="multiple" label="Pick month" placeholder="Pick month" />
}

Clearable

import { MonthPickerInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <MonthPickerInput label="Pick month" placeholder="Pick month" clearable />
}

Open in Modal

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

Key Props

PropTypeDescription
valueDateValue | DateValue[] | DatesRangeValueSelected value
onChange(value) => voidCalled when value changes
type'default' | 'multiple' | 'range'Picker type
valueFormatstringdayjs format for display value
clearablebooleanShow clear button
dropdownType'popover' | 'modal'Dropdown type
minDatestring | DateMinimum selectable date
maxDatestring | DateMaximum selectable date
labelReactNodeInput label
placeholderstringInput placeholder
disabledbooleanDisable input
sizeMantineSizeComponent size
localestringdayjs locale
Last updated on
MonthPickerMultiSelect