Time Picker

Time pickers let users select a time for a form.

install	yarn add @clayui/time-picker
version
use	`import TimePicker from '@clayui/time-picker';`

Table of Contents

Example
API Reference

Example

Open Sandbox

import {Provider} from '@clayui/core';
import TimePicker from '@clayui/time-picker';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [state, setState] = useState({
		hours: '--',
		minutes: '--',
	});

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<TimePicker
					onChange={setState}
					timezone="GMT+01:00"
					use12Hours
					value={state}
				/>
			</div>
		</Provider>
	);
}

API Reference

TimePicker

({ ariaLabels, config, disabled, defaultValue, icon, id, name, onChange, onInputChange, spritemap, timezone, use12Hours, value, values, }: IProps) => JSX.Element

Parameters

Properties

ariaLabels

{ ampm: string; hours: string; minutes: string; clear: string; timeDown: string; timeUp: string; } | undefined=

{"ampm":"Select time of day (AM/PM) using up (PM) and down (AM) arrow keys","clear":"Delete the entered time","hours":"Enter the hour in 00:00 format","minutes":"Enter the minutes in 00:00 format","timeDown":"Time down","timeUp":"Time up"}

Add the labels for the input elements and the input clear button, use this to provide accessibility and internationalization. By default the text is in English.

config

{ use12Hours: Config; use24Hours: Config; } | undefined=

{"use12Hours":{"ampm":{"am":"AM","pm":"PM"},"hours":{"max":12,"min":1},"minutes":{"max":59,"min":0}},"use24Hours":{"ampm":{"am":"AM","pm":"PM"},"hours":{"max":23,"min":0},"minutes":{"max":59,"min":0}}}

Range settings for 12 or 24 hours.

disabled

boolean | undefined

Flag to disable user interactions on the component.

defaultValue

Input | undefined= {"hours":"--","minutes":"--"}

Property to set the default value (uncontrolled).

icon

boolean | undefined

Flag to indicate if show time icon or not.

id

string | undefined

Id to be applied to clay-time-hours input.

onChange

InternalDispatch<Input>

Called when input values change hour, minutes or ampm (controlled).

onInputChange

InternalDispatch<Input>

Called when input values change hour, minutes or ampm (controlled).

name

string | undefined

Name attribute for the hidden input (used for form submission).

spritemap

string | undefined

The path to the SVG spritemap file containing the icons.

timezone

string | undefined

Flag to indicate the timezone of the user.

use12Hours

boolean | undefined

Flag to indicate if 12-hour use, when true, should show am/pm input.

values

Input | undefined

Sets the values for the hour, minute, or am/pm input (controlled).

value

Input | undefined

Sets the values for the hour, minute, or am/pm input (controlled).

Returns

Element

Edit this page on GitHub

Contributors

Table of Contents

Example
API Reference