How to prevent Safari from using today's date as placeholder on a date component?

Ask us anything
1

In Safari, instead of showing the expected format like MM-DD-YYYY, the Date component will actually show today’s date like this:

image
image2078×188 6.95 KB

On this screenshot, the date fields actually == “undefined”. If the form is submitted, those fields will be empty in the database, which is the expected behavior. This is however very confusing to the end-user, as it seems that they are submitting today’s date, while in reality, they aren’t submitting anything in those fields.

If the end-user selects an actual date, the date component will display it properly and it will be properly saved in the database.

How can I fix this behavior so that those date fields show as MM-DD-YYYY when they are empty, like what is observed in other browsers like Chrome?

image
image2070×174 4.19 KB

2

Hi @gbeaudoin,

Sadly this is the default behavior of safari and it was not easy to workaround it. Be aware it doesn’t fill the value of the field but it use the current date as a placeholder.

We updated the component so you can now use the placeholder color to configure the color of the date placeholder, at least you can use a light grey so your users understand they are not a true value set in the field until they finish to enter it.

I hope it help you improving slighty the UX of your input field.

3 Likes
3

Thanks for the workaround Alexis!