DatePicker

Import

import { DatePicker } from '@tac-ui/web';

Default

The base picker renders a trigger button that opens an animated calendar dropdown. Clicking a day commits the selection and closes the panel.

<DatePicker placeholder="Select date" />

With Label

Use <code>label</code> to render an associated label above the trigger and <code>helperText</code> to add a contextual hint below it.

<DatePicker label="Start Date" placeholder="Pick a date" helperText="Choose the project start date." />

DateTime Mode

Set <code>mode="datetime"</code> to extend the panel with inline hour and minute inputs below the calendar grid. The panel stays open after selecting a day so the user can adjust the time before pressing Done.

<DatePicker mode="datetime" label="Appointment" placeholder="Select date & time" />

DateTime (12-hour)

Pass <code>use24Hour={false}</code> to switch the time input to 12-hour format with an AM/PM toggle. Use <code>minuteStep</code> to snap minutes to a fixed interval.

<DatePicker mode="datetime" label="Meeting" use24Hour={false} minuteStep={15} placeholder="Select date & time" />

Month Mode

Set <code>mode="month"</code> to display a 3×4 month grid instead of a day calendar. Navigation arrows move by year and the value is set to the first day of the selected month.

<DatePicker mode="month" label="Billing Period" placeholder="Select month" />

Min / Max Date

Use <code>minDate</code> and <code>maxDate</code> to constrain the selectable range. Days outside the range are rendered at reduced opacity and cannot be clicked.

<DatePicker
  label="Date Range"
  placeholder="Select date"
  minDate={new Date(2026, 1, 1)}
  maxDate={new Date(2026, 3, 0)}
/>

Error State

Set <code>error</code> to apply destructive border styling and pass <code>errorMessage</code> to display a validation message below the trigger.

<DatePicker label="Due Date" placeholder="Select date" error errorMessage="Please select a valid date." />

Disabled

When <code>disabled</code> is true the trigger is non-interactive and the calendar panel will not open.

<DatePicker placeholder="Disabled" disabled />

Custom Format

Pass a <code>formatDate</code> function to override how the selected date is displayed in the trigger button. The function receives a <code>Date</code> and must return a string.

<DatePicker
  label="Custom Format"
  formatDate={(d) => d.toLocaleDateString('ko-KR')}
/>

Controlled (Date)

Use the <code>value</code> and <code>onChange</code> props for controlled usage. The component syncs its calendar view to the controlled value whenever it changes externally.

const [date, setDate] = useState<Date | null>(null);
<DatePicker label="Event Date" value={date} onChange={setDate} />

Controlled (DateTime)

In datetime mode the <code>onChange</code> callback fires both when a day is selected and when the time inputs are adjusted, always passing a fully-resolved <code>Date</code>.

const [date, setDate] = useState<Date | null>(null);
<DatePicker mode="datetime" label="Appointment" value={date} onChange={setDate} />

Controlled (Month)

In month mode the <code>onChange</code> callback fires with the first day of the selected month, making it straightforward to derive year and month values from the result.

const [date, setDate] = useState<Date | null>(null);
<DatePicker mode="month" label="Billing Period" value={date} onChange={setDate} />

API Reference