Components
DatePicker
{
function Controlled() {
const [value, setValue] = React.useState<Date>(NEW_YEAR_2082);
return (
<View className="gap-3">
<DatePicker
{...args}
value={value}
onChange={(_event, date) => date && setValue(date)}
/>
<Text variant="footnote" color="tertiary">
{value.toDateString()}
</Text>
</View>
);
}
return <Controlled />;
}Import
import { DatePicker } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
calendar | ad · bs · both | — | Which calendar the grid shows. both renders Bikram Sambat with the Gregorian date alongside. The value is always a JS Date regardless — conversion happens for display only. |
value | — | — | Selected date, always Gregorian. Controlled — hold it in state and update from onChange. |
onChange | — | — | Fires with the new Date. In BS mode you still receive Gregorian, so no conversion is needed on your side. |
minimumDate | — | — | Earliest selectable date. Out-of-range days render disabled rather than being hidden. |
maximumDate | — | — | Latest selectable date. |
Examples
Bikram Sambat Only
Locked to Bikram Sambat — the AD/BS toggle is hidden.
Gregorian Only
Locked to Gregorian, for fields that are explicitly AD.
With Default Date
defaultDate sets where the calendar opens — useful for date of birth, where
today is never the right starting point. The web implementation also accepts
value: null for a genuinely empty field; the shared (native) prop type does
not, so this story seeds a value instead.
<DatePicker
value={new Date('1995-06-15T00:00:00')}
defaultDate={new Date('1995-06-15T00:00:00')}
materialDateLabel="Date of birth"
/>Bounded
minimumDate / maximumDate bound the selectable range.
<DatePicker
minimumDate={new Date('2025-04-14T00:00:00')}
maximumDate={new Date('2025-05-14T00:00:00')}
materialDateLabel="Within the month"
/>