Make a calendar date picker using jquery

Due to the strict Web Content Accessibility Guidelines for institutions that serve public internet content to users around the world, I am updating some legacy apps to use a date picker to allow user to enter their birthdate. After some research I’ve decided that the jQuery UI datepicker would be the perfect thing to use due to its ability to work in almost every browser that exists.

The first thing I will do is to  read the docs at jQuery official site. Now that I have a good understanding of the scripts and code involved, lets break down the minimum requirements to have this working in a page.

I would want the user to click into the text field…

…and have the picker pop up, with drop downs to choose the month and year…

…then they click to chose the day.

The audience for this user case scenario are adults of an age to be interested in information about college. The device target includes desktop and laptop computers. Mobile devices have native form controls that would conflict with this script.

We start with my html 5 template, then add the calls to the google cdn to get the jquery plug in scripts.
[code language=”html”]<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css” />
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js”></script>[/code]
Next we have  a form  with a date element, given proper name and id attributes.

<form><input type="date" id="mydatefield" name="datefield" value="" placeholder="Enter birthdate" /></form>

Now, all I have to do is call the jquery date picker function on the form element, with options changeMonth and changeYear setup as so…

 $( "#mydatefield" ).datepicker({ changeMonth: true,   changeYear: true, yearRange:"c-80:c"  });

That’s all there is to it. While testing on the desktop, it is working well in Chrome,  Firefox and Internet Explorer.

To avoid the problems of overlayed natives on mobile devices , We  just use a “text” input instead of the html5 “date” input element. We can easily use CSS media queries JavaScript to change the data type on the fly.