Abrahm Coffman

jQuery Birthday Picker Form Plugin

February 28th, 2011 | Tags: facebook, javascript, plugin | Links: examples, plugin, github

I recently had a need to create a form where somebody entered their birthday and decided it would be a good idea to explore various ways of solving this. I essentially had the following requirements:

Make the data entry as easy as possible
Do as many validations as I could on the client side
Use jQuery

Date’s are always tricky for people to enter into forms and the best solution really depends on the situation. Birthdays present their own unique features:

You always know the exact date you’re entering
The date is always in the past, and often many years in the past

Because of this a common date picker such as the jQuery Datepicker, which works great for things like airline reservations, isn’t quite as suited for choosing a birthday. Instead most people end up creating an empty text field and adding validation to it, either on the client, on the server, or both (I strongly recommend both).

<form id="myForm" method="post">
  <input id="birthday" name="birthday" type="text" />
  <input type="submit" value="submit" />
</form>

This is where something like the jQuery Validation plugin comes in really handy. With very little effort you can ask it to ensure a valid date is entered.

$("#myForm").validate({
  rules: {
    birthday: {
      required: true,
      date: true
    }
  }
});

This is a pretty easy solution, and probably sufficient in almost all cases. If you go this route I would suggest adding a placeholder to the input field to show the user a sample date in the format you’re expecting.

<input id="birthday" name="birthday" placeholder="10/17/1980" type="text" />

However if you want to be especially picky, this solution does allow invalid birthdays because you can enter a future date.

So I decided to continue my search to see how other people had solved this. The first place I looked was Facebook, and behold, they had their own implementation. If you’re interested you can have a look at their homepage (you must be signed out). The basic markup is as follows (with slight modifications and option menus omitted):

<select name="birthday[month]"></select>
<select name="birthday[day]"></select>
<select name="birthday[year]"></select>

I think if you were a user interaction purist you’d quickly find the faults with this solution. It requires three different fields, all of which are dropdowns, ugghh! That being said, it does have some things going for it. The format is forced which means the user should almost always get it right on the first try. It also allows you to restrict the date range which can solve the future date issue.

So I decided I might give Facebook’s implementation a try and quickly realized it is not without some complexity. For it to be worth anything it requires that the dropdown menus dynamically update themselves in the following ways:

The number of days in the day select menu should reflect the chosen month
The number of days in February should account for leap years
The dropdowns should selectively reset to prevent display of an invalid date

After giving it some thought, I decided this would be a good opportunity for me to learn how to write a jQuery plugin to mimic this implementation. While writing the plugin I decided it would be fun to add some additional options which are all outlined on the plugin page, github, and the demo page. But as a quick guide to how it works, you can make the following call on any block element in the page:

$("div#birthday-picker").birthdaypicker();

By default this will generate the following markup (with option menus of course):

<fieldset class="birthday-picker">
  <select class="birth-year" name="birth[year]"></select>
  <select class="birth-month" name="birth[month]"></select>
  <select class="birth-day" name="birth[day]"></select>
</fieldset>

I believe that I’ve solved the requirements I listed above. And, as mentioned, there are a number of options that give the plugin some flexibility, both in the range of dates it will support, and the markup it will generate. I think there are still many ways it could be improved, but I’m going to hold off on those until/unless people ask for them.

As a final thought, this is probably not the best solution. In fact I would lean toward using the basic text field with client side form validation. However I have to assume that Facebook takes a critical look at their usability, and since they’re still using this implementation it must be working. Post in comments if there are any implementations that you particularly like. I’d love to find more.

Update: March 21, 2011 – Birthday Picker Version 1.2 Released

I updated the plugin to include support for a default date. I also added a hidden text field called “birthdate” that gets updated as the select lists change. This single date field is easier to handle on the server.

Update: July 30, 2012 – Moved to Github

Please visit the Github repository for the latest discussion on this plugin. There you can clone the repo and submit fixes. Cheers!

jQuery Birthday Picker Form Plugin

Categories

Recent Comments

Infrequent Tweetings