Date Range Picker

A Date Range Picker takes a start and an end date in one control, either typed into its segments or chosen from the calendar it opens. Reporting periods, stays and filters all need two dates that make sense together, which is what a range picker enforces.

Demo

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

Reporting period

Usage

Source
DateRangePicker.tsx
import { useState } from 'react';
import { getLocalTimeZone, today } from '@internationalized/date';
import { NDateRangePicker } from '@nayan-ui/react';


const DateRangePicker = () => {
  const [value, setValue] = useState<any>({ start: today(getLocalTimeZone()), end: today(getLocalTimeZone()).add({ days: 6 }) });


  return (
    <div>
      <div className="max-w-md">
        <NDateRangePicker label="Reporting period" value={value} onChange={setValue} />
      </div>
    </div>
  );
};


export default DateRangePicker;

Attributes

16 props
NameTypeDefaultDetails
valueanyOptional`{ start, end }` as react-aria date values.
defaultValueanyOptionalThe defaultValue prop.
onChange(value: any) => voidOptionalThe onChange prop.
labelReactNodeOptionalThe label prop.
minValueanyOptionalThe minValue prop.
maxValueanyOptionalThe maxValue prop.
granularity'day' | 'hour' | 'minute' | 'second''day'The granularity prop.
disabledbooleanfalseThe disabled prop.
isInvalidbooleanfalseThe isInvalid prop.
variant'primary' | 'secondary''primary'The variant prop.
fullWidthbooleantrueThe fullWidth prop.
errorReactNodeOptionalThe error prop.
helperTextReactNodeOptionalThe helperText prop.
classNamestring''The className prop.
labelClassNamestring''The labelClassName prop.
aria-labelstring'Date range'The aria-label prop.

Tags

Other components solving nearby problems.