DatePicker
The DatePicker component allows users to select a date from a calendar interface. Below are examples of how to use it in Python Dash.
import dash
from dash import html, Input, Output, State
import yipit_dash_mui_components as dmc
from datetime import datetime, timedelta
dash._dash_renderer._set_react_version('18.2.0')
# DatePicker Example
today = datetime.today()
min_date = (today - timedelta(days=30)).strftime("%Y-%m-%d") # 30 days ago
max_date = (today + timedelta(days=30)).strftime("%Y-%m-%d") # 30 days from now
# Define shortcuts
shortcuts = [
{
"label": "Today",
"value": today.strftime("%Y-%m-%d"),
"sx": {
"color": "#1976d2",
"fontWeight": "bold"
}
},
{
"label": "Yesterday",
"value": (today - timedelta(days=1)).strftime("%Y-%m-%d"),
"sx": {
"color": "#2196f3"
}
},
{
"label": "A week ago",
"value": (today - timedelta(days=7)).strftime("%Y-%m-%d"),
"sx": {
"color": "#9c27b0"
}
},
{
"label": "Start of Month",
"value": today.replace(day=1).strftime("%Y-%m-%d")
}
]
# Define month shortcuts
month_shortcuts = [
{
"label": "Current Month",
"value": today.strftime("%Y-%m-%d"),
"sx": {
"color": "#1976d2",
"fontWeight": "bold"
}
},
{
"label": "Last Month",
"value": (today.replace(day=1) - timedelta(days=1)).strftime("%Y-%m-%d"),
"sx": {
"color": "#2196f3"
}
},
{
"label": "3 Months Ago",
"value": (today.replace(day=1) - timedelta(days=90)).strftime("%Y-%m-%d"),
"sx": {
"color": "#9c27b0"
}
},
{
"label": "6 Months Ago",
"value": (today.replace(day=1) - timedelta(days=180)).strftime("%Y-%m-%d")
}
]
app = dash.Dash(__name__)
app.layout = html.Div([
dmc.YipitMUIProvider(
id='theme-provider',
mode='light',
children=[
# Basic DatePicker
dmc.Grid(
children=[
dmc.DatePicker(
label="Basic DatePicker",
value=today.strftime("%Y-%m-%d"),
size="small",
),
dmc.DatePicker(
label="DatePicker with min/max dates",
value=today.strftime("%Y-%m-%d"),
minDate=min_date,
maxDate=max_date,
),
],
size="auto",
),
# DatePicker with custom views
dmc.Box(
dmc.DatePicker(
label="DatePicker with custom views",
value=today.strftime("%Y-%m-%d"),
views=['year', 'month', 'day'],
openTo='year',
),
sx={"margin": 4, "width": 300}
),
# Month/Year only picker
dmc.Box(
dmc.DatePicker(
label="Month/Year Picker",
value=today.strftime("%Y-%m-%d"),
views=['year', 'month'],
openTo='year',
),
sx={"margin": 4, "width": 300}
),
# DatePicker with shortcuts
dmc.Box(
dmc.DatePicker(
label="DatePicker with shortcuts",
value=today.strftime("%Y-%m-%d"),
shortcuts=shortcuts,
minDate=min_date,
maxDate=max_date,
),
sx={"margin": 4, "width": 300}
),
# Month Picker with shortcuts
dmc.Box(
dmc.DatePicker(
label="Month Picker with shortcuts",
value=today.strftime("%Y-%m-%d"),
views=['year', 'month'],
openTo='month',
shortcuts=month_shortcuts,
),
sx={"margin": 4, "width": 300}
),
# Clearable DatePicker
dmc.Box(
dmc.DatePicker(
label="Clearable DatePicker",
value=today.strftime("%Y-%m-%d"),
clearable=True,
),
sx={"margin": 4, "width": 300}
),
# Clearable DatePicker with shortcuts
dmc.Box(
dmc.DatePicker(
label="Clearable DatePicker with shortcuts",
value=today.strftime("%Y-%m-%d"),
clearable=True,
shortcuts=shortcuts,
),
sx={"margin": 4, "width": 300}
),
# Clearable Month Picker with shortcuts
dmc.Box(
dmc.DatePicker(
label="Clearable Month Picker with shortcuts",
value=today.strftime("%Y-%m-%d"),
views=['year', 'month'],
openTo='month',
clearable=True,
shortcuts=month_shortcuts,
hideCalendarIcon=True,
),
sx={"margin": 4, "width": 300}
),
# Dynamic Calendar Icon Example
dmc.Box(
dmc.DatePicker(
id='dynamic-calendar-icon-picker',
label="DatePicker",
views=['year', 'month'],
value=None,
clearable=True,
hideCalendarIcon=False,
size="small",
),
sx={"margin": 4, "width": 150}
),
# Dynamic Calendar Icon Example
dmc.Box(
dmc.DatePicker(
id='dynamic-calendar-icon-picker',
label="DatePicker",
views=['year', 'month'],
value=None,
clearable=True,
hideCalendarIcon=False,
size="small",
dateFormat="MM", # This will show the month as digits (1-12)
),
sx={"margin": 4, "width": 150}
),
]
)
])
# Callback to update hideCalendarIcon based on value
@app.callback(
Output('dynamic-calendar-icon-picker', 'hideCalendarIcon'),
Input('dynamic-calendar-icon-picker', 'value')
)
def update_calendar_icon(value):
return bool(value)
if __name__ == '__main__':
app.run_server(debug=True)
Props Table
Below are the main props available for the DatePicker component:
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | null | Unique ID for Dash callbacks. |
| label | string | null | Label displayed above the date picker. |
| value | string (UTC format) | null | Initial selected date in UTC format. |
| minDate | string (UTC format) | null | Minimum selectable date in UTC format. |
| maxDate | string (UTC format) | null | Maximum selectable date in UTC format. |
| onChange | function | null | Callback triggered when the selected date changes. |
| views | array of strings | null | The views to display in the date picker. |
| openTo | string | null | The view to open the date picker to. |
| shortcuts | {label: string, value: string, sx: object} | null | Custom shortcuts to display in the date picker. |
| clearable | boolean | false | Whether the date picker is clearable. |
| dateFormat | string | undefined | The format of the date picker information. The underlying MUI component expects a specific date time string format. |
For the full list of props, refer to the official MUI documentation, as this component is based on MUI:
Date Format examples
The following formats are supported:
MM: Month as digits (1-12)MMM: Month as short name (Jan, Feb, etc.)MMMM: Month as long name (January, February, etc.)dd: Day as digits (01-31)d: Day as digits (1-31)yyyy: Year as digits (2024)yy: Year as last two digits (24)