Kevin Powell - Community•7mo ago

datetime-local value firefox

hi all, i have a problem with the datetime-local tag with firefox. https://jsfiddle.net/wLtbyx7p/ i have an empty input. i use the "native interface" to select the date the input is now "12/05/2025 --:--" since i haven't selected a hour yet. => since it is not a valid date, the value isn't changed and is still a empty string. with chrome : when selecting a date, it automatically fills the hour to be "now" therefore, the input is valid and changes. with firefox, how do i catch the input change from "empty" to "date selected" in order to automatically set the hour to "now" ?

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

14 Replies

ἔρως•7mo ago

you cant - it's an implementation detail of the browser and it doesnt trigger events you can get around this by using 2 inputs, styled as a single input, that lets you set a date and time

13eck•7mo ago

You can auto-fill it yourself:

/* the .toISOString() method on the Date object
* gives you fractions of seconds as well as timezone
* so we split the string on the fractional second and 
* discard it, leaving only YYYY-MM-DDTHH:mm:ss to properly
* set the date and time to now.
*/
document.querySelector("#test").value = new Date(Date.now()).toISOString().split(".")[0];

/* the .toISOString() method on the Date object
* gives you fractions of seconds as well as timezone
* so we split the string on the fractional second and 
* discard it, leaving only YYYY-MM-DDTHH:mm:ss to properly
* set the date and time to now.
*/
document.querySelector("#test").value = new Date(Date.now()).toISOString().split(".")[0];

ἔρως•7mo ago

or that

13eck•7mo ago

And, bonus, it auto-fills the date and time on all browsers, so if "today, right now" is a common date/time needed the user doesn't have to do anything :p

ἔρως•7mo ago

that is smart

13eck•7mo ago

Yeah, sorry about that

13eck•7mo ago

https://tenor.com/nCIMpS7skOX.gif

Tenor

ἔρως•7mo ago

🤣

DoksuriOP•7mo ago

the broblem is that it musn't be setted unless the user sets it

ἔρως•7mo ago

then you have to go with my solution of having 2 inputs

DoksuriOP•7mo ago

😢

ἔρως•7mo ago

you can't fix it you can report it as a bug, if you want or look for a bug report

DoksuriOP•7mo ago

i went for an other solution : add a button "add datetime" and when they click : i set the value to "now" 👍

ἔρως•7mo ago

that works too

Gaming

Programming

datetime-local value firefox

Did you find this page helpful?