TimePicker

Download this notebook from GitHub (right-click to download).

---

This component replaces a classic Panel component

This component is being integrated into Panel. Starting with Panel 1.10 it is available as pn.ui.TimePicker, documented in the Panel reference, and supersedes the classic pn.widgets.TimePicker. On Panel 1.10 and later, prefer the panel.ui namespace.

import datetime as dt

import panel as pn
import panel_material_ui as pmui

pn.extension()

The TimePicker widget allows entering a time value as text or datetime.time.

Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.

Parameters:

For details on other options for customizing the component see the customization guides.

Core

• disabled (boolean): Whether the widget is editable

• end (str | datetime.time): Inclusive upper bound of the allowed time selection

• start (str | datetime.time): Inclusive lower bound of the allowed time selection

• value (str | datetime.time): The current value

Display

• clock (str): Whether to use 12 hour or 24 hour clock. Default is '12h'.

• format (str): Formatting specification for the display of the picked date.

  +----+------------------------------------+------------+
  | H  | Hours                              | 0 to 23    |
  | HH | Hours, 2-digits                    | 00 to 23   |
  | h  | Hours, 12-hour clock               | 1 to 12    |
  | hh | Hours, 12-hour clock, 2-digits     | 1 to 12    |
  | m  | Minutes                            | 0 to 59    |
  | mm | Minutes                            | 00 to 59   |
  | s  | Seconds                            | 0, 1 to 59 |
  | ss | Seconds                            | 00 to 59   |
  | a  | am/pm, lower-case                  | am or pm   |
  | A  | AM/PM, upper-cas                   | AM or PM   |
  +----+------------------------------------+------------+
  

  See also https://day.js.org/docs/en/parse/string-format.

• error_state (boolean): Whether to display in error state.

• helper_text (str): Helper text displayed below the input field.

• hour_increment (int): The time steps between two hour options. Default is 1.

• label (str): The title of the widget

• minute_increment (int): The time steps between two minure options. Default is 1.

• mode (Literal["digital", "analog", "auto"]): Whether to render a digital or analog clock. By default automatically switches between digital clock on desktop to analog clock on mobile.

• second_increment (int): The time steps between two second options. Default is 1.

• seconds (bool): Allows to select seconds. By default, only hours and minutes are selectable, and AM/PM depending on the clock option. Default is False.

Styling

• color (str): A color variant 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red).

• size (str): Controls the visual size/density of the time picker input field. One of “small”, “medium”, or “large”. Default is “medium”.

• sx (dict): Component level styling API.

• theme_config (dict): Theming API.

• variant (Literal["filled", "outlined", "standard"]): The variant of the input field.

Aliases

For compatibility with Panel certain parameters are allowed as aliases:

• name: Alias for label

Unsupported

Options implemented by the panel.widgets.TimePicker widget but not panel_material_ui.TimePicker:

• hour_step (int): Defines the granularity of hour value increments in the UI.

• minute_step (int): Defines the granularity of minute value increments in the UI.

• seconds_step (int): Defines the granularity of second value increments in the UI.

---

Basic Usage

The TimePicker widget allows selecting a time of day.

time_picker = pmui.TimePicker(label='Time Picker', value=dt.datetime.now().time())

pmui.Column(time_picker, height=400)

Either datetime.time or str can be used as input and TimePicker can be bounded by a start and end time.

time_picker = pmui.TimePicker(label='Time Picker', value="08:25", start='00:00', end='12:00')

pmui.Column(time_picker, height=380)

24-hour Clock

By default the TimePicker uses a 12-hour clock picker, but this may be changed to a ‘24h’ clock.

time_picker_12 = pmui.TimePicker(
    label='Time Picker (12h)', value="08:28", start='00:00', end='12:00', clock='12h'
)
time_picker_24 = pmui.TimePicker(
    label='Time Picker (24h)', value="08:28", start='00:00', end='12:00', clock='24h'
)

pmui.Row(time_picker_12, time_picker_24, height=380)

Format

The formatting of the text field can be set independently from the clock. It follows the day.js string formatting options

time_picker_leading_zero = pmui.TimePicker(
    label='Time Picker', value="08:28", start='00:00', end='12:00', format="HH:MM:ss", seconds=True
)
time_picker_no_zeros = pmui.TimePicker(
    label='Time Picker', value="08:28", start='00:00', end='12:00', format="H:M:s", seconds=True
)

pmui.Row(time_picker_leading_zero, time_picker_no_zeros, height=380)

Mode

By default the TimePicker will render as a digital clock on desktop environments and switch to a clock popup in mobile environments.

To switch explicitly switch between the two set the mode:

pmui.FlexBox(
    pmui.TimePicker(label='Analog', mode="analog"),
    pmui.TimePicker(label='Digital', mode="digital"),
    height=360
)

Helper Text

The helper_text parameter displays additional guidance text below the input field:

pmui.TimePicker(label='Meeting Time', helper_text='Choose a time slot')

Color Options

You can set the color parameter to visually distinguish the TimePicker when active. Available options include “default”, “primary”, “secondary”, “error”, “info”, “success”, “warning”, “light”, “dark”, and “danger”:

pmui.FlexBox(
    *[pmui.TimePicker(label=color, color=color) for color in pmui.TimePicker.param.color.objects]
)

Variant

The variant parameter controls the visual style of the input. Choose from “filled”, “outlined” (default), or “standard”:

pmui.FlexBox(
    pmui.TimePicker(label='Filled', variant="filled"),
    pmui.TimePicker(label='Outlined', variant="outlined"),
    pmui.TimePicker(label='Standard', variant="standard"),
    height=360
)

Size Options

The size parameter allows you to control the visual size and density of the TimePicker input field. Choose from “small”, “medium” (default), or “large”:

pmui.FlexBox(
    *[pmui.TimePicker(label=size, size=size) for size in pmui.TimePicker.param.size.objects]
)

Icon Labels

Material icon tokens like :material/zoom_out_map: render as icons in labels and option labels.

icon_label_picker = pmui.TimePicker(label=":material/zoom_out_map: Meeting time", value="09:30")

icon_label_picker

API Reference

The TimePicker widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

pmui.TimePicker(label='TimePicker').api(jslink=True)

References

Panel Documentation:

• How-to guides on interactivity - Learn how to add interactivity to your applications using widgets

• Setting up callbacks and links - Connect parameters between components and create reactive interfaces

• Declarative UIs with Param - Build parameter-driven applications

Material UI TimePicker:

• Material UI TimePicker Reference - Complete documentation for the underlying Material UI component

• Material UI TimePicker API - Detailed API reference and configuration options

---

Download this notebook from GitHub (right-click to download).