ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Time Picker

yarn add @clayui/time-picker

Time pickers let users select a time for a form.

  • Examples
  • API

Stable3.2.4CHANGELOGstorybook demos

PropertyTypeRequiredDefaultDescription
ariaLabels
{ ampm: string; hours: string; minutes: string; clear: string; timeDown: string; timeUp: string; }false{ 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; }false{ 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
booleanfalsefalseFlag to disable user interactions on the component.
icon
booleanfalsefalseFlag to indicate if show time icon or not.
onInputChange
(values: Input) => voidfalse() => {}Called when input values change hour, minutes or ampm.
name
stringfalseName attribute for the hidden input (used for form submission).
values
{ ampm?: InputAmPm; hours: '--' | string; minutes: '--' | string; }false{ hours: DEFAULT_VALUE, minutes: DEFAULT_VALUE, }Sets the values for the hour, minute, or am/pm input.
spritemap
stringfalseThe path to the SVG spritemap file containing the icons.
timezone
stringfalseFlag to indicate the timezone of the user.
use12Hours
booleanfalsefalseFlag to indicate if 12-hour use, when true, should show am/pm input.

How can this be improved? Create an issue!