Skip to content

DateRangePicker

A Material-style date range picker dialog.

It can be opened by calling Page.show_dialog() method.

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

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

    def handle_change(e: ft.Event[ft.DateRangePicker]):
        page.add(
            ft.Text(
                f"Start Date changed: {e.control.start_value.strftime('%m/%d/%Y')}"
            ),
            ft.Text(f"End Date changed: {e.control.end_value.strftime('%m/%d/%Y')}"),
        )

    def handle_dismissal(e: ft.Event[ft.DialogControl]):
        page.add(ft.Text("DatePicker dismissed"))

    page.add(
        ft.Button(
            content=ft.Text("Pick date"),
            icon=ft.Icons.PHONE,
            on_click=lambda e: page.show_dialog(
                ft.DateRangePicker(
                    start_value=datetime.datetime(year=2000, month=10, day=1),
                    end_value=datetime.datetime(year=2000, month=10, day=15),
                    on_change=handle_change,
                    on_dismiss=handle_dismissal,
                )
            ),
        )
    )


ft.run(main)

basic

Properties#

barrier_color class-attribute instance-attribute #

barrier_color: ColorValue | None = None

The color of the modal barrier that darkens everything below the date picker.

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

cancel_text class-attribute instance-attribute #

cancel_text: str | None = None

The text that is displayed on the cancel button.

confirm_text class-attribute instance-attribute #

confirm_text: str | None = None

The text that is displayed on the confirm button.

current_date class-attribute instance-attribute #

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

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

date_picker_entry_mode class-attribute instance-attribute #

date_picker_entry_mode: DatePickerEntryMode = CALENDAR

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

end_value class-attribute instance-attribute #

end_value: DateTimeValue | None = None

The selected end date that the picker should display.

Defaults to current_date.

error_format_text class-attribute instance-attribute #

error_format_text: str | None = None

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

error_invalid_range_text class-attribute instance-attribute #

error_invalid_range_text: str | None = None

The message used when the date range is invalid (e.g. start date is after end date).

error_invalid_text class-attribute instance-attribute #

error_invalid_text: str | None = None

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

field_end_hint_text class-attribute instance-attribute #

field_end_hint_text: str | None = None

The text used to prompt the user when no text has been entered in the end field.

field_end_label_text class-attribute instance-attribute #

field_end_label_text: str | None = None

The label for the end date text input field.

field_start_hint_text class-attribute instance-attribute #

field_start_hint_text: str | None = None

The text used to prompt the user when no text has been entered in the start field.

field_start_label_text class-attribute instance-attribute #

field_start_label_text: str | None = None

The label for the start date text input field.

first_date class-attribute instance-attribute #

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

The earliest allowable date on the date range. Defaults to January 1, 1900.

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 date for.

keyboard_type class-attribute instance-attribute #

keyboard_type: KeyboardType = DATETIME

The type of keyboard to use for editing the text.

last_date class-attribute instance-attribute #

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

The latest allowable date on the date range. Defaults to January 1, 2050.

modal class-attribute instance-attribute #

modal: bool = False

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

save_text class-attribute instance-attribute #

save_text: str | None = None

The label on the save button for the fullscreen calendar mode.

start_value class-attribute instance-attribute #

start_value: DateTimeValue | None = None

The selected start date that the picker should display.

Defaults to current_date.

switch_to_calendar_icon class-attribute instance-attribute #

switch_to_calendar_icon: IconData | None = None

The name of the icon displayed in the corner of the dialog when date_picker_entry_mode is DatePickerEntryMode.INPUT.

Clicking on this icon changes the date_picker_entry_mode to DatePickerEntryMode.CALENDAR.

If None, Icons.CALENDAR_TODAY is used.

switch_to_input_icon class-attribute instance-attribute #

switch_to_input_icon: IconData | None = None

The name of the icon displayed in the corner of the dialog when date_picker_entry_mode is DatePickerEntryMode.CALENDAR.

Clicking on this icon changes the date_picker_entry_mode to DatePickerEntryMode.INPUT.

If None, Icons.EDIT_OUTLINED is used.

Events#

on_change class-attribute instance-attribute #

on_change: ControlEventHandler[DateRangePicker] | None = (
    None
)

Called when user clicks confirm button. start_value and end_value are updated with selected dates.

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