DatePicker popup position

[drewyang-datavedik]

The dcc.DatePickerSingle() is not able to define the calender popup position, by default, it's bottom. Is that possible to set 'top', 'right', 'left', 'bottom'?

Also, for those who need this feature, the alternative solution I found is to use dcc.Input(type="date").

[alexcjohnson]

Thanks @drewyang-datavedik - To clarify, do you specifically want the calendar in one of those other positions? Or is it just that sometimes the bottom position is unusable or would force the user to scroll and we should detect that and flip it to the top? It could likely be done either way or both ways (top/bottom/left/right/auto or something), I just want to understand exactly what problem you'd like to solve.

[drewyang-datavedik]

Thanks for your amazingly quick response!

My task is to put a comment box with a 'DateTimePicker' at the bottom left corner of the screen. Since there is no such 'DateTimePicker' available, I have to put a DatePickerSingle there. You are right about the case that when the calendar pops down, it goes out of the page, and I have to scroll the page down to select the date. But the dcc.Input will pop up automatically from the top of the input box.

DatePicker only pops down and goes out of the page:

dcc.Input(type='datetime-local') pops up:

---

I tested it on Chrome: Linux version: Version 81.0.4044.129 (Official Build) (64-bit) Mac version: Version 85.0.4183.121 (Official Build) (64-bit) Dash: dash==1.16.2 dash-core-components==1.12.1 dash-html-components==1.1.1 dash-renderer==1.8.2 dash-table==4.10.1

---

Also, just in case someone else getting error to show the dcc.Input(type="datetime-local"), if you run server in debug mode, make sure you set app.run_server(host='0.0.0.0', port=5000, debug=True, dev_tools_props_check=False)

[maulberto3]

I have a similar issue, so I support being able to display calendar above.

[MooSee2]

Just ran into this issue as well.