Time Field

A Time Field takes a time typed in segments — hour, minute, and the period where the locale uses one. It reads and writes a time value rather than a string, so a schedule or a reminder gets a value it can compare and store.

Demo

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

Starts at
930AM
24-hour
0930

Usage

Source
TimeField.tsx
import { useState } from 'react';
import { Time } from '@internationalized/date';
import { NTimeField } from '@nayan-ui/react';


const TimeField = () => {
  const [value, setValue] = useState<any>(new Time(9, 30));


  return (
    <div>
      <div className="max-w-sm">
        <NTimeField label="Starts at" value={value} onChange={setValue} />
        <NTimeField label="24-hour" value={value} onChange={setValue} hourCycle={24} />
      </div>
    </div>
  );
};


export default TimeField;

Attributes

17 props
NameTypeDefaultDetails
valueanyOptionalThe value prop.
defaultValueanyOptionalThe defaultValue prop.
onChange(value: any) => voidOptionalThe onChange prop.
labelReactNodeOptionalThe label prop.
minValueanyOptionalThe minValue prop.
maxValueanyOptionalThe maxValue prop.
granularity'hour' | 'minute' | 'second''minute'The granularity prop.
hourCycle12 | 24Optional12- or 24-hour display. Defaults to the locale's own convention.
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'Time'The aria-label prop.

Tags

Other components solving nearby problems.