Date range picker

Overview

Date range picker allows the user to enter free text or select a dates 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_start_date: date | None = field(
    default_factory=lambda: date(2024, 10, 1)
  )
  picked_end_date: date | None = field(
    default_factory=lambda: date(2024, 11, 1)
  )


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


@me.page(
  path="/date_range_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_range_picker(
      label="Date Range",
      disabled=False,
      placeholder_start_date="9/1/2024",
      placeholder_end_date="10/1/2024",
      required=True,
      start_date=state.picked_start_date,
      end_date=state.picked_end_date,
      readonly=False,
      hide_required_marker=False,
      color="accent",
      float_label="always",
      appearance="outline",
      on_change=on_date_range_change,
    )

    me.text("Start date: " + _render_date(state.picked_start_date))
    me.text("End date: " + _render_date(state.picked_end_date))


def on_date_range_change(e: me.DateRangePickerChangeEvent):
  state = me.state(State)
  state.picked_start_date = e.start_date
  state.picked_end_date = e.end_date


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

API

date_range_picker

Creates a date range picker component.

PARAMETER	DESCRIPTION
label	Label for date range picker input. TYPE: str DEFAULT: ''
on_change	Fires when valid date values for both start/end have been specified through Calendar date selection or user input blur. TYPE: Callable[[DateRangePickerChangeEvent], Any] | None DEFAULT: None
appearance	The form field appearance style. TYPE: Literal['fill', 'outline'] DEFAULT: 'fill'
style	Style for date range picker input. TYPE: Style | None DEFAULT: None
disabled	Whether it's disabled. TYPE: bool DEFAULT: False
placeholder_start_date	Start date placeholder value. TYPE: str DEFAULT: ''
placeholder_end_date	End date placeholder value. TYPE: str DEFAULT: ''
required	Whether it's required. TYPE: bool DEFAULT: False
start_date	Start date initial value. TYPE: date | None DEFAULT: None
end_date	End date 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

DateRangePickerChangeEvent dataclass

Bases: MesopEvent

Represents a date range picker change event.

This event will only fire if start and end dates are valid dates.

ATTRIBUTE	DESCRIPTION
start_date	Start date TYPE: date
end_date	End date TYPE: date
key	key of the component that emitted this event. TYPE: str