DatePicker – Once UI

DatePicker takes the same main props as on the web (value, defaultDate, onChange, minDate, maxDate, size, range, locale, labels). It shows a month of days between previous and next buttons, marks today, and keeps days outside minDate…maxDate from being picked. With locale, the month and weekday names and the week's first day follow that locale, as on the web. See the web DatePicker for the same component in the browser.

Basic usage

Day.tsx

import { useState } from "react";
import { Card, DatePicker } from "@once-ui-system/native";

export function Day() {
const [date, setDate] = useState(new Date());
return (
  <Card padding="16">
    <DatePicker value={date} onChange={setDate} minDate={new Date()} fillWidth />
  </Card>
);
}

Range and locale

range highlights the days from startDate to endDate, for a stay or a trip. locale takes a BCP 47 tag such as "hu" or "pt-BR".

Stay.tsx

<DatePicker
locale="hu"
range={{ startDate: new Date(2026, 9, 12), endDate: new Date(2026, 9, 16) }}
/>

Differences from the web

No time picker yet: timePicker and defaultTime are left out. Use an Input for the time.
No month and year menus: the header moves one month at a time.
Core 3.0 names. onValueChange works beside onChange.

API reference

Prop	Type	Default	Description
value	Date		The picked day, when you own it.
defaultDate	Date		The first picked day when the picker owns it.
onChange / onValueChange	(date: Date) => void		Called with the day picked, keeping its time of day.
minDate	Date		The first day that can be picked.
maxDate	Date		The last day that can be picked.
size	"s" \| "m" \| "l"	"m"	Day cells of 32, 40 or 48.
range	{ startDate?: Date; endDate?: Date }		Highlights a span of days.
locale	string		Names and first weekday in this locale.
labels	{ previousMonth?, nextMonth? }		The month buttons' names, translated.

DatePicker also takes every Flex prop.