CodexBloom - Programming Q&A Platform

HTML <input type='date'> formatting guide on Safari - incorrect default value display

👀 Views: 40 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-03
html safari input JavaScript

I'm deploying to production and I've hit a wall trying to I'm having a hard time understanding I've searched everywhere and can't find a clear answer... I'm experiencing a question with the HTML `<input type='date'>` element in Safari (version 15.3). When I set a default value using JavaScript, it doesn't display correctly in the input field. I've tried the following code to set the default date to today: ```javascript const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0 const yyyy = today.getFullYear(); const formattedDate = `${yyyy}-${mm}-${dd}`; document.getElementById('dateInput').value = formattedDate; ``` In my HTML, I have: ```html <input type='date' id='dateInput'> ``` On most browsers, this works fine, and the input shows the current date. However, on Safari, the input field remains empty or shows an invalid date format. When I check the console, I don't see any behavior messages, but the behavior is inconsistent. I've also verified that the date format matches `YYYY-MM-DD`, which is required for the `<input type='date'>`. I've cleared the cache and even tried using `setTimeout` to delay the value assignment, thinking it might be a timing scenario, but that didn't help either. Is there something specific to Safari's handling of date inputs that I might be missing? Any guidance on how to resolve this would be greatly appreciated. The stack includes Javascript and several other technologies. Thanks for your help in advance! My development environment is Ubuntu 22.04. Has anyone dealt with something similar? What's the best practice here?