SeasonSelect

The custom SeasonSelect component is a versatile controlled component for selecting set periods, custom or Year-to-date month ranges within a year, meant to enable users to compare specific periods across years (e.g., comparing Spring season March-June across multiple years). Below are examples of how to use it in Python Dash.

import dash
from dash import html, Input, Output
import yipit_dash_mui_components as dmc

# Initialize Dash with React 18
dash._dash_renderer._set_react_version("18.2.0")
app = dash.Dash(__name__)

# Define the season options
SEASON_OPTIONS = [
    {"label": "Monthly", "value": "monthly"},
    {"label": "Quarterly", "value": "quarterly"},
    {"label": "Annually", "value": "annually"},
    {"label": "Custom", "value": "custom", "isCustom": True},
    {"label": "Year to Date", "value": "ytd", "isYTD": True},
]

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div(
            [
                dmc.SeasonSelect(
                    id="season-select",
                    label="Select Season",
                    options=SEASON_OPTIONS,
                    value="monthly",  # default selected value
                    customInitialMonth=0,  # January
                    customEndMonth=11,  # December
                    size="small",
                ),
                html.Div(id="output", style={"marginTop": "20px"}),
            ]
        )
    ]
)


@app.callback(
    Output("output", "children"),
    Input("season-select", "value"),
    Input("season-select", "customInitialMonth"),
    Input("season-select", "customEndMonth"),
)
def update_output(value, custom_initial_month, custom_end_month):
    if value == "custom":
        return f"Selected custom range: Months {custom_initial_month} to {custom_end_month}"
    return f"Selected season type: {value}"


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

Props Table

Below are the main props available for the SeasonSelect component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
value	string	undefined	The currently selected option value.
customInitialMonth	number	undefined	The initial month for custom date range selection.
customEndMonth	number	undefined	The end month for custom date range selection.
options	`{label: string, value: string, isCustom?: boolean, isYTD?: boolean}[]`	[]	The options to display in the dropdown menu.
size	'small' \| 'medium'	'medium'	The size of the button.
color	'inherit' \| 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning'	'primary'	Defines the button color.
variant	'text' \| 'outlined' \| 'contained'	'text'	Defines the style of the button.
cancelButtonText	string	'Cancel'	The text to display on the cancel button for custom selection.
applyButtonText	string	'Apply'	The text to display on the apply button for custom selection.

Props Table​

Props Table