Time Picker

Time pickers allow users to easily enter times.

HH:MM
import { TimePicker } from "@nulogy/components";

<TimePicker
  onChange={(val) => val}
  onInputChange={(val) => val}
/>

Props

NameTypeDefaultDescription

timeFormat

String

hh:mm aa

The default time format (see date-fns for available time formats)

interval

Number

15

The time difference in minutes between the time options

minTime

24 hour time string e.g: 02:30

undefined

The latest time that can be selected.

maxTime

24 hour time string e.g: 02:30

undefined

The latest time that can be selected.

autocomplete

Boolean

true

Whether or not typing will filter the options list

maxHeight

String

256px

Max height of the select dropdown menu, content is scrollable

multiselect

Boolean

false

Whether or not multiple selections can be made

value

String | Array

undefined

Value of input, used when controlling the component

defaultValue

String | Array

Default value of input

menuIsOpen

Boolean

undefined

Controls whether the menu is open; If unset, then NDS controls this implicitly instead

onMenuOpen

Function

undefined

Event handler for when the menu is opened

onMenuClose

Function

undefined

Event handler for when the menu is closed

onInputChange

Function

undefined

Event handler for when the value typed into the input changes

menuPosition

string

absolute

The CSS position value of the menu. ex: 'fixed'

windowThreshold

number

300

The number of option at which to use virtualization to improve performance of the select

id

String

null

A unique ID for this input

name

String

undefined

A unique name for this input

disabled

Boolean

false

Marks the field as disabled and disallows user input

helpText

Node

null

Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.

labelText

String

null

Informs users what the corresponding input field is for.

placeholder

String

null

A hint to the expected format for the field. Not a replacement for a label.

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the wrapper element.

onChange

Function

undefined

Change event handler that will be run whenever the value of the input is updated.

onBlur

Function

undefined

Change event handler that will be run whenever the input loses focus.

errorMessage

String

null

Displays list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

Related components