jQuery Datepicker

jQuery Datepicker plugin that shows 3 drop downs to select dates.

by Gautham PJ

HTML

<body>
    <label for="dob">jQuery Datepicker</label>
    <br/>
    <input type="text" name="dob" id="dob" />
    <br/>
    <br/>
    <label for="dateText">Date Text</label>
    <br/>
    <input id="dateText" readonly="readonly" />
</body>

CSS

.datepicker {
    margin: 2px 3px;
    padding: 1px;
}

JavaScript

/**
jQuery Date picker.
Convert a text box into a 3 drop down date picker with day, month and year as 
drop downs.

Allowed Parameters:
startDate: restrict the user to this Start date.
endDate: restrict the user to this End date.
dateFormat: a function that returns a string that will be used to fill the hidden input box.

Gautham PJ
*/
(function ($) {

    'use strict';

    // The function that handles the Datepicker.
    $.fn.datepicker = function (userOptions) {

        var $this,
        $dayElement,
        $monthElement,
        $yearElement,

        // Keep track of the Months and the number of days in them.
        MONTHS = [{
            month: 0,
            name: 'January',
            days: 31
        }, {
            month: 1,
            name: 'February',
            days: 28
        }, {
            month: 2,
            name: 'March',
            days: 31
        }, {
            month: 3,
            name: 'April',
            days: 30
        }, {
            month: 4,
            name: 'May',
            days: 31
        }, {
            month: 5,
            name: 'June',
            days: 30
        }, {
            month: 6,
            name: 'July',
            days: 31
        }, {
            month: 7,
            name: 'August',
            days: 31
        }, {
            month: 8,
            name: 'September',
            days: 30
        }, {
            month: 9,
            name: 'October',
            days: 31
        }, {
            month: 10,
            name: 'November',
            days: 30
        }, {
            month: 11,
            name: 'December',
            days: 31
        }],

            // The default options for the plugin.
            defaults = {
                startDate: new Date(),
                endDate: new Date(),
                    'class': 'datepicker',
                dateFormat: function (day, month, year) {
                    return year + '/' + month + '/' + day;
                }
          ...