LearnBest jQuery Date Picker Plugins for Input Fields

When building a web form you need to consider a number of factors for your particular application. Many developers will need to handle special data such as the user’s birthday, invoice date, or subscription trial period. These examples could all benefit from the use of a dynamic date picker for HTML5 input fields.

Free trial on Treehouse: Do you want to learn more about jQuery development? Click here to try a free trial on Treehouse.

Thankfully there are a number of handy open source tools you may utilize for this task. I want to present a collection of the best jQuery plugins for creating more consistent date choosers. These are often referenced from a calendar drop-down interface but can be designed any number of ways. Each plugin is very simple to implement on any HTML form, and once you start applying this method it will be difficult switching back.

DatePicker

This specific jQuery date picker plugin was developed by Stefan Petre who has released a number of related plugins as well. His work is fantastic and provides a solid base for web developers to quickly build date input forms. This particular code offers a myriad of customizations where you can start at any year, month, or date.

It is also possible to limit the choices a user can make by passing distinct parameters into the jQuery function. If you want to edit some of these variables check out the documentation page with all the options and value points. It is extremely lightweight and the initiation can be done with a single line of code:

$('input').DatePicker(options);

Overall this is a great plugin to get started when you need something that works quickly. The CSS styles are a bit drab, but it doesn’t take a lot of time to design your own custom theme. Check out the examples on his page to get a better idea of how you can structure this plugin.

Bootstrap DatePicker

The Twitter Bootstrap Datepicker is actually an extension of the original plugin by Stefan Petre. He has gone back to rework the styles which include default classes right out of the Twitter Bootstrap stylesheet. The plugin homepage features a lot of unique demos which are simply stunning. They look nicer using the typical Bootstrap interface designs.

One thing you may notice when going over the documentation is a lack of additional options. Many of the same features have been ported over from his first DatePicker jQuery plugin. However the website itself does not include all of these options, so developers may find the implementation a bit confusing. But keep testing out various solutions until you get a design that works properly and blends properly into your layout.

glDatePicker

When it comes to interface design the glDatePicker plugin has one of the best. You can include this plugin just like you would any other sample code. The jQuery selector will tie onto an existing input field and the calendar will appear directly beneath this area. All you need to include is the default stylesheet and their JavaScript plugin file.

What I like most about the interface is that it caters to a typical user’s expectation. You may click on the top month or year to directly edit these values from a select dropdown. Then by clicking on any of the allotted dates you can add values into the form field. The sheer number of features makes this plugin worth while on any dynamic website. Similarly, you can download the plugin codes from Github and browse through the open repository.

jQuery UI Datepicker

I think most jQuery developers at least know about jQuery UI. It is a library for building common interface features such as progress bars, tabs, tooltips, and accordion menus. Luckily there is also a component for rendering input date pickers using jQuery UI Datepicker. The codes are very simple and follow the same formatting you would expect with any other jQuery plugin.

The library comes equipped with more dynamic features than the basic examples above. You can now include date ranges where users select 2 different dates for 2 different input fields. Then using these values it is possible to combine a full date period for querying articles and similar data requests. It will take a bit of time customizing the styles, but it is definitely an exciting option for JS developers. Just remember this plugin will require dependencies for jQuery and jQuery UI libraries, along with the jQuery UI theme stylesheet.

Zebra Datepicker

Zebra Datepicker is another solution which starts at the bare bottom and works up to include more controlled features. All you will need is the regular jQuery library and it’s good to go! There is an optional Zebra Datepicker CSS file if you want to use their default stylesheet, or rebuild your own custom theme from their base. The file sizes are tiny and certainly wouldn’t cause a problem with loading times, so you’re good-to-go there too.

The plugin homepage features a series of demos to explain how you can implement this plugin. It does not require a lot of code, but as always you do have the choice to include a myriad of similar options. It is possible to limit only to future dates or even between a specific section of dates. Zebra’s options provide a mini API for developing your input fields with dynamic content.

ptTimeSelect

Moving away from the standard date pickers into date/time, we have the jQuery ptTimeSelect plugin. This is completely open source and free to download for any website project. It will display very similar to the jQuery UI picker and targets AM/PM time instead. Users can select between 24 hours of the day along with sub-selections in 5-minute intervals. This plugin has a similar number of parameter options you may setup on different input field selectors.

For example, you may update the container class along with the button labels and hr/min/sec text labels. There are also two specific callback parameters named onBeforeShow and onClose. You may define custom functions to retrieve or send new data after the user opens the time select window or chooses their time value. It is an interesting plugin which comes in handy for developers looking to manage time values instead of date/time.

jQuery Mobile DateBox

Web developers who have been following jQuery Mobile are likely knowledgeable about the library’s extended list of features. Mobile webapp development has never been easier with standard components, just like the ones you would find inside Bootstrap. This jQM DateBox plugin was created specifically for use inside a jQuery Mobile web application. The date picker input field will display a popup calendar after the user taps to select.

There are a number of various display options like the iOS sliders and the typical date/time button boxes. It is certainly not a plugin you will want to include on all your websites, but when building over jQuery Mobile it can be difficult managing such dynamic inputs with your own code. Even if you are not using the jQM framework it is still possible to run this plugin for a mobile site, as long as you include the required library dependencies. Check out the full documentation page for a more complete list of parameters and function options.

Final Thoughts

Although this is not an exhaustive list, I have tried to include all the major datepicker plugins found across the web. This collection focuses on the widest array of uses by developers, and there will always be new open source projects as time goes on. Have some fun toying around with these scripts in your own website layouts, and if I have forgotten any great plugins or JavaScript libraries feel free to share them in the post discussion area.

• frontend development
• html5
• input types
• jquery
• make a website
• tutorial
• web design