TimePicker

A Material-style time picker dialog.

Can be opened by calling the Page.show_dialog() method.

Depending on the entry_mode, it will show either a Dial or an Input (hour and minute text fields) for picking a time.

Example

ft.TimePicker(
    open=True,
    value=time(1, 2),
    entry_mode=ft.TimePickerEntryMode.INPUT_ONLY,
)

Time picker

Inherits: DialogControl

Properties

• barrier_color(ColorValue | None) –

  TBD

• cancel_text(str | None) –

  The text that is displayed on the cancel button.

• confirm_text(str | None) –

  The text that is displayed on the confirm button.

• entry_mode(TimePickerEntryMode | None) –

  The initial mode of time entry method for this picker.

• error_invalid_text(str | None) –

  The error message displayed below the input text field if the input is not a

• help_text(str | None) –

  The text that is displayed at the top of the header.

• hour_format(TimePickerHourFormat) –

  Defines the hour format of this time picker.

• hour_label_text(str | None) –

  The text that is displayed below the hour input text field.

• minute_label_text(str | None) –

  The text that is displayed below the minute input text field.

• modal(bool) –

  TBD

• orientation(Orientation | None) –

  The orientation of the dialog when displayed.

• value(time | None) –

  The selected time that this picker should display.

Events

• on_change(ControlEventHandler[TimePicker] | None) –

  Called when user clicks confirm button.

• on_entry_mode_change(EventHandler[TimePickerEntryModeChangeEvent] | None) –

  Called when the entry_mode is changed through the time picker dialog.

Examples

Live example

Basic Example

from datetime import time

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def handle_change(e: ft.Event[ft.TimePicker]):
        selection.value = f"Selection: {time_picker.value}"
        page.show_dialog(ft.SnackBar(f"TimePicker change: {time_picker.value}"))

    def handle_dismissal(e: ft.Event[ft.TimePicker]):
        page.show_dialog(ft.SnackBar("TimePicker dismissed!"))

    def handle_entry_mode_change(e: ft.TimePickerEntryModeChangeEvent):
        page.show_dialog(ft.SnackBar(f"Entry mode changed: {time_picker.entry_mode}"))
        print(e, e.entry_mode)

    time_picker = ft.TimePicker(
        value=time(hour=1, minute=2),
        confirm_text="Confirm",
        error_invalid_text="Time out of range",
        help_text="Pick your time slot",
        entry_mode=ft.TimePickerEntryMode.DIAL,
        on_change=handle_change,
        on_dismiss=handle_dismissal,
        on_entry_mode_change=handle_entry_mode_change,
    )

    page.add(
        ft.Button(
            content="Pick time",
            icon=ft.Icons.TIME_TO_LEAVE,
            on_click=lambda: page.show_dialog(time_picker),
        ),
        selection := ft.Text(weight=ft.FontWeight.BOLD),
    )


if __name__ == "__main__":
    ft.run(main)

Hour Formats

from datetime import time

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def get_system_hour_format():
        """Returns the current system's hour format."""
        return "24h" if page.media.always_use_24_hour_format else "12h"

    def format_time(value: time) -> str:
        """Returns a formatted time string based on TimePicker and system settings."""
        use_24h = time_picker.hour_format == ft.TimePickerHourFormat.H24 or (
            time_picker.hour_format == ft.TimePickerHourFormat.SYSTEM
            and page.media.always_use_24_hour_format
        )
        return value.strftime("%H:%M" if use_24h else "%I:%M %p")

    def handle_change(e: ft.Event[ft.TimePicker]):
        selection.value = f"Selection: {format_time(time_picker.value)}"

    time_picker = ft.TimePicker(
        value=time(hour=9, minute=30),
        help_text="Choose your meeting time",
        on_change=handle_change,
    )

    def open_picker(e: ft.Event[ft.Button]):
        choice = format_dropdown.value
        hour_format_map = {
            "system": ft.TimePickerHourFormat.SYSTEM,
            "12h": ft.TimePickerHourFormat.H12,
            "24h": ft.TimePickerHourFormat.H24,
        }
        time_picker.hour_format = hour_format_map[choice]
        page.show_dialog(time_picker)

    page.add(
        ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                format_dropdown := ft.Dropdown(
                    label="Hour format",
                    value="system",
                    width=260,
                    key="dd",
                    options=[
                        ft.DropdownOption(
                            key="system",
                            text=f"System default ({get_system_hour_format()})",
                        ),
                        ft.DropdownOption(key="12h", text="12-hour clock"),
                        ft.DropdownOption(key="24h", text="24-hour clock"),
                    ],
                ),
                ft.Button(
                    "Open TimePicker",
                    icon=ft.Icons.SCHEDULE,
                    on_click=open_picker,
                ),
            ],
        ),
        selection := ft.Text(weight=ft.FontWeight.BOLD),
    )


if __name__ == "__main__":
    ft.run(main)

Properties

barrier_color class-attribute instance-attribute

barrier_color: ColorValue | None = None

TBD

cancel_text class-attribute instance-attribute

cancel_text: str | None = None

The text that is displayed on the cancel button.

The default value is "Cancel".

confirm_text class-attribute instance-attribute

confirm_text: str | None = None

The text that is displayed on the confirm button.

The default value is "OK".

entry_mode class-attribute instance-attribute

entry_mode: TimePickerEntryMode | None = None

The initial mode of time entry method for this picker.

Defaults to TimePickerEntryMode.DIAL.

error_invalid_text class-attribute instance-attribute

error_invalid_text: str | None = None

The error message displayed below the input text field if the input is not a valid hour/minute.

The default value is "Enter a valid time".

help_text class-attribute instance-attribute

help_text: str | None = None

The text that is displayed at the top of the header.

This is used to indicate to the user what they are selecting a time for. The default value is "Enter time".

hour_format class-attribute instance-attribute

hour_format: TimePickerHourFormat = SYSTEM

Defines the hour format of this time picker.

hour_label_text class-attribute instance-attribute

hour_label_text: str | None = None

The text that is displayed below the hour input text field.

The default value is "Hour".

minute_label_text class-attribute instance-attribute

minute_label_text: str | None = None

The text that is displayed below the minute input text field.

The default value is "Minute".

modal class-attribute instance-attribute

modal: bool = False

TBD

orientation class-attribute instance-attribute

orientation: Orientation | None = None

The orientation of the dialog when displayed.

value class-attribute instance-attribute

value: time | None = field(default_factory=lambda: time())

The selected time that this picker should display.

The default value is equal to the current time.

Events

on_change class-attribute instance-attribute

on_change: ControlEventHandler[TimePicker] | None = None

Called when user clicks confirm button.

value property is updated with selected time. Additionally, the data property of the event handler argument also contains the selected time.

on_entry_mode_change class-attribute instance-attribute

on_entry_mode_change: (
    EventHandler[TimePickerEntryModeChangeEvent] | None
) = None

Called when the entry_mode is changed through the time picker dialog.