DateRangePicker - How to Quickly Toggle Between Years in Calendar

Dash Python
1

Hello!

With the DataRangerPicker component, is there any way to quickly navigate through different years in the pop-up calendar that comes up for a user input for start/end dates? Or does such functionality not exist currently?

Reason I’m asking is that it can be tedious if you have a large date range in terms of years such as 2010-2020 and have to go through it month by month. The alternative would be to allow a user to input their own dates or use a date slider instead though I’m wondering if there’s a workaround or way to do this through the calendar.

If it helps, I have some sample code from a current approach I’ve been messing around with:

dcc.DatePickerRange(id='date-selector',
                    min_date_allowed=dt(2010, 1, 1),
                    max_date_allowed=dt(2020, 4, 1),
                    start_date_placeholder_text='Start Period',
                    end_date_placeholder_text='End Period',
                    calendar_orientation='horizontal')
1 Like
2

Hello,
Did you find any solution meanwhile ? I have the same issue…
Patrick

3

Easily with AntdDateRangePicker in feffery-antd-components:

demo

import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdDateRangePicker(
            locale="en-us", placeholder=["start date", "end date"], style={"width": 220}
        )
    ],
    style={"padding": 100},
)

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

related document:

https://fac.feffery.tech/AntdDateRangePicker

4

The date picker in Matine component (Dash) allows you to “zoom out” quickly between different years.