DatePicker

DatePicker

The DatePicker component combines an input field with a calendar dropdown for date selection. It manages open/close state, date formatting, and auto-closes after selection.

Import

import { DatePicker } from '@thaparoyal/calendar-react';
import type { CalendarDate } from '@thaparoyal/calendar-react';
import '@thaparoyal/calendar-core/themes/themes.css';

Basic Usage

import { useState } from 'react';
import { DatePicker } from '@thaparoyal/calendar-react';
import type { CalendarDate } from '@thaparoyal/calendar-react';
import '@thaparoyal/calendar-core/themes/themes.css';

function MyDatePicker() {
  const [date, setDate] = useState<CalendarDate | null>(null);

  return (
    <div data-theme="indigo">
      <DatePicker.Root
        config={{ calendarType: 'BS', locale: 'en' }}
        value={date}
        onValueChange={setDate}
      >
        <DatePicker.Input placeholder="Select date..." />
        <DatePicker.Trigger />
        <DatePicker.Content>
          <DatePicker.Calendar />
        </DatePicker.Content>
      </DatePicker.Root>
      <p>Selected: {date ? `${date.year}-${date.month}-${date.day}` : 'None'}</p>
    </div>
  );
}

With Clear Button

Add DatePicker.ClearButton to let users clear the selection:

<DatePicker.Root
  config={{ calendarType: 'BS', locale: 'en' }}
  value={date}
  onValueChange={setDate}
>
  <DatePicker.Input placeholder="Select date..." />
  <DatePicker.ClearButton />
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Calendar />
  </DatePicker.Content>
</DatePicker.Root>

Custom Format

Change the date display format in the input field:

<DatePicker.Root
  config={{ calendarType: 'BS', locale: 'en' }}
  format="YYYY/MM/DD"
  value={date}
  onValueChange={setDate}
>
  ...
</DatePicker.Root>

Supported format tokens: YYYY (year), MM (month), DD (day).

AD Calendar DatePicker

<DatePicker.Root
  config={{ calendarType: 'AD', locale: 'en' }}
  value={date}
  onValueChange={setDate}
>
  ...
</DatePicker.Root>

Nepali Numerals

<DatePicker.Root
  config={{ calendarType: 'BS', locale: 'ne' }}
  value={date}
  onValueChange={setDate}
>
  ...
</DatePicker.Root>

Disabled Dates

Prevent specific dates from being selected:

<DatePicker.Root
  config={{ calendarType: 'BS', locale: 'en' }}
  disabledDates={[
    { year: 2081, month: 10, day: 5, calendarType: 'BS' },
    { year: 2081, month: 10, day: 15, calendarType: 'BS' },
  ]}
  value={date}
  onValueChange={setDate}
>
  ...
</DatePicker.Root>

Min/Max Date Constraints

Restrict the selectable date range:

<DatePicker.Root
  config={{
    calendarType: 'BS',
    locale: 'en',
    minDate: { year: 2080, month: 1, day: 1, calendarType: 'BS' },
    maxDate: { year: 2082, month: 12, day: 30, calendarType: 'BS' },
  }}
  value={date}
  onValueChange={setDate}
>
  ...
</DatePicker.Root>

Themes

Wrap with data-theme to apply any of the built-in themes:

<div data-theme="ocean">
  <DatePicker.Root>...</DatePicker.Root>
</div>

Props

Prop	Type	Default	Description
config	Partial<CalendarConfig>	—	Calendar configuration (type, locale, min/max, etc.)
value	CalendarDate | null	—	Controlled selected date
defaultValue	CalendarDate	—	Initial date
onValueChange	(date: CalendarDate | null) => void	—	Selection callback
disabledDates	CalendarDate[]	—	Non-selectable dates
format	string	'YYYY-MM-DD'	Date format string

Sub-components

Component	Description
DatePicker.Root	Root provider — manages open/close state and selection
DatePicker.Input	Text input showing the formatted date value
DatePicker.Trigger	Button to toggle the calendar dropdown
DatePicker.Content	Dropdown container (positioned below input)
DatePicker.Calendar	Calendar grid rendered inside the dropdown
DatePicker.ClearButton	Button to clear the current selection

CSS Classes

Class	Element
.trc-date-picker	Root container
.trc-date-picker-input-wrapper	Input + buttons wrapper
.trc-date-picker-input	Text input
.trc-date-picker-trigger	Open/close button
.trc-date-picker-clear	Clear button
.trc-date-picker-content	Dropdown container
.trc-date-picker-calendar	Calendar inside dropdown