Date Picker

Name: Nayan UI
Author: Nayan UI

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

Rendered live, with the same build of the library you install.

Date of birth

mmddyyyy

Select your date of birth

Usage

Source

DatePicker.tsx

import { NDatePicker } from '@nayan-ui/react';

const DatePicker = () => {
  return (
    <div>
      <div className="w-full">
        <NDatePicker label="Date of birth" helperText="Select your date of birth" />
      </div>
    </div>
  );
};

export default DatePicker;

Attributes

14 props

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.
disabled	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.

Date Picker

Demo

Usage

Attributes

Tags