Get Started
Components
Date Picker
A Date Picker component is a UI element that allows users to select a date from a calendar popup. It provides an intuitive interface for choosing dates with support for date ranges, min/max constraints, and various granularity levels.
Demo
Date of birthSelect your date of birth
mmddyyyy
Usage
import { NDatePicker } from '@nayan-ui/react';const DatePicker = () => {return <NDatePicker label="Date of birth" helperText="Select your date of birth" />;};export default DatePicker;
Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| value | DateValue | Optional | Controlled date value. |
| defaultValue | DateValue | Optional | Default date value. |
| onChange | (value: DateValue) => void | Optional | Callback when date changes. |
| label | React.ReactNode | Optional | Label for the date picker. |
| isDisabled | boolean | false | Disables the date picker. |
| isInvalid | boolean | false | Marks as invalid. |
| minValue | DateValue | Optional | Minimum selectable date. |
| maxValue | DateValue | Optional | Maximum selectable date. |
| granularity | 'day' | 'hour' | 'minute' | 'second' | 'day' | Date granularity. |
| className | string | ' ' | Additional CSS classes. |
| wrapperClassName | string | ' ' | Wrapper CSS classes. |
| labelClassName | string | ' ' | Label CSS classes. |
| error | React.ReactNode | Optional | Error message to display. |
| helperText | React.ReactNode | Optional | Helper text below the input. |