Maybe this will help:
I used a combination of a DateRangePicker and RangeSlider object where the RangeSlider resembles the amount of unique occurrences in the pandas TimeStamp range, sorted by date. I did not add any values on the RangeSlider object for now but you could show the dates/month by using the index number presented in the RangeSlider to index the Pandas TimeStamp Series.
dcc.DatePickerRange(
id='datepickerrange',
start_date=df['Date'].min().date(),
end_date=df['Date'].max().date(),
min_date_allowed=df['Date'].min().date(),
max_date_allowed=df['Date'].max().date(),
display_format='D MMM YYYY'
),
dcc.RangeSlider(
id='rangeslider',
min=0,
max=df['Date'].nunique()-1,
value=[0, df['Date'].nunique()-1],
allowCross=False
)
@app.callback(Output('datepickerrange', 'start_date'),
[Input('df', 'children'),
Input('rangeslider', 'value')])
def update_daterangestart(df, rangeslider_value):
df= pd.read_json(sorties, orient='split')
return np.sort(df['Date'].dt.date.unique())[rangeslider_value[0]]
@app.callback(Output('top10-datepickerrange', 'end_date'),
[Input('df', 'children'),
Input('top10-rangeslider', 'value')])
def update_daterangeend(df, rangeslider_value):
df = pd.read_json(sorties, orient='split')
return np.sort(df['Date'].dt.date.unique())[rangeslider_value[1]]
Here, my DataFrame df is stored as a hidden div: html.Div(id=‘df’, style={‘display’: ‘none’}, children=df.to_json(date_format=‘iso’, orient=‘split’))
I still want to add the function to also update the position of the RangeSlider once the DatePicker is changed but this normally causes a never-ending loop of updates. Therefore I need to add the no update function once the value is the same as it was before: I want to create a conditional callback in dash, is it possible?. But if anyone already managed to do so, please let me know!