DatePickerRange - Python Dash Plotly

In this Python tutorial we will learn how to work with Dates, Times, and the Dash Plotly DatePicker. Code shared below. We'll go over the properties of the DatePickerRange component that connect to a density mapbox, which gives your app users much more control. The Date Picker is a very important tool to know because you will be working with dates and times in many web applications you write.

Code:

Data:

Density Mapbox Plotly:

DataPickerRange Reference:

Supporting Docs:

Video Layout:
00:00 - What you will learn
01:09 - the Data
03:56 - Python libraries and Pandas
07:13 - DatePicker Properties
20:22 - Persistence Property

[GordonShamway]

i could watch you all day, just perfect

[LuckyPanwar]

Sir can you make a series on dash for beginners

[adityajawla]

Hi Adam! Thank a ton for such awesome tutorials. Looks nice with new look😉. Once again thanks.

[annallinaresllinares]

Hi! Do you know how to make a datepicker only with month and year?

[bharathreddy]

How do you use only month and year in calender?

[zararazwar]

Hello sir! Please help me, I can't understand how to use ""disabled_days"" feature, I want to disable weekend days.

[chen-jen]

Hi! Can you make some dash tutorials whose layout combine like dropdown, checklist and rangeslider.
And each of them has some kind of relation.
For example, each options of dropdown corresponds to different checklists.
Thanks for your awesome tutorials.

[madorster]

Thank You for this tutorials. But I have a problem with last callback, to connect date from calendar with my graph. My graphs - 3 lines Scatters. I have tried with loc, but they don't display.

[srishtigupta]

Hi, I'm trying to apply this whole thing to a dash table but getting too many errors. PLEASE HELP ME OUT!

[sinanavid]

Thanks for your great video. I have a problem with datapickerRange. the problem is whenever I click on it the data picker will be not opened and it just hidden behind the below Div which is my map.
any idea how can I fix it?
even I change the 'with_portal' parameters to True or False but in both case it does not work.

[mahipalbora]

Hi @Charming Data i really liked this video. I have a question. I want to use datepicker in my app and also want to show holidays with a different color when the calendar loads. How can i achieve this?

[andrescaceres]

Hi Adam! Is it possible to change the font size of the input boxes of de dcc.datepickerrange?

[kadircankara]

Hi Adam. Thanks for great tutorial. I have a question though. I can not find a way to color DatePickerRange's borders through a callback. I want to put green borders around the module when a date range has been selected. I was able to change the borders to red statically for its initial state, however, I can not change border color of the compoınent dynamically through a callback. I'd appreciate any help.

Thanks again for an amazing tutorial.

[GordonShamway]

would be great to see how dash would integrate with flask for example a user area, where a user can configure his entitys that he would like to visualize (from a common set)

[fernandoboltanaplumet]

Hi! Thanks for the tutorial. I need to use the date picker in a project, but I need to display it in Spanish. Do you know if it is possible to change the language of the date picker? If so, could you share how?

[felixjosesegurasguerra]

Hi i need change the background color in all component any idea?

[dairemccluskey]

Hi Adam! Loving the vids! Just a quick question, is it possible to format the date value to become 'DD/MM/YYYY' instead of 'YYYY/MM/DD'? Specifically in my update_layout() method that returns a map. Im using a csv file that holds the date in the form 'DD/MM/YYYY' and so my dataframe is coming back as null. Cheers! :)

[michaelamuller]

Hey, thanks for the awesome video! Everything worked out fine so far. But if I want to set this up for a plotly chart
df = df[(df['timestamp'] >= start_date) & (df['timestamp'] <= end_date)]

then it tells me “TypeError: Invalid comparison between dtype=datetime64[ns] and NoneType”. I already tried to use pd.to_datetime(start_date) instead, but it was the same problem.
However, it worked well here: fig.update_xaxes(dtick="M1", tickformat="%b", range=[start_date, end_date])
I’d be very happy to hear from you! Thanks for your videos!

[mayankgoel]

Thanks .. Its really informative.. Here if user wants to go back 2-3 years to pick a date then he needs to click to back button multiple times.. Is there any option where he can choose year directly from calendar?

[senolkurt]

Hi. Thanks for the great video. I couldn't find any solution to modify start - end date input boxes. Could you please help with that?