Hi Guys,
I am creating a very simple Dash App that takes start date and end date as inputs, and the app will create visuals based on the date inputs. But what I am missing is a Date Picker. I looked at the Dash Core Components from the documentation, I couldn’t find the Date Picker. Does anyone knows how to add a date picker?
This would be really helpful for me! and I absolutely love this new release from Plotly.
Thanks!!
Actually, there is a Datepicker! It is standard HTML5 datepicker (which is only supported in certain browsers, but Chrome is fine)
import datetime as dt
dcc.Input(
id='startdate-input',
type='Date',
value=dt.date.today() - dt.timedelta(days=60)
)That worked like a charm Vlad. Thank you so much!
I’d like to add AirBnB’s excellent date picker component to dash-core-components as well: https://github.com/airbnb/react-dates. Unfortunately, it’s a little bit hard to style, so we may need to make a fork of it to expose more of the styling parameters as attributes.
dash-core-components==0.12.0 includes a datepicker component (adapted from https://github.com/airbnb/react-dates). View the docs
I recommend using this component instead of the dcc.Input(type='date') component as the latter is not supported well across all browsers.
Worked like a charm. Has compatibility across all browsers which was not the case with date input.
max_date_allowed is min excluded date in reality. Date provided to that argument is not selectable. Is that intended behavior or simple off-by-one error?
Also, with clearable=False backspace can still clear date, but on action it will pop back in. I think that date field should be editable only from calendar view with clearable=False, or add something like editable? (when with_portal=True it is not reproducible as backspace does not fall ‘behind’ portal)
Thanks for the feedback @radekwlsk! I opened a couple issues in the github repo here: https://github.com/plotly/dash-core-components/issues/53, https://github.com/plotly/dash-core-components/issues/54
A post was split to a new topic: Dash TimePicker
So, the DatePicker looks totally fantastic in the demo. Unfortunately, when I try to use it on my machine, this is what happens:
Any suggestions on how to fix that? I am trying to manually install react-dates right now as I am thinking maybe it’s a dependency thing, but not sure if that will work. I will post back here if that fixes the issue. Any other ideas are welcome.
Thanks!
To clarify: that screenshot is taking up the whole page and even running off the end…
Have the same issue as above when using dash core components 0.13.0rc4 which I need to use because I have tabs in my app.
It works well on 0.14. Any idea what might be the problem with datepicker on 0.13.0rc4?
Brilliant! I installed 0.14 and it worked. Thankfully, I don’t need tabs, so this works for me at the moment. Thanks for the version info!
I rebased the tabs branch off of the latest release (which included the upload component). If you need to use tabs alongside the upload component and the datepicker, see the latest instructions here: https://github.com/plotly/dash-core-components/pull/74
Unless I’m missing something, the issue about the max_date_allowed actually being grayed out in the calendar itself doesn’t seem resolved? I saw that the issue you reference here was closed as being resolved at the time (https://github.com/plotly/dash-core-components/issues/54), but even in the docs about the element at https://dash.plotly.com/dash-core-components/datepickerrange that max_date_allowed value is grayed out and not selectable. Is that actually the expected behavior? I’m just setting max_date_allowed as my desired value + 1 to get around it, but wanted to verify if that was the intent or not.
I’m facing the same problem.
Hey @chriddyp, could you give some light on it, please?
I have solved the problem with:
(datetime.now() + timedelta(days=1)).strftime('%Y-%m-%d')
but it seems more like a workaround than a good work heheh I can consider it correct?
