Datetime Picker & Moment.JS

This is the real story which I wasted 3 hours on. 😂 If you need a date-time picker and have a database which is UTC time, here is the way to display the right date-time on web portal.

Lessons Learned:

1: Read the documentation thoroughly sometimes can save you more time.

2: Understand StackOverflow answers is quite important.

3: Understand what is the date-time timezone in difference places is very important.

Use Case:

We need a DateTime picker for users to select the date and time. The guy who initiated the project uses input type datetime, which is not showing the datetime picker. After debugging, I think there is something wrong with that input. It turns out the <input type=”datetime”> is no longer recommended. Check the link below.

What we need to use is datetime-local.

- HTML: HyperText Markup Language | MDN

<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

Notes:

1: The date-time picker displays the local date and time.

The control is intended to represent a local date and time.

One thing to note is that the displayed date and time formats differ from the actual value.The date/time value is always formatted YYYY-MM-DDThh:mm.

For example:

Choose the date-time from the picker, let’s see what is the value we get.

As image 1, we select 07/30/2021 09:00 AM first then later select 09:00 PM to update the date-time.

The result we get is as image 2. The value we get is actually 24h format.

❤️ The value display is 12h format with AM/PM, the real data we get is 24h format.

2: The database timezone.

First, check if your database time is UTC time or not.

The date-time we select from date-time picker and save in the database is actually as image 3.

date-time picker: 07/30/2021 09:00 PM; 07/30/2021 11:00 PM

database:

Now, go to the web page to check if the right time display on the page or not.

The date-time we get from the database via API call is not the right format date-time we need. We can use Moment.JS to format this data.

We can see that the date-time we get from the API call is UTC time. ‘Z’ means UTC time. The database time is 24h format. Remeber to format it in 24h way not 12h.

Reference: https://stackoverflow.com/questions/12970284/moment-js-24h-format

If use small letter hh then it is 12h, the result will be as image below.

Also be careful to use this feature, because it is not supported by many browsers.

Because of the limited browser support for datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. Another option is to use separate date and time inputs, each of which is more widely supported than datetime-local.

Conclusion:

Actually it is super easy to handle this issue. If you don’t understand the logic behind, it is easy to go to the wrong way if the situation or requirement is different. The only thing we need to do is to format the date-time data getting from API call to display the right format on the date-time picker. The quick answer is as below.

moment(this.date-time-data).format(“YYYY-MM-DDTHH:mm”)