Time Picker

Examples

Basic Usage

Select a time, 12-hour format.
HH:mm
open
Select a time, 24-hour format.
HH:mm
open
Select a time, 12-hour format.
HH:mm
open

Business Hours

Select the date from date picker to filter time according to that day in timepicker
Press down arrow key to navigate quick select options and tab key to navigate to calendar. Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.;
Select a time, 12-hour format.
HH:mm
open

API

Time Picker props

NameTypeDefaultDescription
clearable
boolean
falseSet to true to allow the timepicker to have an undefined value. Defaults to false.
creatable
boolean
falseSet to true to allow times that aren't displayed in the options list to be entered manually. Defaults to false.
disabled
boolean
falseRenders component in disabled state
format
'12'| '24'
12 or 24. Render options in AM/PM format or 24 hour format. Defaults to 12 hour.
intent
'default'| 'success'| 'warning'| 'error'
Defines the kind (purpose) of a button.
onChange
function
Event handler that is called when a new timezone is selected.
overrides
custom
Lets you customize all aspects of the component.
placeholder
string
If the value is undefined, the placeholder is shown. Defaults to HH:mm
size
'sm'| 'md'| 'lg'
mdDefines the size (scale) of dropdown menu items. See the Menu component API.
step
number
Amount of seconds between each option time. Defaults to 900 (15 minutes).
timeRanges
array
Allows to selectively show the options based on date
value
date
Currently selected time

You can check the implementation of the component for more details.

Time Picker exports

You can import this module like so:

import {TimePicker} from 'spaceweb/time-picker'

It exports the following components or utility functions:

  • TimePicker