<a title="Click Fraud Protection" href="http://clickguardian.co.uk"><img src="http://protection.clickguardian.co.uk/nojs.php?d=helastel.com&amp;k=N15i7ILUrfW3k" alt="Google Click Fraud">

A Journey Through Date and Time

Find me on:
Jonathan Hazan
date_and_time.jpg

 

Almost every web project with a user interface will require the ability to enter DateTime information. In my eyes, the requirement for DateTime entry falls only slightly behind that of select dropdowns. For a form requirement that appears so often, it’s difficult to fathom why we are still stuck having to use Javascript libraries.

Native Date Picker

Of course it is worth mentioning that there IS actually a native element - it's just not got any kind of standardisation or cross platform support. As can be seen on CanIUse, there are Date / Time inputs supported by Edge, Chrome, Opera, Android and partially by iOS. Each of these inputs, however, look radically different to each other, and they all have different capabilities:

<input type="date">

Edge:

edge.png

 

 

Chome:

chrome.png

Android:

android.png

As you can see, they are all pretty different, and - bar Android -  look absolutely terrible. This styling is set, and only the input box can be modified using CSS. As a final nail in the coffin, browsers such as IE and Firefox have no support and do not offer any kind of regression. They are simply treated as text inputs, which is going to cause your user a whole lot of confusion.

bday.png

Style - 1 / 5

Useability - 2 / 5

Compatibility - 0 / 5

Time - 5 / 5

Dropdowns

This approach is one of the simplest answers to the DateTime problem, but at the same time it results in a fairly terrible user experience.

The setup is fairly simple; you have 3 dropdowns to select the Date, and one or two for Time. The 3 Date dropdowns represent day, month and year. For Time you have to make a decision about how to breakdown your minutes - are you going to be able to let your users select any minute value between 0 and 59, or are you going to restrict them to quarter hours? Depending on the answer, you can either have all your times in a single dropdown, or split the Time into hours and minutes.

The results looks like this:

dropdowns.png

It might not be the most stylish date picker you’ve ever seen, but it’s definitely functional and, more importantly, it’s compatible with any browser (even IE6!).

Style - 2 / 5

Useability - 3 / 5

Compatibility - 5 / 5

Time - 4 / 5

Javascript

For as long as I can remember, the torch of the DateTime picker has been carried by javascript libraries, the majority of which are opensource. In fact, if you search for "javascript datetime picker," you are returned thousands of drop in libraries claiming to solve the problem, and while they often lack any level of real support, they are easily better options than the native picker.

Some of these are tied to, or provided as part of, a frontend framework such as Bootstrap or jQuery. This makes integration very easy if you're already using the framework.

Compatibility can be a bit of a gamble on smaller opensource projects, but the larger ones are generally well-supported in most browsers.

Bootstrap:

bootstrap.png

jQuery:

jquery-1.png

Even with all of these options, though, it is often next to impossible to find one that actually fits your requirements. Normally, you end up finding the closest match and then modify it to meet your requirements.

Style - 4 / 5

Useability - 4 / 5

Compatibility - 4 / 5

Time - 2 / 5

Integration with touchscreen devices

One of the biggest flaws with all of the above options is that none of them work well on a desktop, and also cater to the now huge mobile OS market. The native date picking functions of both Android and iOS work far better on touchscreen devices than any JS library so far released. It would be great to have a JS library that reverts to the native pickers of these OSs - if you know of one please let me know!

TLDR;

The scores for Dropdowns and JS libraries are actually tied. The trade-off being Implementation Time vs Style. However, if you can find a JS library that fits your application out of the box, it will be a clear winner! Hopefully in a future post I can run through the best available JS libraries to help you find the best one for your project.

Download your free ebook – Why Projects Fail and How to Avoid it Happening to  Yours  Learn why so many software projects fail and how to spot the early warning  signs, with plenty of tips on how to make your project a success. DOWNLOAD YOUR EBOOK NOW

Why not try these ones next?