DatePicker

A calendar-based date selector with a modal panel. Supports date-only, date+time, and month-only modes with min/max range constraints.

Import

tsx

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

Default

The base picker renders a trigger button that opens a calendar modal. Tapping a day commits the selection and closes the panel.

Select date

tsx

<DatePicker />

With Label

Use label to render an associated label above the trigger.

Start Date

Select date

tsx

<DatePicker label="Start Date" />

DateTime Mode

Set mode="datetime" 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.

Appointment

Select date

tsx

<DatePicker mode="datetime" label="Appointment" />

Month Mode

Set mode="month" 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.

Billing Period

Select date

tsx

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

Min / Max Date

Use minDate and maxDate to constrain the selectable range. Days outside the range are rendered at reduced opacity and cannot be tapped.

Date Range

Select date

tsx

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

Error

Set error to highlight the trigger border in the error color. Combine with errorMessage to display validation feedback below the trigger.

Start Date

Select date

Please select a valid date.

tsx

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

Disabled

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

Disabled

Select date

tsx

<DatePicker label="Disabled" disabled />

Controlled (Date)

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

Event Date

Select date

tsx

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

API Reference

Prop	Type	Default	Description
mode	"date" \| "datetime" \| "month"	"date"	Picker mode: date-only, date+time, or month-only.
value	Date	-	Controlled selected date.
onChange	(date: Date) => void	-	Called when a date is selected.
label	string	-	Label text displayed above the trigger.
minDate	Date	-	Earliest selectable date.
maxDate	Date	-	Latest selectable date.
disabled	boolean	false	Disables the date picker.
error	boolean	false	When true, shows the trigger border in error color.
errorMessage	string	-	Error message displayed below the trigger when error is true.
style	ViewStyle	-	Additional styles applied to the outer container.