[Fixed] DatePicker widget position

Bug Reports
#1

What I’m trying to do:
My are reporting an issue, where the DatePicker component opens in a position, which makes some of the widget go out-out-bounds of the browser window.
No scrollbar appears, so it is not possible to reach the buttons.

Screenshot from my attempt to recreate the issue:

image
image837×492 48.4 KB

My users are telling me, that it can get so bad that half of the widget is not visible.

A temporary solution, is to zoom out in the browser, but I need a long term solution.

What I’ve tried and what’s not working:
After browsing the forums, and stackoverflow, I found something, that may be a solution, by editing the pickerPosition attribute of the component:

    anvil.js.call('position_datepicker')

    function position_datepicker() {
        $('.daterangepicker').pickerPosition("top-left");
    };

I can not get it to work - either because I cam not accessing the correct DOM element, or I have the javascript function wrong.

Any suggestions on how to fix the issue?

Either by making the component open “upwards”, or by ensuring, that the componet stays within the browser window.

1 Like
Error - Datepicker widget position 2.0
#2

Thanks for the report. (moved to bug reports)

We’ll get that fixed.

In the mean time here’s a hack you can use to temporarily get a specific datepicker to drop up

from anvil.js import get_dom_node

...
        dp_node = get_dom_node(self.date_picker_1)
        dp_input = dp_node.firstElementChild
        dp_input.classList.add("dropup")
        self.date_picker_1.pick_time = True # trigger a refresh of the component

I’ll update this thread when the above hack is no longer necessary.

You may also find that this custom component is worth looking at: Mobile friendly date/time picker

1 Like
#3

Thank you for the quick response Stu!

Just tested your hack, and it works flawlessly.

1 Like
#4

You should now be ok to remove the hack

3 Likes
#5

I was going to say that I’ve had some negative feedback on this issue too. Thanks in advance for fixing it.

2 Likes