Skip to main content

DatePicker

A Shadcn date picker: a button that opens a calendar in a popover.

When the user picks a day, value is set to a datetime at midnight UTC of that day, so value.date() gives the picked date in any time zone. A date can be assigned as well.

Example:

shad.DatePicker(on_change=lambda e: print(e.control.value))
DatePicker
DatePicker

Inherits: LayoutControl

Properties

  • close_on_select - Whether the calendar closes as soon as a day is picked.
  • description - Helper text shown below this picker.
  • error_text - An error message shown in red below this picker.
  • label - The label shown above this picker.
  • max_date - The latest day that can be picked.
  • min_date - The earliest day that can be picked.
  • placeholder - The content shown while no day is selected.
  • value - The selected day.

Events

  • on_change - Called when the user picks or clears a day.

Example​

Shadcn DatePicker​

play_arrowTry Online
import datetime

import flet_shadcn_ui as shad

import flet as ft


def main(page: ft.Page):
    page.title = "Shadcn DatePicker"

    def handle_change(e: ft.Event[shad.DatePicker]):
        value = e.control.value
        selection.value = f"Due date: {value.date() if value else 'none'}"

    selection = ft.Text("Due date: 2025-06-12")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                spacing=16,
                controls=[
                    shad.DatePicker(
                        key="due_date",
                        value=datetime.date(2025, 6, 12),
                        min_date=datetime.date(2025, 6, 1),
                        max_date=datetime.date(2025, 6, 30),
                        on_change=handle_change,
                    ),
                    selection,
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
date_picker
Opening the picker and choosing June 20

Properties​

close_on_selectclass-attributeinstance-attribute​

close_on_select: bool = True

Whether the calendar closes as soon as a day is picked.

descriptionclass-attributeinstance-attribute​

description: StrOrControl | None = None

Helper text shown below this picker.

error_textclass-attributeinstance-attribute​

error_text: str | None = None

An error message shown in red below this picker. The button border turns red too.

Set it after validating the value, and set it back to None (or an empty string) to clear the error.

labelclass-attributeinstance-attribute​

label: StrOrControl | None = None

The label shown above this picker.

It turns red while error_text is set.

max_dateclass-attributeinstance-attribute​

max_date: DateTimeValue | None = None

The latest day that can be picked.

Raises:

  • ValueError - If it is not greater than or equal to min_date, when min_date is set.

min_dateclass-attributeinstance-attribute​

min_date: DateTimeValue | None = None

The earliest day that can be picked.

Raises:

placeholderclass-attributeinstance-attribute​

placeholder: StrOrControl | None = None

The content shown while no day is selected.

If None, "Select date" is shown.

valueclass-attributeinstance-attribute​

value: DateTimeValue | None = None

The selected day.

If None, placeholder is shown.

Events​

on_changeclass-attributeinstance-attribute​

on_change: ControlEventHandler[DatePicker] | None = None

Called when the user picks or clears a day.