Date picker

Overview

Date picker allows the user to enter free text or select a date from a calendar widget. and is based on the Angular Material datapicker component.

Examples

from dataclasses import field
from datetime import date

import mesop as me


@me.stateclass
class State:
  picked_date: date | None = field(default_factory=lambda: date(2024, 10, 1))


def on_load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  path="/date_picker",
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  on_load=on_load,
)
def app():
  state = me.state(State)
  with me.box(
    style=me.Style(
      display="flex",
      flex_direction="column",
      gap=15,
      padding=me.Padding.all(15),
    )
  ):
    me.date_picker(
      label="Date",
      disabled=False,
      placeholder="9/1/2024",
      required=True,
      value=state.picked_date,
      readonly=False,
      hide_required_marker=False,
      color="accent",
      float_label="always",
      appearance="outline",
      on_change=on_date_change,
    )

    me.text("Selected date: " + _render_date(state.picked_date))


def on_date_change(e: me.DatePickerChangeEvent):
  state = me.state(State)
  state.picked_date = e.date


def _render_date(maybe_date: date | None) -> str:
  if maybe_date:
    return maybe_date.strftime("%Y-%m-%d")
  return "None"

API

date_picker

Creates a date picker component.

PARAMETER	DESCRIPTION
label	Label for date picker input. TYPE: str DEFAULT: ''
on_change	Fires when a valid date value has been specified through Calendar date selection or user input blur. TYPE: Callable[[DatePickerChangeEvent], Any] | None DEFAULT: None
appearance	The form field appearance style. TYPE: Literal['fill', 'outline'] DEFAULT: 'fill'
style	Style for date picker input. TYPE: Style | None DEFAULT: None
disabled	Whether it's disabled. TYPE: bool DEFAULT: False
placeholder	Placeholder value. TYPE: str DEFAULT: ''
required	Whether it's required. TYPE: bool DEFAULT: False
value	Initial value. TYPE: date | None DEFAULT: None
readonly	Whether the element is readonly. TYPE: bool DEFAULT: False
hide_required_marker	Whether the required marker should be hidden. TYPE: bool DEFAULT: False
color	The color palette for the form field. TYPE: Literal['primary', 'accent', 'warn'] DEFAULT: 'primary'
float_label	Whether the label should always float or float as the user types. TYPE: Literal['always', 'auto'] DEFAULT: 'auto'
subscript_sizing	Whether the form field should reserve space for one line of hint/error text (default) or to have the spacing grow from 0px as needed based on the size of the hint/error content. Note that when using dynamic sizing, layout shifts will occur when hint/error text changes. TYPE: Literal['fixed', 'dynamic'] DEFAULT: 'fixed'
hint_label	Text for the form field hint. TYPE: str DEFAULT: ''
key	The component key. TYPE: str | None DEFAULT: None

DatePickerChangeEvent dataclass

Bases: MesopEvent

Represents a date picker change event.

This event will only fire if a valid date is specified.

ATTRIBUTE	DESCRIPTION
date	Date value TYPE: date
key	key of the component that emitted this event. TYPE: str