Two different Date Time pickers - NOT WORKING!

Wappler General Bugs
1

EDIT: I thought this was working but what happens if you have both is=“dmx-date-picker” and type=“datetime-local” then both of the calendars actually show. I think this is probably a bug!

I’m not a big fan of how the default Date Time Picker works. By chance I came across a second option for date time picker in Wappler which I think is a much better UI experience.

The default looks like this…

image

However, if you change the type to datetime-local

image
image678×942 27.4 KB

You get an input like this on the web…

image

At least on my iPhone 13 the default doesn’t consistently work, especially in modals. I can select dates, but not the time.

However, using the datetime-local works perfectly and is a really nice UI.

image
image739×1600 140 KB

Thought this might help someone if you’re having issues with the date-time picker.

Also - unless there’s a reason to have the first one default it seems like datetime-picker would be a better default for this component.

1 Like
2

This is the date picker component in Wappler.

This is the default HTML5 datetime-local element: <input type="datetime-local"> - HTML: HyperText Markup Language | MDN

If you want to use the date picker component available in Wappler then keep the input type to text and convert your input to date picker.
If you want to use the default HTML5 datetime-local input just don’t convert your input to a date picker component and just change its type to datetime-local.

3

Thx. However, none of the Wappler date and time options are available if you remove the is=“dmx-date-picker”. Would it be possible to add those?

Also, IMHO, I don’t think changing the type should be an option on the Wappler datepicker as it causes aberrant behaviour.