CodexBloom - Programming Q&A Platform

advanced patterns with <input type='date'> not displaying correctly in Firefox 117

👀 Views: 72 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-07
html input firefox HTML

Hey everyone, I'm running into an issue that's driving me crazy. Quick question that's been bugging me - I'm working on a personal project and I'm working with an scenario with the `<input type='date'>` element not displaying the selected date correctly in Firefox 117. When I use the date picker, it allows me to select a date, but after selection, the displayed value seems to revert to the default placeholder rather than showing the selected date. I've tested this on different browsers, and it works fine in Chrome and Edge. Here's the code snippet I'm using: ```html <input type='date' id='datePicker' value='2023-10-10' /> <div id='selectedDate'></div> <script> const dateInput = document.getElementById('datePicker'); dateInput.addEventListener('change', (event) => { document.getElementById('selectedDate').textContent = `Selected date: ${event.target.value}`; }); </script> ``` I've tried setting the `value` attribute dynamically in JavaScript and even removing the initial value, but the behavior remains the same. I also checked the console for any behavior messages or warnings, but nothing shows up. Is there a known compatibility scenario with the `<input type='date'>` element in Firefox 117, or am I missing some specific attribute or configuration? Any advice would be greatly appreciated! What am I doing wrong? Thanks in advance! For context: I'm using Html on Ubuntu 22.04. How would you solve this?