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

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

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

  return (
    <Provider spritemap="/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> | undefined

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

Deprecated

onInputChange

InternalDispatch<Input> | undefined

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.

Deprecated

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

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Diego Nascimento

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Example
API Reference