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 HTML element input of 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 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 one of:

YYYY-MM-DDThh:mm
YYYY-MM-DDThh:mm:ss
YYYY-MM-DDThh:mm:ss.SSS

Note that there is no Z suffix. I found this out only by looking at the messages in the browser console. Hurrah for the browser console!

I am using moment.js, 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.