typing on keyboard [cropped]

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 input type 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.

I’m using Javascript, which has a Date object. If you print out a Javascript Date object, it displays it in this format:
YYYY-MM-DDTHH:mm:ss.sssZ.
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:
YYYY-MM-DDThh:mm.
I found this out only by looking at the messages in the browser console. Hurrah for the browser console!
The specified value "2017-06-30T05:43:00.000Z" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

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:
ActivitySchema
.virtual('deadline_for_forms')
.get(function() {
return moment(this.deadline).format('YYYY-MM-DDTHH:mm');
})

The view I’m using is Pug, so in my form, I added this code:
label(for='deadline') Deadline:
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.

Leave a Reply