Plotly Dash Custom year month (yyyy-mm) picker range, using DateRangePickerInput styles.

plotly_dash_month_picker_range.py

import pandas as pd
import dash_core_components as dcc
import dash_html_components as html

def build_month_picker_range(
    from_date_id:str,
    to_date_id:str,
    from_date:str = '2015-01',
    to_date:str = pd.Timestamp.now().strftime('%Y-%m'),
    from_date_value:str = None,
    to_date_value:str = None,
):
    def build_option(ts: pd.Timestamp):
        dtstr = ts.strftime('%Y-%m')
        return dict(label=dtstr, value=dtstr)
    date_range_options = [build_option(ts) for ts in pd.date_range(pd.Timestamp(from_date), pd.Timestamp(to_date) + pd.tseries.offsets.MonthEnd(1), freq="M").tolist()]

    return html.Div([
        html.Div(
            children=dcc.Dropdown(
                id=from_date_id,
                options=date_range_options,
                value=from_date_value,
                # clearable=False,
                className="DateInput_input DateInput_input_1",
            ),
            className="DateInput DateInput_1"
        ),
        html.Div(html.Span('\U0000279C'), className="DateRangePickerInput_arrow DateRangePickerInput_arrow_1"),
        html.Div(
            children=dcc.Dropdown(
                id=to_date_id,
                options=date_range_options,
                value=to_date_value,
                # clearable=False,
                className="DateInput_input DateInput_input_1",
            ),
            className="DateInput DateInput_1"
        ),
    ], className="DateRangePickerInput DateRangePickerInput_1 DateRangePickerInput__withBorder DateRangePickerInput__withBorder_2")