CupertinoDatePicker

An iOS-styled date picker.

Inherits: LayoutControl

Properties

• bgcolor(ColorValue | None) –

  The background color of this date picker.

• date_order(CupertinoDatePickerDateOrder | None) –

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

• date_picker_mode(CupertinoDatePickerMode) –

  The mode of the date picker.

• first_date(DateTimeValue | None) –

  The earliest allowable date that the user can select.

• item_extent(Number) –

  The uniform height of all children.

• last_date(DateTimeValue | None) –

  The latest allowable date that the user can select.

• maximum_year(int | None) –

  Maximum year to which the picker can be scrolled when in

• minimum_year(int) –

  Minimum year to which the picker can be scrolled when in

• minute_interval(int) –

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

• show_day_of_week(bool) –

  Whether to show day of week alongside day.

• use_24h_format(bool) –

  Whether to use the 24-hour time format.

• value(DateTimeValue) –

  The initial date and/or time of the picker.

Events

• on_change(ControlEventHandler[CupertinoDatePicker] | None) –

  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

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

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

    page.add(
        ft.CupertinoFilledButton(
            content="Open CupertinoDatePicker",
            on_click=lambda e: page.show_dialog(
                ft.CupertinoBottomSheet(
                    content=cupertino_date_picker,
                    height=216,
                    padding=ft.Padding.only(top=6),
                )
            ),
        ),
        message := ft.Text("Chosen Time: "),
    )


ft.run(main)

Properties

bgcolor

bgcolor: ColorValue | None = None

The background color of this date picker.

date_order

date_order: CupertinoDatePickerDateOrder | None = 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 CupertinoDatePickerMode.MONTH_YEAR both CupertinoDatePickerDateOrder.DAY_MONTH_YEAR and CupertinoDatePickerDateOrder.MONTH_DAY_YEAR will result in the month|year order.

date_picker_mode

date_picker_mode: CupertinoDatePickerMode = DATE_AND_TIME

The mode of the date picker.

first_date

first_date: DateTimeValue | None = 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 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_extent

item_extent: Number = 32.0

The uniform height of all children.

Raises:

• ValueError –

  If item_extent is not strictly greater than 0.

last_date

last_date: DateTimeValue | None = 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 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.

maximum_year

maximum_year: int | None = None

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

Defaults to None - no limit.

Raises:

• ValueError –

  If value year is greater than maximum_year.

minimum_year

minimum_year: int = 1

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

Raises:

• ValueError –

  If value year is less than minimum_year.

minute_interval

minute_interval: int = 1

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

Note

Must be an integer factor of 60.

Raises:

• ValueError –

  If minute_interval is not a positive integer factor of 60.

show_day_of_week

show_day_of_week: bool = False

Whether to show day of week alongside day.

Raises:

• ValueError –

  If show_day_of_week is set when date_picker_mode is not CupertinoDatePickerMode.DATE.

use_24h_format

use_24h_format: bool = False

Whether to use the 24-hour time format.

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

value

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

The initial date and/or time of the picker.

It must conform to the intervals set in first_date, last_date, minimum_year, and maximum_year, else a ValueError will be raised.

Defaults to the present date and time.

Raises:

• ValueError –

  If value is before first_date or after last_date.

• ValueError –

  If value year is less than minimum_year or greater than maximum_year.

• ValueError –

  If value minute is not divisible by minute_interval.

Events

on_change

on_change: (
    ControlEventHandler[CupertinoDatePicker] | None
) = 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.