Time Picker

Summary

Default

Use the Time Picker for time-only selection. For date and time selection, use the DatePicker with Time Selection Enabled instead.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerDefault = (props) => (
  <div>
    <TimePicker
        id="time-picker-default"
    />
  </div>
)

export default TimePickerDefault

24-Hour Format

Set time_format / timeFormat to 24hour to display the time selection dropdown in a 24-hour format.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePicker24Hour = (props) => (
  <div>
    <TimePicker
        id="time-picker-24-hour"
        label="24-Hour Format"
        timeFormat="24hour"
    />
  </div>
)

export default TimePicker24Hour

Default Time

The default_time / defaultTime prop sets a default time value and accepts both 12-hour and 24-hour formats.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerDefaultTime = (props) => (
  <div>
    <TimePicker
        defaultTime="2:30 PM"
        id="time-picker-default-time-12hr"
        label="12-Hour Format (2:30 PM)"
    />
    <TimePicker
        defaultTime="14:30"
        id="time-picker-default-time-24hr"
        label="24-Hour Format (14:30)"
    />
    <TimePicker
        defaultTime="14:30"
        id="time-picker-default-time-24hr-format"
        label="24-Hour Format with timeFormat (14:30)"
        timeFormat="24hour"
    />
  </div>
)

export default TimePickerDefaultTime

Custom Label

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerLabel = (props) => (
  <div>
    <TimePicker
        id="time-picker-label"
        label="Select Time"
    />
  </div>
)

export default TimePickerLabel

With Timezone

Enable timezone display by passing show_timezone / showTimezone.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerTimezone = (props) => (
  <div>
    <TimePicker
        id="time-picker-timezone"
        showTimezone
    />
    <TimePicker
        id="time-picker-timezone-24hour"
        showTimezone
        timeFormat="24hour"
    />
  </div>
)

export default TimePickerTimezone

Min & Max Time

Use the min_time / minTime and max_time / maxTime props to restrict the selectable time range. This example demonstrates minimum-only, maximum-only, and combined ranges in both 12-hour and 24-hour formats.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerMinMaxTime = (props) => (
  <div>
    <TimePicker
        id="time-picker-min-only"
        label="Minimum Time Only"
        minTime="09:00"
    />
    <TimePicker
        id="time-picker-max-only"
        label="Maximum Time Only"
        maxTime="17:00"
        timeFormat="24hour"
    />
    <TimePicker
        id="time-picker-min-max-12hr"
        label="Min & Max Time Range (12-hour)"
        maxTime="17:00"
        minTime="09:00"
    />
    <TimePicker
        id="time-picker-min-max-24hr"
        label="Min & Max Time Range (24-hour)"
        maxTime="17:00"
        minTime="09:00"
        timeFormat="24hour"
    />
    <TimePicker
        id="time-picker-pm-only"
        label="PM Only Range (AM disabled)"
        maxTime="17:00"
        minTime="13:00"
    />
    <TimePicker
        id="time-picker-am-only"
        label="AM Only Range (PM disabled)"
        maxTime="11:30"
        minTime="06:00"
    />
  </div>
)

export default TimePickerMinMaxTime

Error

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerError = (props) => (
  <div>
    <TimePicker
        error="Please select a valid time"
        id="time-picker-error"
    />
  </div>
)

export default TimePickerError

Disabled

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerDisabled = (props) => (
  <div>
    <TimePicker
        disabled
        id="time-picker-disabled"
        label="Disabled Time Picker"
    />
    <TimePicker
        defaultTime="14:30"
        disabled
        id="time-picker-disabled-with-value"
        label="Disabled with Default Time"
    />
  </div>
)

export default TimePickerDisabled

Required Indicator

The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.

You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.

import React from 'react'

import { TimePicker } from 'playbook-ui'

const TimePickerRequiredIndicator = (props) => (
  <div>
    <TimePicker
        id="time-picker-required-indicator"
        label="Select Time"
        requiredIndicator
    />
  </div>
)

export default TimePickerRequiredIndicator

onChange & onClose Handlers

Demonstrates the onChange and onClose event handlers for the Time Picker.

import React, { useState } from 'react'

import { TimePicker, Body, Flex } from 'playbook-ui'

const TimePickerOnHandler = (props) => {
  const [selectedTime, setSelectedTime] = useState('')
  const [closedTime, setClosedTime] = useState('')

  const handleTimeChange = (time) => {
    setSelectedTime(time)
  }

  const handleTimeClose = (time) => {
    setClosedTime(time)
  }

  return (
    <div>
      {(selectedTime || closedTime) && (
        <Flex marginBottom="sm" 
            orientation="column"
        >
          {selectedTime && (
            <Body
                text={`onChange: ${selectedTime}`}
            />
          )}
          {closedTime && (
            <Body
                marginTop={selectedTime ? "xs" : "none"}
                text={`onClose: ${closedTime}`}
            />
          )}
        </Flex>
      )}
      <TimePicker
          id="time-picker-on-handler"
          onChange={handleTimeChange}
          onClose={handleTimeClose}
      />
    </div>
  )
}

export default TimePickerOnHandler

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat