Time & Date Input Fields: Design Trends & Resources

Handling date information from the user is always a hassle. There’s no single best way to do it, and the information is often a bit too clunky to create a clean input form.

But the web has come a long way, and there are some great practices you can follow. In this post, I’d like to share tips and resources for handling time/date input fields.

Create Time and Date Fields

If you follow these tips, you’ll have an easier time crafting date fields, as well as a user experience that caters to everyone.

The first and most obvious choice is a dropdown menu for each field. This way, you can make a month/day/year selection with individual select menu dropdowns.

This has its pros and cons. The biggest upside is that everyone knows how to use a dropdown field. It’s a native HTML element, and it’s so common that everyone should be able to get the information needed.

However, the downside is this; dropdowns can take more effort to complete. If you have selected targeting for the year, it could include hundreds of year inputs. The same is true with a country select menu.

But because this process is universally known, it’s also the simplest option. You literally can’t go wrong creating a date/time input with select menus.

The above example is from an online scheduling page for Massage Envy. You input all the regular data and then select from a predetermined field of dates.

This is a bit different than most forms, because it requires extra work on the backend. Each time this form loads it needs to check with the database to see which days are free and which times haven’t been claimed by other appointments.

If you have a dynamic webapp like this, it’ll take a bit more work, but you can still see excellent results with dropdown select menus.

Formatted Input Fields

Another style that’s a bit more complex is the preformatted fixed input field. Instead of a select element, you’ll use a text input that represents each piece of data like the month, day, year, and possibly time (hours/minutes).

But this technique works better with JavaScript, so you are able to structure inputs. For example, you can write some JS code to limit the month and day input fields to only two digits. You can go even further to limit certain values that don’t make sense, like the number 99 for the month.

Check out this code snippet to see a simple yet effective example.

You’ll notice along with the date input, there’s also room for a credit card number and an IP address. This technique works well for any limited value inputs that work on a specific syntax.

For example, year/month/day would follow a syntax of 4/2/2 digits. As the user types the 4th digit of the year, the field can auto-tab over to focus on the month input. This way, users aren’t hitting “tab” to move onto the next field; they can just punch numbers and keep moving.

If you go this route, you can even use the date input which is new to HTML5.

The above example shows a minor Chrome bug with the date input field. It has since been resolved, but the demo is a fantastic example of what you can do with a bit of raw HTML.

Users can manually punch in numbers for the date, or they can use the up/down arrows to cycle through their options. This is quickly becoming a popular choice because the information can be passed to the backend with one form field, making the dev process a lot simpler.

This is the most complicated style to implement but it’s also aesthetically pleasing and often very user-friendly. You can add full calendar interfaces to any form field using some basic JavaScript/jQuery plugins.

These aren’t fully supported in all browsers but most web users will get the full benefits. These calendar widgets have many different sizes and styles, but they all aim for one goal: simplicity.

Check out the homepage of Hipmunk and try selecting a departure/return date.

Their custom calendar menu spans two months, making it super easy to select a date in the near future. It also has arrows, so users can move between months and check dates far into the future.

Mobile users may have trouble with this calendar, so it’s good to offer a mobile alternative. But if the user has a larger screen and supports this functionality, it’s definitely the most articulate solution.

I’ll cover some calendar plugins a bit later in the post, so if you’re looking for resources, jump down to that section.

But remember that even though flyout calendars are incredibly dynamic, they’re also the most complicated solutions. If you go this route, be sure to offer alternatives for users who can’t work with the flyout menu.

Mobile UI Support

Generally on mobile, it’s a good idea to support date pickers. These use the native scroll interface on Android and iOS so they’re easy to use. Mobile apps use these elements by default and they’re well supported on all smartphones.

But if you’re feeling confident, you can try customizing the style of these date input tickers. They’re pretty easy to change and restyle as needed, although most users won’t care about the design. They just want a date picker that works.

When it comes to mobile date pickers, always go with a native solution. Don’t try to reinvent the wheel, because users already know how these interfaces work.

I prefer the scroll ticker interface, because it works by default in any mobile browser. It’s also connected to any select field so you can use the select menu fallback for mobile users.

As long as every user has the ability to input time/date information, the details and user experience are up for experimentation.

Best Free Plugins

In a previous post, I outlined the best date picker plugins for jQuery. That list includes many different plugins made for different purposes, and I’d like to share the best choices meant for more general web design projects.

Pickadate.js

If I’m looking to build a dynamic date input field, my favorite plugin is pickadate.js. This free open source project works on top of jQuery and offers a slew of different interface styles.

It’s primarily made for date selection, but you can also add a time picker too. It’s a pretty simple plugin to implement, but you’ll always want to provide a fallback for users who can’t benefit from the advanced interface.

jQM DateBox

If you don’t like the default mobile experience, you can always work with the jQuery Mobile DateBox plugin. This runs on top of jQuery Mobile, which is the most popular open source mobile framework.

It’s powered by JavaScript, and the team behind jQuery puts in a lot of effort to support the widest audience possible. If you’re looking for a free plugin for mobile, then jQM DateBox is an excellent choice.

Datepair.js

Some designers want a really simple solution, and Datepair fits the bill perfectly. It can work for dates or times, and it comes with a couple different choices for flyout menus.

Whenever the user clicks to focus on an input field, they’ll get a small flyout menu with dates/times listed. They can either manually enter the info, or just click to select from the flyout. (An excellent choice for simplicity regardless of the application.)

glDatePicker

Lastly, I want to share the glDatePicker plugin. This is much more complex, and it offers a huge calendar interface for users to click around.

This works best on very specific projects where the date information is crucial. It is fully dynamic but it’s also one of the more complicated plugins to implement properly.

Moving Forward

There is no right or wrong choice for adding a datepicker to your site. Different audiences prefer different features, so you could always run tests and see what works best.

Either way, these trends are universal and apply to all web design projects. Whether you’re building an appointment page or a birthday field, this post should help you design an interface that’s usable and appropriate to each project.