# DateRangePicker - How to Quickly Toggle Between Years in Calendar

**URL:** <https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077>\
**Category:** Dash Python\
**Created:** [May 7, 2020, 11:35pm UTC](https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077 "2020-05-07T23:35:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bicachu](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@bicachu](https://community.plotly.com/u/bicachu)\
**Post date:** [May 7, 2020, 11:35pm UTC](https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077/1 "2020-05-07T23:35:45Z")

</div>

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:

```auto
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')

```

---

<div class="post-metadata">

**Author:** ![sweetdream](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@sweetdream](https://community.plotly.com/u/sweetdream)\
**Post date:** [June 19, 2024, 9:32pm UTC](https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077/2 "2024-06-19T21:32:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CNFeffery](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@CNFeffery](https://community.plotly.com/u/CNFeffery)\
**Post date:** [June 20, 2024, 9:38am UTC](https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077/3 "2024-06-20T09:38:12Z")

</div>

Easily with AntdDateRangePicker in feffery-antd-components:

![demo](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/c/6c931b052264b65fd149f9e922d7422c8afbcaf5.gif)

```python
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](https://fac.feffery.tech/AntdDateRangePicker)

---

<div class="post-metadata">

**Author:** ![guidocioni](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/guidocioni/32/31836_2.png) [@guidocioni](https://community.plotly.com/u/guidocioni)\
**Post date:** [June 21, 2024, 7:23am UTC](https://community.plotly.com/t/daterangepicker-how-to-quickly-toggle-between-years-in-calendar/39077/4 "2024-06-21T07:23:04Z")

</div>

The date picker in Matine component ([Dash](https://www.dash-mantine-components.com/components/datepicker)) allows you to “zoom out” quickly between different years.