Date/Time input types stopped working in Safari - Works in Chrome and Firefox

Wappler Version : 3.7.2
Operating System : Mac 10.15.6, Safari (v14.0)
Server Model: PHP
Database Type: MySQL
Hosting Type: Custom Hosting (AMPPS)

Expected behavior

What do you think should happen?

Date picker and masking appears on the input.

Actual behavior

What actually happens?

Input just appears as a text input in Safari. There are no console errors other than the failed to load .map errors.

How to reproduce

  • Detail a step by step guide to reproduce the issue
  • A screenshot or short video indicating the problem
  • A copy of your code would help. Include: JS, HTML.
  • Test your steps on a clean page to see if you still have an issue

Add an input to a form either in or out of a modal (doesn’t matter) and set the input type to date or time and open in Safari. That said, I am pretty sure it was working before. I cannot be sure when it quit working and whether it was after the latest .2 update or it had stopped before because I’ve been going back and forth between Safari and Chrome. I’ve tried it both in a modal and out of a modal. Same result.




I tried removing the tab index on the modal as I saw in another post with no luck.

So you are not using the Date Picker component in Wappler, but date type fields? How do you store (in what format and in what field type) the dates in the database?

I have tried both date type and varchar in the database. Doesn’t seem to make a difference. Works in Chrome and Firefox and not Safari no matter which database type is used.

So in what format are you storing the date exactly? And what is the value assigned to the date field on the page?

Actually i just made a quick test with the following dynamic value 2021-01-28 and it works fine in both Safari and Chrome:

Screenshot 2021-01-24 at 17.48.54

I’m storing the value in db date format 2020-11-09 and db time format 08:00:00

It’s not just the formatting that isn’t working, the masking and datepicker don’t appear, it just acts like a regular text field.

Are you getting the datepicker and masking? I can’t tell from you screenshots.

By the way thanks for the replies especially on a weekend.

Perhaps I’ll remove and recreate the inputs and see if that fixes it.

I don’t think safari includes the mask/picker in its desktop version, while it does for mobile:

I’d recommend using the datepicker component for cross-browser compatibility:

Thank you as always @Teodor. I guess I’ll give that a try. I believe I was using that first but it didn’t offer the “date” client side validation or force the date format so I switched to “date” input type. I could have sworn the date type input worked in Safari but perhaps I am remembering incorrectly and thinking of Chrome. As I said I’ve been going back and forth between the two and also learning the “Wappler Way” so a lot going on haha.

1 Like

Interesting looks like the date format validation is there now for client side. As I said, I’m still learning Wappler.

1 Like