Date Field

A Date Field takes a date typed in segments — day, month, year — with no calendar attached. Each segment validates on its own and can be stepped with the arrow keys, which makes it faster than a picker for a date somebody already knows.

Demo

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

Starts
9192026
Type it, or step the segments with the arrow keys.

Usage

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


const DateField = () => {
  const [value, setValue] = useState<any>(today(getLocalTimeZone()));


  return (
    <div>
      <div className="max-w-sm">
        <NDateField label="Starts" value={value} onChange={setValue} helperText="Type it, or step the segments with the arrow keys." />
      </div>
    </div>
  );
};


export default DateField;

Attributes

16 props
NameTypeDefaultDetails
valueanyOptionalThe value prop.
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.
fullWidthbooleanfalseThe fullWidth prop.
errorReactNodeOptionalThe error prop.
helperTextReactNodeOptionalThe helperText prop.
classNamestring''The className prop.
labelClassNamestring''The labelClassName prop.
aria-labelstring'Date'The aria-label prop.

Tags

Other components solving nearby problems.