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

Wappler General Bugs
,
1

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.

Safari

Screen Shot 2021-01-24 at 9.12.18 AM
Screen Shot 2021-01-24 at 9.12.18 AM1564Ă—172 8.83 KB

Chrome

Screen Shot 2021-01-24 at 9.12.50 AM
Screen Shot 2021-01-24 at 9.12.50 AM1570Ă—248 27.2 KB

Firefox

Screen Shot 2021-01-24 at 9.23.54 AM
Screen Shot 2021-01-24 at 9.23.54 AM1572Ă—252 28.9 KB

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

2

Hello,
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?

3

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.

4

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

5

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

Screenshot 2021-01-24 at 17.47.21
Screenshot 2021-01-24 at 17.47.21858Ă—357 30.3 KB

6

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.

Screen Shot 2021-01-24 at 9.51.26 AM
Screen Shot 2021-01-24 at 9.51.26 AM1580Ă—180 8.7 KB

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.

7

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

8

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

https://caniuse.com/?search=date

Screenshot 2021-01-24 at 18.01.56
Screenshot 2021-01-24 at 18.01.56832Ă—560 65.7 KB

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

Screenshot 2021-01-24 at 18.05.54
Screenshot 2021-01-24 at 18.05.54412Ă—524 24.6 KB

9

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
10

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

1 Like