Entering dates and times in HTML forms
In the Pomodoro Technique, each activity added to the Activity Inventory can have a deadline or not. I am currently working on implementing a form that allows the user to create activities in my Pomodoro Technique web app, with or without a deadline.
I decided to use the
datetime-local to represent the deadline. If an error happened anywhere on the form, I wanted all the user’s data to stay where it was, so they could fix the errors without having to re-enter all the other data as well, because that’s just irritating.
Date object, it displays it in this format:
This seems a rather ubiquitous format, and I assumed this would be the format used to set the value of the
value of an
input element of type
datetime-local. This is not the case, however.
The format that is expected, which seems to be documented precisely nowhere, is:
I found this out only by looking at the messages in the browser console. Hurrah for the browser console!
I am using moment.js anyway, so formatting the date in this way isn’t a problem. I’m using the Express framework for Node.js, so in my Activity model, I added this virtual property:
The view I’m using is Pug, so in my form, I added this code:
input#deadline.form-control(type='datetime-local', name='deadline', value=(undefined===activity ? '' : activity.deadline_for_forms))
Now the date behaves as expected, and all is well. Until I add some more code.