Skip to main content

CupertinoDatePicker

An iOS-styled date picker.

Inherits: LayoutControl

Properties

Events

  • on_change - Called when the selected date and/or time changes.

Examples​

Live example

Basic Example​

from datetime import datetime

import flet as ft


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

    message = ft.Text("Chosen Time:")

    def handle_date_change(e: ft.Event[ft.CupertinoDatePicker]):
        message.value = f"Chosen Date: {e.control.value.strftime('%Y-%m-%d %H:%M %p')}"

    cupertino_date_picker = ft.CupertinoDatePicker(
        value=datetime.now(),
        date_picker_mode=ft.CupertinoDatePickerMode.DATE_AND_TIME,
        on_change=handle_date_change,
    )

    page.add(
        ft.SafeArea(
            content=ft.Column(
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    ft.CupertinoFilledButton(
                        on_click=lambda _: page.show_dialog(
                            ft.CupertinoBottomSheet(
                                height=216,
                                padding=ft.Padding.only(top=6),
                                content=cupertino_date_picker,
                            )
                        ),
                        content="Open CupertinoDatePicker",
                    ),
                    message,
                ],
            ),
        )
    )


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

Properties​

bgcolorclass-attributeinstance-attribute​

bgcolor: Optional[ColorValue] = None

The background color of this date picker.

date_orderclass-attributeinstance-attribute​

date_order: Optional[CupertinoDatePickerDateOrder] = None

The order in which the columns inside this picker are displayed.

Note

The final order in which the columns are displayed is also influenced by the date_picker_mode. For example, if date_picker_mode is flet.CupertinoDatePickerMode.MONTH_YEAR both flet.CupertinoDatePickerDateOrder.DAY_MONTH_YEAR and flet.CupertinoDatePickerDateOrder.MONTH_DAY_YEAR will result in the month|year order.

date_picker_modeclass-attributeinstance-attribute​

date_picker_mode: CupertinoDatePickerMode = CupertinoDatePickerMode.DATE_AND_TIME

The mode of the date picker.

first_dateclass-attributeinstance-attribute​

first_date: Optional[DateTimeValue] = None

The earliest allowable date that the user can select.

  • If set to None (the default), there is no lower date limit.
  • When not None, one can still scroll the picker to dates earlier than first_date, with the exception that the on_change will not be called. Once let go, the picker will scroll back to first_date.
Note

In flet.CupertinoDatePickerMode.TIME mode, a time becomes unselectable if the datetime produced by combining that particular time and the date part of value is earlier than last_date. So typically, first_date needs to be set to a datetime that is on the same date as value.

item_extentclass-attributeinstance-attribute​

item_extent: Number = 32.0

The uniform height of all children.

Raises:

  • ValueError - If it is not strictly greater than 0.

last_dateclass-attributeinstance-attribute​

last_date: Optional[DateTimeValue] = None

The latest allowable date that the user can select.

  • If set to None (the default), there is no upper date limit.
  • When not None, one can still scroll the picker to dates later than last_date, with the exception that the on_change will not be called. Once let go, the picker will scroll back to last_date.
Note

In flet.CupertinoDatePickerMode.TIME mode, a time becomes unselectable if the datetime produced by combining that particular time and the date part of value is later than last_date. So typically, last_date needs to be set to a datetime that is on the same date as value.

localeclass-attributeinstance-attribute​

locale: Optional[Locale] = None

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

Notes
  • The locale must be supported by Flutter's global localization delegates; otherwise the override is ignored and the control uses the page or system locale.
  • If None (the default), the page or system locale is used.

maximum_yearclass-attributeinstance-attribute​

maximum_year: Optional[int] = None

Maximum year to which the picker can be scrolled when in flet.CupertinoDatePickerMode.DATE mode.

Defaults to None - no limit.

Raises:

  • ValueError - If it is less than value year.

minimum_yearclass-attributeinstance-attribute​

minimum_year: int = 1

Minimum year to which the picker can be scrolled when in flet.CupertinoDatePickerMode.DATE mode.

Raises:

  • ValueError - If it is greater than value year.

minute_intervalclass-attributeinstance-attribute​

minute_interval: Annotated[int, V.gt(0), V.factor_of(60)] = 1

The granularity of the minutes spinner, if it is shown in the current date_picker_mode.

Raises:

  • ValueError - If it is not strictly greater than 0.
  • ValueError - If it is not a factor of 60.

show_day_of_weekclass-attributeinstance-attribute​

show_day_of_week: bool = False

Whether to show day of week alongside day.

Raises:

use_24h_formatclass-attributeinstance-attribute​

use_24h_format: bool = False

Whether to use the 24-hour time format.

If False, the 12-hour time format is used.

valueclass-attributeinstance-attribute​

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

The initial date and/or time of the picker.

Defaults to the present date and time.

Raises:

Events​

on_changeclass-attributeinstance-attribute​

on_change: Optional[ControlEventHandler[CupertinoDatePicker]] = None

Called when the selected date and/or time changes.

Will not be called if the new selected value is not valid, or is not in the range of first_date and last_date.