Skip to main content

CupertinoDatePickerMode

Different display modes of CupertinoDatePicker.

Inherits: enum.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 the time in hour, minute, and (optional) an AM/PM designation.
  • 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​

Cupertino Date Picker Mode showcase​

Sourceplay_arrowTry Online
from datetime import datetime

import flet as ft


def main(page: ft.Page):
    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.SafeArea(
            expand=True,
            content=ft.Column(
                controls=[
                    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
                        ],
                    ),
                ],
            ),
        )
    )


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

Properties​

DATEclass-attributeinstance-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_TIMEclass-attributeinstance-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 CupertinoDatePicker.use_24h_format is False. Column order is subject to internationalization.

Example: Fri Jul 13 | 4 | 14 | PM

MONTH_YEARclass-attributeinstance-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

TIMEclass-attributeinstance-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 CupertinoDatePicker.use_24h_format is False. Column order is subject to internationalization.

Example: 4 | 14 | PM