DateRangePicker

The DateRangePicker component allows users to select a range of dates with a calendar interface. Below are examples of how to use it in Python Dash.

Dash Example with availableDates

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

dates = ["2024-01-01", "2024-01-08", "2024-01-15", "2024-01-22", "2024-01-29"]

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.DateRangePicker(
                id="daterange-picker",
                labelStart="Start Date",
                labelEnd="End Date",
                availableDates=dates,
            ),
            html.Div(id="output")
        ])
    ]
)

@app.callback(
    dash.Output("output", "children"),
    dash.Input("daterange-picker", "startDate"),
    dash.Input("daterange-picker", "endDate")
)
def update_output(start_date, end_date):
    if not start_date or not end_date:
        return "No range selected"
    return f"Selected range: {start_date} to {end_date}"

if __name__ == "__main__":
    app.run_server(debug=True)

Dash Example without availableDates

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.DateRangePicker(
                id="daterange-picker",
                labelStart="Start Date",
                labelEnd="End Date",
            ),
            html.Div(id="output")
        ])
    ]
)

@app.callback(
    dash.Output("output", "children"),
    dash.Input("daterange-picker", "startDate"),
    dash.Input("daterange-picker", "endDate")
)
def update_output(start_date, end_date):
    if not start_date or not end_date:
        return "No range selected"
    return f"Selected range: {start_date} to {end_date}"

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the main props available for the DateRangePicker component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
labelStart	string	'Start Date'	Label for the start date picker.
labelEnd	string	'End Date'	Label for the end date picker.
availableDates	array of strings (UTC format)	null	List of selectable dates in UTC (e.g., "2024-10-10").
startDate	string (UTC format)	null	Initial selected start date in UTC (e.g., "2024-10-10").
endDate	string (UTC format)	null	Initial selected end date in UTC (e.g., "2024-10-10").
startPickerProps	DatePickerProps	null	Props passed to the start DatePicker.
endPickerProps	DatePickerProps	null	Props passed to the end DatePicker.
onChange	function	null	Callback triggered when the selected dates change.

---

This is a custom component built using MUI's DatePicker to handle ranges of dates. For more information on the DatePicker, refer to the MUI documentation:

MUI DatePicker Documentation

Explore our DateRangePicker in the Storybook playground:

DateRangePicker Storybook Playground