Datepicker time select elements not active on mobile

Wappler General Bugs
#1

Wappler Version : 6.1.1
Operating System : mac
Server Model: node
Database Type:
Hosting Type:

Expected behavior

Tapping on the select elements for time in the datepicker component should be active on a mobile device

Actual behavior

Tapping on the elements does not show the available options like they do on desktop

How to reproduce

 <input class="form-control" id="date_schedule_date" name="publish_date" is="dmx-date-picker" dmx-bind:mindate="current_date.datetime" timepicker="" minutes-increment="15" dmx-on:hide="toggle_picker_open.uncheck()" dmx-on:show="toggle_picker_open.check()" dropsup="true" format="dddd, MMMM D [at] h:mm a" required="" dmx-bind:readonly="true">

Desktop works:

Screenshot 2024-01-23 at 1.52.25 PM
Screenshot 2024-01-23 at 1.52.25 PM538Ă—752 96.9 KB

Mobile shows the selected values for time, but nothing pops up on tap

File (1)
File (1)1179Ă—2556 152 KB

#2

Sorry but can I ask why do you have readonly=true?

#3

Sure, the readonly is so that the user cannot modify the actual text input (and perhaps put something in that is invalid). It forces them to use the UI. Also, it prevents the soft keyboard from popping up on mobile.

1 Like
#4
#5

I have the same thing going on but with Firefox…

In my 3.9.7 based app, the time picker is never working in Firefox, but it works on all the other browsers.

In my v6 beta based app, one time picker in particular (but not all of them) is also not working in Firefox.
(This is using quite an old v6 beta… you can check out which one in the js package)

@patrick, I’ll DM you the details to take a look…

#6

@mebeingken
Sorry, I post it too fast!

What I tried to mean was:

Why do you use dmx-bind:readonly=true and not readonly=true
Anyway, thanks for the reply :slight_smile: !

#7

Ha! I was probably trying out different things. No reason to do so.

#8

The Datepicker component is a wrapper around the Date Range Picker, perhaps you can test the picker from the original site and see if it works there. The datepicker isn’t maintained anymore since the last 4 years, also don’t see any good alternatives for the picker and the current version just works good.

Date Range Picker — JavaScript Date & Time Picker Library

#9

There is an issue with the datepicker within a bootstrap modal. We already released an update in the beta channel for this issue that fixes it.

If you want to patch it yourself in your version, search for:

$(this.$node).daterangepicker({singleDatePicker

update it to:

$(this.$node).daterangepicker({parentEl:$node.closest('.modal, .offcanvas')[0]||document.body,singleDatePicker

it will change where the datepicker popup is placed in the DOM, when the datepicker is in a modal it will place the popup also in the modal so that the modal focus trap doesn’t prevent the focus on the elements in the popup.

2 Likes
#10

Thanks for that Patrick…unfortunately it didn’t work, the picker never displays when focused.

I updated dmxDatePicker.js with your suggestion; are there other places that need to be modified?

#11

Did you try the beta channel?

#12

Could you test the datepicker outside of a modal to see if touch works correctly. @Antony did send me a test page for his Firefox problem and there I could verify that it was the modal that was causing the problem.

Also you may want to test with the Beta channel, the datepicker is updated there to work correctly within modals.

#13

Yes, beta works. For me, I can wait until AC2 goes stable.

Thanks!