TimePicker

A Material-style time picker dialog.

Can be opened by calling page.show_dialog() method.

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

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

Time picker

Inherits: DialogControl

Properties

• barrier_color(ColorValue | None) –

  TBD

• cancel_text(str | None) –

  The text that is displayed on the cancel button. The default value is "Cancel".

• confirm_text(str | None) –

  The text that is displayed on the confirm button. The default value is "OK".

• 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_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.

• time_picker_entry_mode(TimePickerEntryMode | None) –

  The initial mode of time entry method for the time picker dialog.

• value(time | None) –

  The selected time that the picker should display. The default value is equal

Events

• on_change(ControlEventHandler[TimePicker] | None) –

  Called when user clicks confirm button. value property is updated with selected

• on_entry_mode_change(EventHandler[TimePickerEntryModeChangeEvent] | None) –

  Called when the time_picker_entry_mode is changed.

Examples

Live example

Basic Example

import flet as ft
from datetime import time


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

    def handle_change(e: ft.Event[ft.TimePicker]):
        page.add(ft.Text(f"TimePicker change: {time_picker.value}"))

    def handle_dismissal(e: ft.Event[ft.TimePicker]):
        page.add(ft.Text(f"TimePicker dismissed: {time_picker.value}"))

    def handle_entry_mode_change(e: ft.TimePickerEntryModeChangeEvent):
        page.add(ft.Text(f"TimePicker Entry mode changed to {e.entry_mode}"))

    time_picker = ft.TimePicker(
        value=time(1, 2),
        confirm_text="Confirm",
        error_invalid_text="Time out of range",
        help_text="Pick your time slot",
        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),
        )
    )


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".

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_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.

time_picker_entry_mode class-attribute instance-attribute

time_picker_entry_mode: TimePickerEntryMode | None = None

The initial mode of time entry method for the time picker dialog.

Defaults to TimePickerEntryMode.DIAL.

value class-attribute instance-attribute

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

The selected time that the 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. e.data also contains the selected time.

on_entry_mode_change class-attribute instance-attribute

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

Called when the time_picker_entry_mode is changed.