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!

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".
The browser console shows the correct format for the date and time

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.