DatePicker

free

DatePicker provides compact calendar-backed date entry for forms and filters.

import DatePicker from '@/components/ui/date-picker';

export default function BasicDemo() {
  return <DatePicker placeholder="Pick a date" />;

Installation

Add this component with the NateUI CLI.

npx nateui@latest add DatePicker

pnpm dlx nateui@latest add DatePicker

yarn dlx nateui@latest add DatePicker

Examples

Basic

import DatePicker from '@/components/ui/date-picker';

export default function BasicExampleDemo() {
  return <DatePicker placeholder="Pick a date" />;

Range picker

import DatePicker from '@/components/ui/date-picker';

const DatePickerRange = DatePicker.Range;

Date time picker

import DatePicker from '@/components/ui/date-picker';

const DateTimepicker = DatePicker.DateTime;

Controlled

import { useState } from 'react';
import DatePicker from '@/components/ui/date-picker';

const DatePickerRange = DatePicker.Range;

Format

Input format:

Inner label format:

import DatePicker from '@/components/ui/date-picker';

export default function FormatDemo() {
  const date = new Date();

Custom Render

import DatePicker from '@/components/ui/date-picker';
import Badge from '@/components/ui/badge';

export default function CustomRenderDemo() {

Disable out of period date

import dayjs from 'dayjs';
import DatePicker from '@/components/ui/date-picker';

export default function DisableOutOfPeriodDateDemo() {

Disabled certain date

import { useState } from 'react';
import DatePicker from '@/components/ui/date-picker';

export default function DisabledCertainDateDemo() {

Multiple date view

import DatePicker from '@/components/ui/date-picker';

const DatePickerRange = DatePicker.Range;

Disabled Input

import { useState } from 'react';
import DatePicker from '@/components/ui/date-picker';

export default function DisabledInputDemo() {

Inputtable

import DatePicker from '@/components/ui/date-picker';

export default function InputtableDemo() {
  return (

Input Size

import DatePicker from '@/components/ui/date-picker';

export default function InputSizeDemo() {
  const date = new Date();

Input Affix

Prefix:

Suffix:

import DatePicker from '@/components/ui/date-picker';
import { PiCalendar, PiCalendarBlank } from 'react-icons/pi'

export default function InputAffixDemo() {

Clear Button

No clear button:

Custom clear button:

import DatePicker from '@/components/ui/date-picker';
import Button from '@/components/ui/button';

export default function ClearButtonDemo() {

Localization

import DatePicker from '@/components/ui/date-picker';
import 'dayjs/locale/ko';

export default function LocalizationDemo() {

API

DatePicker exports a root picker plus DatePicker.Range and DatePicker.DateTime.

Shared Picker Props

These props are available on DatePicker, DatePicker.Range, and DatePicker.DateTime.

Prop	Description	Type	Default
`clearable`	Whether the value can be cleared from the input.	`boolean`	`true`
`clearButton`	Custom clear control rendered in the input suffix.	`ReactNode`	-
`disabled`	Disable the input and prevent opening the picker.	`boolean`	`false`
`inputPrefix`	Content rendered before the input text.	`ReactNode`	-
`inputSuffix`	Content rendered after the input text when no clear button is shown.	`ReactNode`	Calendar icon
`inputtable`	Allow typing into the input.	`boolean`	`false`
`name`	Name passed to the underlying input.	`string`	Component-specific
`onBlur`	Called when the input loses focus.	`PickerFocusHandler`	-
`onDropdownClose`	Called after the floating calendar closes.	`() => void`	-
`onDropdownOpen`	Called after the floating calendar opens.	`() => void`	-
`onFocus`	Called when the input receives focus.	`PickerFocusHandler`	-
`placeholder`	Placeholder shown when no value is selected.	`string`	-
`size`	Control size for the input.	`ControlSize`	`'md'`
`type`	Native input type forwarded to the input.	`HTMLInputTypeAttribute`	`'text'`

Shared Calendar Props

These props are forwarded from the picker to the calendar grid.

Prop	Description	Type	Default
`dateViewCount`	Amount of date views displayed in the picker.	`number`	`1`
`dayClassName`	Apply class names to days based on the date and modifiers.	`DatePickerDayClassName`	-
`dayStyle`	Apply inline styles to days based on the date and modifiers.	`DatePickerDayStyle`	-
`defaultMonth`	Default month for the uncontrolled picker view.	`Date`	Selected value or `new Date()`
`defaultView`	Default picker view.	`PickerView`	`'date'`
`disableDate`	Specify dates that cannot be selected.	`DatePickerDisableDate`	-
`disableOutOfMonth`	Disable days outside the visible month.	`boolean`	`false`
`enableHeaderLabel`	Enable the header label to trigger view changes.	`boolean`	`true`
`firstDayOfWeek`	First day of the week.	`FirstDayOfWeek`	`'monday'`
`hideOutOfMonthDates`	Hide days outside the visible month.	`boolean`	`false`
`hideWeekdays`	Hide the weekday row.	`boolean`	`false`
`labelFormat`	Month and year format used by the date view header.	`DatePickerLabelFormat`	`{ month: 'MMM', year: 'YYYY' }`
`locale`	Dayjs locale used by the picker.	`string`	Config locale
`lockView`	Keep the current view level after selecting a month or year.	`boolean`	`false`
`maxDate`	Maximum selectable date.	`Date`	-
`minDate`	Minimum selectable date.	`Date`	-
`renderDay`	Render custom day content.	`DatePickerRenderDay`	-
`weekdayLabelFormat`	Weekday display format.	`string`	`'dd'`
`weekendDays`	Weekday indexes treated as weekends.	`DatePickerWeekendDays`	`[0, 6]`
`yearLabelFormat`	Year label format.	`string`	`'YYYY'`

DatePicker

Prop	Description	Type	Default
`className`	Class names applied to the picker input.	`string`	-
`closePickerOnChange`	Whether to close the picker after a date is selected.	`boolean`	`true`
`defaultOpen`	Whether the picker is open on first render.	`boolean`	`false`
`defaultValue`	Default value of DatePicker. Use `value` for controlled usage.	`Date \| null`	-
`inputFormat`	DatePicker input display format.	`string`	`'YYYY-MM-DD'`
`inputtableBlurClose`	Whether to close the picker on input blur when `inputtable` is enabled.	`boolean`	`false`
`openPickerOnClear`	Whether to open DatePicker after clearing the value.	`boolean`	`false`
`onChange`	Callback when a date cell is selected.	`DatePickerChangeHandler`	-
`ref`	Ref forwarded to the underlying input.	`Ref<HTMLInputElement>`	-
`value`	Controlled DatePicker value.	`Date \| null`	-
`...nativeDivProps`	Native props for the wrapper, excluding `onChange` and `value`.	`NativeDatePickerDivProps`	-

DatePicker.Range

Prop	Description	Type	Default
`className`	Class names applied to the range picker input.	`string`	-
`closePickerOnChange`	Whether to close the picker after the range is selected.	`boolean`	`true`
`defaultOpen`	Whether the range picker is open on first render.	`boolean`	`false`
`defaultValue`	Default value of DatePicker.Range. Use `value` for controlled usage.	`DateRangeValue`	`[null, null]`
`inputFormat`	DatePicker.Range input display format.	`string`	`'YYYY-MM-DD'`
`openPickerOnClear`	Call the open callback after clearing. The range picker always reopens on clear.	`boolean`	`false`
`onChange`	Callback when the date range is selected.	`DateRangeChangeHandler`	-
`ref`	Ref forwarded to the underlying input.	`Ref<HTMLInputElement>`	-
`separator`	Separator between dates in the input.	`string`	`'~'`
`singleDate`	Allow one date to be selected as both range endpoints.	`boolean`	`false`
`value`	Controlled DatePicker.Range value.	`DateRangeValue`	-
`...nativeDivProps`	Native props for the wrapper, excluding owned picker props.	`NativeDateRangeDivProps`	-

DatePicker.DateTime

Prop	Description	Type	Default
`amPm`	Whether to set time input to 12-hour format.	`boolean`	`true`
`className`	Class names applied to the date-time picker input.	`string`	-
`closePickerOnChange`	Whether to close the picker after date or time selection.	`boolean`	`false`
`defaultOpen`	Whether the date-time picker is open on first render.	`boolean`	`false`
`defaultValue`	Default value of DatePicker.DateTime. Use `value` for controlled usage.	`Date \| null`	-
`inputFormat`	DatePicker.DateTime input display format.	`string`	`'DD-MMM-YYYY hh:mm a'`
`okButtonContent`	OK button content.	`ReactNode`	`'OK'`
`openPickerOnClear`	Whether to open DatePicker.DateTime after clearing the value.	`boolean`	`false`
`onChange`	Callback when the date-time value changes.	`DatePickerChangeHandler`	-
`ref`	Ref forwarded to the underlying input.	`Ref<HTMLInputElement>`	-
`value`	Controlled DatePicker.DateTime value.	`Date \| null`	-
`...nativeDivProps`	Native props for the wrapper, excluding owned picker props.	`NativeDateTimeDivProps`	-

Types

type ControlSize = 'lg' | 'md' | 'sm';
type PickerView = 'date' | 'month' | 'year';
type FirstDayOfWeek = 'sunday' | 'monday';
type DatePickerLabelFormat = { month: string; year: string };
type DatePickerWeekendDays = [number, number];
 
type DatePickerDayProps = {
  disabled: boolean;
  weekend: boolean;
  selectedInRange: boolean;
  selected: boolean;
  inRange: boolean;
  firstInRange: boolean;
  lastInRange: boolean;
  outOfMonth: boolean;
};
 
type DatePickerDayClassName = (
  date: Date,
  modifiers: DatePickerDayProps,
) => string;
type DatePickerDayStyle = (
  date: Date,
  modifiers: DatePickerDayProps,
) => CSSProperties;
type DatePickerDisableDate = (date: Date) => boolean;
type DatePickerRenderDay = (date: Date) => ReactNode;
type PickerFocusHandler = (
  event: FocusEvent<HTMLInputElement, Element>,
) => void;
 
type DatePickerChangeHandler = (value: Date | null) => void;
type DateRangeValue = [Date | null, Date | null];
type DateRangeChangeHandler = (value: DateRangeValue) => void;
 
type NativeDatePickerDivProps = Omit<
  ComponentProps<'div'>,
  'onChange' | 'value'
>;
type NativeDateRangeDivProps = Omit<
  ComponentProps<'div'>,
  'defaultValue' | 'onChange' | 'value'
>;
type NativeDateTimeDivProps = NativeDateRangeDivProps;