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 birth
Select your date of birth

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

NameTypeDefaultDetails
valueDateValueOptionalControlled date value.
defaultValueDateValueOptionalDefault date value.
onChange(value: DateValue) => voidOptionalCallback when date changes.
labelReact.ReactNodeOptionalLabel for the date picker.
isDisabledbooleanfalseDisables the date picker.
isInvalidbooleanfalseMarks as invalid.
minValueDateValueOptionalMinimum selectable date.
maxValueDateValueOptionalMaximum selectable date.
granularity'day' | 'hour' | 'minute' | 'second''day'Date granularity.
classNamestring' 'Additional CSS classes.
wrapperClassNamestring' 'Wrapper CSS classes.
labelClassNamestring' 'Label CSS classes.
errorReact.ReactNodeOptionalError message to display.
helperTextReact.ReactNodeOptionalHelper text below the input.