CupertinoDatePickerMode

Different display modes of CupertinoDatePicker.

Inherits: Enum

Properties

• DATE –

  Mode that shows the date in month, day of month, and year.

• DATE_AND_TIME –

  Mode that shows the date as day of the week, month, day of month and

• MONTH_YEAR –

  Mode that shows the date in month and year.

• TIME –

  Mode that shows the date in hour, minute, and (optional) an AM/PM designation.

Examples

Showcase

from datetime import datetime

import flet as ft


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

    def showcase_card(mode: ft.CupertinoDatePickerMode) -> ft.Container:
        def open_picker(_):
            picker = ft.CupertinoDatePicker(
                date_picker_mode=mode,
                value=datetime(2024, 7, 13, 16, 14),
                use_24h_format=True,
            )
            page.show_dialog(
                ft.CupertinoBottomSheet(
                    content=picker,
                    height=216,
                    padding=ft.Padding.only(top=6),
                )
            )

        return ft.Container(
            width=320,
            padding=12,
            border=ft.Border.all(1, ft.Colors.RED),
            border_radius=10,
            bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
            content=ft.Column(
                spacing=8,
                controls=[
                    ft.Text(mode.name, weight=ft.FontWeight.BOLD),
                    ft.Button(
                        "Open picker",
                        icon=ft.CupertinoIcons.CALENDAR,
                        on_click=open_picker,
                    ),
                ],
            ),
        )

    page.appbar = ft.AppBar(title="CupertinoDatePickerMode Showcase")
    page.add(
        ft.Text("Open each mode in CupertinoBottomSheet to compare behavior."),
        ft.Row(
            wrap=True,
            spacing=12,
            expand=True,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[showcase_card(mode) for mode in ft.CupertinoDatePickerMode],
        ),
    )


ft.run(main)

Properties

DATE = 'date' class-attribute instance-attribute

Mode that shows the date in month, day of month, and year. Name of month is spelled in full. Column order is subject to internationalization.

Example: July | 13 | 2012

DATE_AND_TIME = 'dateAndTime' class-attribute instance-attribute

Mode that shows the date as day of the week, month, day of month and the time in hour, minute, and (optional) an AM/PM designation. The AM/PM designation is shown only if CupertinoDatePicker does not use 24h format, i.e. if use_24h_format is False. Column order is subject to internationalization.

Example: Fri Jul 13 | 4 | 14 | PM

MONTH_YEAR = 'monthYear' class-attribute instance-attribute

Mode that shows the date in month and year. Name of month is spelled in full. Column order is subject to internationalization.

Example: July | 2012

TIME = 'time' class-attribute instance-attribute

Mode that shows the date in hour, minute, and (optional) an AM/PM designation. The AM/PM designation is shown only if CupertinoDatePicker does not use 24h format, i.e. if use_24h_format is False. Column order is subject to internationalization.

Example: 4 | 14 | PM