Skip to main content

DatePicker

A Material-style date picker dialog.

It can be opened by calling flet.Page.show_dialog method.

Depending on the entry_mode, it will show either a Calendar or an Input (TextField) for picking a date.

Inherits: DialogControl

Properties

Events

Examples​

Live example

Basic Example​

import datetime

import flet as ft


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

    messages = ft.Column(tight=True)

    def handle_change(e: ft.Event[ft.DatePicker]):
        messages.controls.append(
            ft.Text(f"Date changed: {e.control.value.strftime('%m/%d/%Y')}")
        )

    def handle_dismissal(_: ft.Event[ft.DialogControl]):
        messages.controls.append(ft.Text("DatePicker dismissed"))

    today = datetime.datetime.now()

    picker = ft.DatePicker(
        first_date=datetime.datetime(year=today.year - 1, month=1, day=1),
        last_date=datetime.datetime(year=today.year + 1, month=today.month, day=20),
        on_change=handle_change,
        on_dismiss=handle_dismissal,
    )

    page.add(
        ft.SafeArea(
            content=ft.Column(
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    ft.Button(
                        icon=ft.Icons.CALENDAR_MONTH,
                        on_click=lambda _: page.show_dialog(picker),
                        content="Pick date",
                    ),
                    messages,
                ],
            ),
        )
    )


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

Properties​

barrier_colorclass-attributeinstance-attribute​

barrier_color: Optional[ColorValue] = None

The color of the modal barrier that darkens everything below this picker's dialog.

If None, the flet.DialogTheme.barrier_color is used. If it is also None, then flet.Colors.BLACK_54 is used.

cancel_textclass-attributeinstance-attribute​

cancel_text: Optional[str] = None

The text that is displayed on the cancel button.

Defaults to "Cancel".

confirm_textclass-attributeinstance-attribute​

confirm_text: Optional[str] = None

The text that is displayed on the confirm button.

Defaults to "OK".

current_dateclass-attributeinstance-attribute​

current_date: DateTimeValue = field(default_factory=(lambda: datetime.now()))

The date representing today. It will be highlighted in the day grid.

date_picker_modeclass-attributeinstance-attribute​

date_picker_mode: DatePickerMode = DatePickerMode.DAY

Initial display mode of this picker.

entry_modeclass-attributeinstance-attribute​

entry_mode: DatePickerEntryMode = DatePickerEntryMode.CALENDAR

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

error_format_textclass-attributeinstance-attribute​

error_format_text: Optional[str] = None

The error message displayed below the text field if the entered date is not in the correct format.

Defaults to "Invalid format".

error_invalid_textclass-attributeinstance-attribute​

error_invalid_text: Optional[str] = None

The error message displayed below the text field if the date is earlier than first_date or later than last_date.

Defaults to "Out of range".

field_hint_textclass-attributeinstance-attribute​

field_hint_text: Optional[str] = None

The hint text displayed in the text field.

The default value is the date format string that depends on your locale. For example, 'mm/dd/yyyy' for en_US.

field_label_textclass-attributeinstance-attribute​

field_label_text: Optional[str] = None

The label text displayed in the TextField.

If None, defaults to the words representing the date format string. For example, 'Month, Day, Year' for en_US.

Defaults to "Enter Date".

first_dateclass-attributeinstance-attribute​

first_date: DateTimeValue = field(default_factory=(lambda: datetime(year=1900, month=1, day=1)))

The earliest allowable date that the user can select.

Defaults to January 1, 1900.

help_textclass-attributeinstance-attribute​

help_text: Optional[str] = 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 date for.

Defaults to "Select date".

inset_paddingclass-attributeinstance-attribute​

inset_padding: PaddingValue = field(default_factory=(lambda: Padding.symmetric(horizontal=16.0, vertical=24.0)))

The amount of padding added to view_insets of the flet.Page.media on the outside of this picker's dialog.

This defines the minimum space between the screen's edges and the dialog.

keyboard_typeclass-attributeinstance-attribute​

keyboard_type: KeyboardType = KeyboardType.DATETIME

The type of keyboard to use for editing the text.

last_dateclass-attributeinstance-attribute​

last_date: DateTimeValue = field(default_factory=(lambda: datetime(year=2050, month=1, day=1)))

The latest allowable date that the user can select.

Defaults to January 1, 2050.

localeclass-attributeinstance-attribute​

locale: Optional[Locale] = None

The locale for this date picker dialog. It is intended for (rare) cases where this dialog should be localized differently from the rest of the page.

It overrides the locale used by the page (see flet.Page.locale_configuration), but does not participate in page-level locale resolution.

If set to None (the default) or an inexistent/unsupported locale, the current_locale of the flet.Page.locale_configuration is used as fallback.

modalclass-attributeinstance-attribute​

modal: bool = False

Whether this date picker cannot be dismissed by clicking the area outside of it.

switch_to_calendar_iconclass-attributeinstance-attribute​

switch_to_calendar_icon: Optional[IconData] = None

The icon displayed in the corner of this picker's dialog when entry_mode is flet.DatePickerEntryMode.INPUT.

Clicking on this icon changes the entry_mode to flet.DatePickerEntryMode.CALENDAR.

If None, defaults to Icons.CALENDAR_TODAY.

switch_to_input_iconclass-attributeinstance-attribute​

switch_to_input_icon: Optional[IconData] = None

The icon displayed in the corner of this picker's dialog when entry_mode is flet.DatePickerEntryMode.CALENDAR.

Clicking on icon changes the entry_mode to flet.DatePickerEntryMode.INPUT.

If None, defaults to Icons.EDIT_OUTLINED.

valueclass-attributeinstance-attribute​

value: Optional[DateTimeValue] = None

The selected date that the picker should display.

Defaults to current_date.

Events​

on_changeclass-attributeinstance-attribute​

on_change: Optional[ControlEventHandler[DatePicker]] = None

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

The data property of the event handler argument contains the selected date.

on_entry_mode_changeclass-attributeinstance-attribute​

on_entry_mode_change: Optional[EventHandler[DatePickerEntryModeChangeEvent]] = None

Called when the entry_mode is changed from the user interface.