first commit

1 files changed, 1576 insertions, 0 deletions

diff --git a/pickadate.js b/pickadate.js
new file mode 100755
index 0000000..132418e
--- /dev/null
+++ b/pickadate.js
@@ -0,0 +1,1576 @@
+/*!
+ * pickadate.js v1.4.0 - 06 December, 2012
+ * By Amsul (http://amsul.ca)
+ * Hosted on https://github.com/amsul/pickadate.js
+ * Licensed under MIT ("expat" flavour) license.
+ */
+
+/**
+ * TODO: scroll calendar into view
+ * TODO: click to close on iOS
+ */
+
+/*jshint
+   debug: true,
+   devel: true,
+   browser: true,
+   asi: true,
+   unused: true,
+   eqnull: true
+ */
+
+
+
+;(function( $, window, document, undefined ) {
+
+    'use strict';
+
+
+
+    var
+
+        // Globals & constants
+        DAYS_IN_WEEK = 7,
+        WEEKS_IN_CALENDAR = 6,
+        DAYS_IN_CALENDAR = WEEKS_IN_CALENDAR * DAYS_IN_WEEK,
+
+        STRING_DIV = 'div',
+        STRING_PREFIX_DATEPICKER = 'pickadate__',
+
+        $document = $( document ),
+
+
+        /**
+         * The picker constructor that acceps the
+         * jQuery element and the merged settings
+         */
+        Picker = function( $ELEMENT, SETTINGS ) {
+
+            var
+                // Pseudo picker constructor
+                Picker = function() {},
+
+
+                // The picker prototype
+                P = Picker.prototype = {
+
+                    constructor: Picker,
+
+                    /**
+                     * Initialize everything
+                     */
+                    init: function() {
+
+                        // Insert everything after the element
+                        // while binding the events to the element
+                        $ELEMENT.on({
+                            'focusin click': P.open,
+                            keydown: function( event ) {
+
+                                var keycode = event.keyCode
+
+                                // If backspace was pressed or if the calendar
+                                // is closed and the keycode warrants a date change,
+                                // prevent it from going any further.
+                                if ( keycode == 8 || !CALENDAR.isOpen && KEYCODE_TO_DATE[ keycode ] ) {
+
+                                    // Prevent it from moving the page
+                                    event.preventDefault()
+
+                                    // Prevent it from propagating to document
+                                    event.stopPropagation()
+
+                                    // Open the calendar if backspace wasn't pressed
+                                    if ( keycode != 8 ) {
+                                        P.open()
+                                    }
+                                }
+                            }
+                        }).after( [ $HOLDER, ELEMENT_HIDDEN ] )
+
+
+                        // If the element has autofocus open the calendar
+                        if ( ELEMENT.autofocus ) {
+                            P.open()
+                        }
+
+
+                        // Do stuff after rendering the calendar
+                        postRender()
+
+
+                        // Trigger the onStart method within scope of the picker
+                        triggerFunction( SETTINGS.onStart, P )
+
+
+                        return P
+                    }, //init
+
+
+                    /**
+                     * Open the calendar
+                     */
+                    open: function() {
+
+                        // If it's already open, do nothing
+                        if ( CALENDAR.isOpen ) { return P }
+
+
+                        // Set calendar as open
+                        CALENDAR.isOpen = true
+
+
+                        // Add the "focused" class to the element
+                        $ELEMENT.addClass( CLASSES.inputFocus )
+
+
+                        // Add the "opened" class to the calendar holder
+                        $HOLDER.addClass( CLASSES.open )
+
+
+                        // Allow month and year selectors to be focusable
+                        if ( CALENDAR.selectMonth ) {
+                            CALENDAR.selectMonth.tabIndex = 0
+                        }
+                        if ( CALENDAR.selectYear ) {
+                            CALENDAR.selectYear.tabIndex = 0
+                        }
+
+
+                        // Bind all the events to the document
+                        $document.on( 'click.P' + CALENDAR.id + ' focusin.P' + CALENDAR.id + ' keydown.P' + CALENDAR.id, onDocumentEvent )
+
+
+                        // Trigger the onOpen method within scope of the picker
+                        triggerFunction( SETTINGS.onOpen, P )
+
+                        triggerFunction( SETTINGS.onChangeMonth, P )
+
+                        return P
+                    }, //open
+
+
+                    /**
+                     * Close the calendar
+                     */
+                    close: function() {
+
+                        return;
+
+                        // Set calendar as closed
+                        CALENDAR.isOpen = false
+
+
+                        // Remove the "focused" class from the element
+                        $ELEMENT.removeClass( CLASSES.inputFocus )
+
+                        // Remove the "opened" class from the calendar holder
+                        $HOLDER.removeClass( CLASSES.open )
+
+
+                        // Disable month and year selectors from being focusable
+                        if ( CALENDAR.selectMonth ) {
+                            CALENDAR.selectMonth.tabIndex = -1
+                        }
+                        if ( CALENDAR.selectYear ) {
+                            CALENDAR.selectYear.tabIndex = -1
+                        }
+
+
+                        // Unbind the Picker events from the document
+                        $document.off( '.P' + CALENDAR.id )
+
+
+                        // Trigger the onClose method within scope of the picker
+                        triggerFunction( SETTINGS.onClose, P )
+
+                        return P
+                    }, //close
+
+
+                    /**
+                     * Show a month in focus with 0index compensation
+                     */
+                    show: function( month, year ) {
+                        showMonth( --month, year )
+                        return P
+                    }, //show
+
+
+                    /**
+                     * Get a date in any format.
+                     * Defaults to getting the selected date
+                     */
+                    getDate: function( format, date ) {
+
+                        // Go through the date formats array and
+                        // convert the format passed into an array to map
+                        // which we join into a string at the end
+                        return DATE_FORMATS.toArray( format || SETTINGS.format ).map( function( value ) {
+
+                            // Trigger the date formats function
+                            // or just return value itself
+                            return triggerFunction( DATE_FORMATS[ value ], date || DATE_SELECTED ) || value
+                        }).join( '' )
+                    }, //getDate
+
+
+                    /**
+                     * Set the date with month 0index compensation
+                     * and an option to do a superficial selection
+                     */
+                    setDate: function( year, month, date, isSuperficial ) {
+
+                        // Compensate for month 0index and create a validated date.
+                        // Then set it as the date selected
+                        setDateSelected( createValidatedDate([ year, --month, date ]), isSuperficial )
+
+                        return P
+                    }, //setDate
+
+
+                    /**
+                     * Get the min or max date based on
+                     * the argument being truthy or falsey
+                     */
+                    getDateLimit: function( upper, format ) {
+
+                        // Get the max or min date depending on the `upper` flag
+                        return P.getDate( format, upper ? DATE_MAX : DATE_MIN )
+                    }, //getDateLimit
+
+
+                    /**
+                     * Set the min or max date based on second
+                     * argument being truthy or falsey.
+                     */
+                    setDateLimit: function( limit, upper ) {
+
+                        // If it's the upper limit
+                        if ( upper ) {
+
+                            // Set the max date
+                            DATE_MAX = createBoundaryDate( limit, upper )
+
+                            // If focused month is more than max date set it to max date
+                            if ( MONTH_FOCUSED.TIME > DATE_MAX.TIME ) {
+                                MONTH_FOCUSED = DATE_MAX
+                            }
+                        }
+
+                        // Otherwise it's the lower limit
+                        else {
+
+                            // So set the min date
+                            DATE_MIN = createBoundaryDate( limit )
+
+                            // If focused month is less than min date set it to min date
+                            if ( MONTH_FOCUSED.TIME < DATE_MIN.TIME ) {
+                                MONTH_FOCUSED = DATE_MIN
+                            }
+                        }
+
+                        // Render a new calendar
+                        calendarRender()
+
+                        return P
+                    }, //setDateLimit
+
+                    getMonth: function(){
+                        return MONTH_FOCUSED;
+                    }
+
+                }, //Picker.prototype
+
+
+                // The element node
+                ELEMENT = (function( element ) {
+
+                    // Check the autofocus state, convert the element into
+                    // a regular text input to remove user-agent stylings,
+                    // and then set the element as readonly
+                    element.autofocus = ( element == document.activeElement )
+                    element.type = 'text'
+                    element.readOnly = true
+                    return element
+                })( $ELEMENT[ 0 ] ), //ELEMENT
+
+
+                // The calendar object
+                CALENDAR = {
+                    id: ~~( Math.random() * 1e9 )
+                }, //CALENDAR
+
+
+                // The classes
+                CLASSES = SETTINGS.klass,
+
+
+                // The date in various formats
+                DATE_FORMATS = (function() {
+
+                    // Get the length of the first word
+                    function getFirstWordLength( string ) {
+                        return string.match( /\w+/ )[ 0 ].length
+                    }
+
+                    // If the second character is a digit, length is 2 otherwise 1.
+                    function getDigitsLength( string ) {
+                        return (/\d/).test( string[ 1 ] ) ? 2 : 1
+                    }
+
+                    // Get the length of the month from a string
+                    function getMonthLength( string, dateObj, collection ) {
+
+                        // Grab the first word
+                        var word = string.match( /\w+/ )[ 0 ]
+
+                        // If there's no index for the date object's month,
+                        // find it in the relevant months collection and add 1
+                        // because we subtract 1 when we create the date object
+                        if ( !dateObj.mm && !dateObj.m ) {
+                            dateObj.m = collection.indexOf( word ) + 1
+                        }
+
+                        // Return the length of the word
+                        return word.length
+                    }
+
+
+                    // Return the date formats object
+                    return {
+                        d: function( string ) {
+
+                            // If there's string, then get the digits length.
+                            // Otherwise return the selected date.
+                            return string ? getDigitsLength( string ) : this.DATE
+                        },
+                        dd: function( string ) {
+
+                            // If there's a string, then the length is always 2.
+                            // Otherwise return the selected date with a leading zero.
+                            return string ? 2 : leadZero( this.DATE )
+                        },
+                        ddd: function( string ) {
+
+                            // If there's a string, then get the length of the first word.
+                            // Otherwise return the short selected weekday.
+                            return string ? getFirstWordLength( string ) : SETTINGS.weekdaysShort[ this.DAY ]
+                        },
+                        dddd: function( string ) {
+
+                            // If there's a string, then get the length of the first word.
+                            // Otherwise return the full selected weekday.
+                            return string ? getFirstWordLength( string ) : SETTINGS.weekdaysFull[ this.DAY ]
+                        },
+                        m: function( string ) {
+
+                            // If there's a string, then get the length of the digits
+                            // Otherwise return the selected month with 0index compensation.
+                            return string ? getDigitsLength( string ) : this.MONTH + 1
+                        },
+                        mm: function( string ) {
+
+                            // If there's a string, then the length is always 2.
+                            // Otherwise return the selected month with 0index and leading zero.
+                            return string ? 2 : leadZero( this.MONTH + 1 )
+                        },
+                        mmm: function( string, dateObject ) {
+
+                            var collection = SETTINGS.monthsShort
+
+                            // If there's a string, get length of the relevant month string
+                            // from the short months collection. Otherwise return the
+                            // selected month from that collection.
+                            return string ? getMonthLength( string, dateObject, collection ) : collection[ this.MONTH ]
+                        },
+                        mmmm: function( string, dateObject ) {
+
+                            var collection = SETTINGS.monthsFull
+
+                            // If there's a string, get length of the relevant month string
+                            // from the full months collection. Otherwise return the
+                            // selected month from that collection.
+                            return string ? getMonthLength( string, dateObject, collection ) : collection[ this.MONTH ]
+                        },
+                        yy: function( string ) {
+
+                            // If there's a string, then the length is always 2.
+                            // Otherwise return the selected year by slicing out the first 2 digits.
+                            return string ? 2 : ( '' + this.YEAR ).slice( 2 )
+                        },
+                        yyyy: function( string ) {
+
+                            // If there's a string, then the length is always 4.
+                            // Otherwise return the selected year.
+                            return string ? 4 : this.YEAR
+                        },
+
+                        // Create an array by splitting the format passed
+                        toArray: function( format ) { return format.split( /(?=\b)(d{1,4}|m{1,4}|y{4}|yy)+(\b)/g ) }
+
+                    } //endreturn
+                })(), //DATE_FORMATS
+
+
+                // Create calendar object for today
+                DATE_TODAY = createDate(),
+
+
+                // Create the min date
+                DATE_MIN = createBoundaryDate( SETTINGS.dateMin ),
+
+
+                // Create the max date
+                // * A truthy second argument creates max date
+                DATE_MAX = createBoundaryDate( SETTINGS.dateMax, 1 ),
+
+
+                // Create a collection of dates to disable
+                DATES_TO_DISABLE = (function( datesCollection ) {
+
+                    // If a collection was passed
+                    // we need to create a calendar date object
+                    if ( Array.isArray( datesCollection ) ) {
+
+                        // If the "all" flag is true,
+                        // remove the flag from the collection and
+                        // flip the condition of which dates to disable
+                        if ( datesCollection[ 0 ] === true ) {
+                            CALENDAR.disabled = datesCollection.shift()
+                        }
+
+                        // Map through the dates passed
+                        // and return the collection
+                        return datesCollection.map( function( date ) {
+
+                            // If the date is a number, return the date minus 1
+                            // for weekday 0index plus the first day of the week
+                            if ( !isNaN( date ) ) {
+                                return --date + SETTINGS.firstDay
+                            }
+
+                            // Otherwise assume it's an array and fix the month 0index
+                            --date[ 1 ]
+
+                            // Then create and return the date,
+                            // replacing it in the collection
+                            return createDate( date )
+                        })
+                    }
+                })( SETTINGS.datesDisabled ), //DATES_TO_DISABLE
+
+
+                // Create a function that will filter through the dates
+                // and return true if looped date is to be disabled
+                DISABLED_DATES = (function() {
+
+                    // Check if the looped date should be disabled
+                    // based on the time being the same as a disabled date
+                    // or the day index being within the collection
+                    var isDisabledDate = function( date ) {
+                        return this.TIME == date.TIME || DATES_TO_DISABLE.indexOf( this.DAY ) > -1
+                    }
+
+
+                    // If all calendar dates should be disabled,
+                    // return a function that maps each date
+                    // in the collection of dates to not disable.
+                    // Otherwise check if this date should be disabled
+                    return CALENDAR.disabled ? function( date, i, collection ) {
+
+                            // Map the array of disabled dates
+                            // and check if this is not one
+                            return ( collection.map( isDisabledDate, this ).indexOf( true ) < 0 )
+                        } : isDisabledDate
+                })(), //DISABLED_DATES
+
+
+                // Create calendar object for the highlighted day
+                DATE_HIGHLIGHTED = (function( dateDataValue, dateEntered ) {
+
+                    // If there a date `data-value`
+                    if ( dateDataValue ) {
+
+                        // Set the date entered to an empty object
+                        dateEntered = {}
+
+                        // Map through the submit format array
+                        DATE_FORMATS.toArray( SETTINGS.formatSubmit ).map( function( formatItem ) {
+
+                            // If the formatting length function exists, invoke it with the
+                            // the format length in the `data-value` and the date we are creating.
+                            // Otherwise it is the length of the formatting item being mapped
+                            var formattingLength = DATE_FORMATS[ formatItem ] ? DATE_FORMATS[ formatItem ]( dateDataValue, dateEntered ) : formatItem.length
+
+                            // If the formatting length function exists, slice up
+                            // the value and pass it into the date we're creating.
+                            if ( DATE_FORMATS[ formatItem ] ) {
+                                dateEntered[ formatItem ] = dateDataValue.slice( 0, formattingLength )
+                            }
+
+                            // Update the remainder of the string by slicing the format length
+                            dateDataValue = dateDataValue.slice( formattingLength )
+                        })
+
+                        // Finally, create an array with the date entered while
+                        // parsing each item as an integer and compensating for 0index
+                        dateEntered = [ +(dateEntered.yyyy || dateEntered.yy), +(dateEntered.mm || dateEntered.m) - 1, +(dateEntered.dd || dateEntered.d) ]
+                    }
+
+
+                    // Otherwise, try to parse the date in the input
+                    else {
+                        dateEntered = Date.parse( dateEntered )
+                    }
+
+
+                    // If there's a valid date in the input or the dateEntered
+                    // is now an array, create a validated date with it.
+                    // Otherwise set the highlighted date to today after validating.
+                    return createValidatedDate( !isNaN( dateEntered ) || Array.isArray( dateEntered ) ? dateEntered : DATE_TODAY )
+                })( ELEMENT.getAttribute( 'data-value' ), ELEMENT.value ),
+
+
+                // The date selected is initially the date highlighted
+                DATE_SELECTED = DATE_HIGHLIGHTED,
+
+
+                // Month focused is based on highlighted date
+                MONTH_FOCUSED = DATE_HIGHLIGHTED,
+
+
+                // If there's a format for the hidden input element, create the element
+                // using the name of the original input plus suffix and update the value
+                // with whatever is entered in the input on load. Otherwise set it to zero.
+                ELEMENT_HIDDEN = SETTINGS.formatSubmit ? $( '<input type=hidden name=' + ELEMENT.name + SETTINGS.hiddenSuffix + '>' ).val( ELEMENT.value ? P.getDate( SETTINGS.formatSubmit ) : '' )[ 0 ] : null,
+
+
+                // Create the calendar table head with weekday labels
+                // by "copying" the weekdays collection based on the settings.
+                // * We do a copy so we don't mutate the original array.
+                TABLE_HEAD = (function( weekdaysCollection ) {
+
+                    // If the first day should be Monday
+                    if ( SETTINGS.firstDay ) {
+
+                        // Grab Sunday and push it to the end of the collection
+                        weekdaysCollection.push( weekdaysCollection.splice( 0, 1 )[ 0 ] )
+                    }
+
+                    // Go through each day of the week
+                    // and return a wrapped header row.
+                    // Take the result and apply another
+                    // table head wrapper to group it all.
+                    return createNode( 'thead',
+                        createNode( 'tr',
+                            weekdaysCollection.map( function( weekday ) {
+                                return createNode( 'th', weekday, CLASSES.weekdays )
+                            })
+                        )
+                    )
+                })( ( SETTINGS.showWeekdaysShort ? SETTINGS.weekdaysShort : SETTINGS.weekdaysFull ).slice( 0 ) ), //TABLE_HEAD
+
+
+                // Create the calendar holder with a new wrapped calendar and bind the click
+                $HOLDER = $( createNode( STRING_DIV, createCalendarWrapped(), CLASSES.holder ) ).on( 'click', onClickCalendar ),
+
+
+                // Translate a keycode to a relative change in date
+                KEYCODE_TO_DATE = {
+
+                    // Down
+                    40: 7,
+
+                    // Up
+                    38: -7,
+
+                    // Right
+                    39: 1,
+
+                    // Left
+                    37: -1
+                } //KEYCODE_TO_DATE
+
+
+
+
+            /**
+             * Create the nav for next/prev month
+             */
+            function createMonthNav( next ) {
+
+                // If the focused month is outside the range
+                // return an empty string
+                if ( ( next && MONTH_FOCUSED.YEAR >= DATE_MAX.YEAR && MONTH_FOCUSED.MONTH >= DATE_MAX.MONTH ) || ( !next && MONTH_FOCUSED.YEAR <= DATE_MIN.YEAR && MONTH_FOCUSED.MONTH <= DATE_MIN.MONTH ) ) {
+                    return ''
+                }
+
+                var monthTag = 'month' + ( next ? 'Next' : 'Prev' )
+
+                // Otherwise, return the created tag
+                return createNode( STRING_DIV,
+                    SETTINGS[ monthTag ],
+                    CLASSES[ monthTag ],
+                    'data-nav=' + ( next || -1 )
+                ) //endreturn
+            } //createMonthNav
+
+
+            /**
+             * Create the month label
+             */
+            function createMonthLabel( monthsCollection ) {
+
+
+                // If there's a need for a month selector
+                return SETTINGS.monthSelector ?
+
+                    // Create the dom string node for a select element
+                    createNode( 'select',
+
+                        // Map through the months collection
+                        monthsCollection.map( function( month, monthIndex ) {
+
+                            // Create a dom string node for each option
+                            return createNode( 'option',
+
+                                // With the month and no classes
+                                month, 0,
+
+                                // Set the value and selected index
+                                'value=' + monthIndex + ( MONTH_FOCUSED.MONTH == monthIndex ? ' selected' : '' ) +
+
+                                // Plus the disabled attribute if it's outside the range
+                                getMonthInRange( monthIndex, MONTH_FOCUSED.YEAR, ' disabled', '' )
+                            )
+                        }),
+
+                        // The month selector class
+                        CLASSES.monthSelector,
+
+                        // And some tabindex
+                        'tabindex=' + ( CALENDAR.isOpen ? 0 : -1 )
+
+                    // Otherwise just return the month focused
+                    ) : createNode( STRING_DIV, monthsCollection[ MONTH_FOCUSED.MONTH ], CLASSES.month )
+            } //createMonthLabel
+
+
+            /**
+             * Create the year label
+             */
+            function createYearLabel() {
+
+                var
+                    yearFocused = MONTH_FOCUSED.YEAR,
+                    yearsInSelector = SETTINGS.yearSelector
+
+
+                // If there is a need for a years selector
+                // then create a dropdown within the valid range
+                if ( yearsInSelector ) {
+
+                    // If year selector setting is true, default to 5.
+                    // Otherwise divide the years in selector in half
+                    // to get half before and half after
+                    yearsInSelector = yearsInSelector === true ? 5 : ~~( yearsInSelector / 2 )
+
+                    var
+                        // Create a collection to hold the years
+                        yearsCollection = [],
+
+                        // The lowest year possible is the difference between
+                        // the focused year and the number of years in the selector
+                        lowestYear = yearFocused - yearsInSelector,
+
+                        // The first year is the lower of the two numbers.
+                        // The lowest year or the minimum year.
+                        firstYear = getNumberInRange( lowestYear, DATE_MIN.YEAR ),
+
+                        // The highest year is the sum of the focused year
+                        // and the years in selector plus the left over years.
+                        highestYear = yearFocused + yearsInSelector + ( firstYear - lowestYear ),
+
+                        // The last year is the higher of the two numbers.
+                        // The highest year or the maximum year.
+                        lastYear = getNumberInRange( highestYear, DATE_MAX.YEAR, 1 )
+
+
+                    // Check if there are left over years to put in the selector
+                    yearsInSelector = highestYear - lastYear
+
+
+                    // If there are left overs
+                    if ( yearsInSelector ) {
+
+                        // The first year is the lower of the two numbers.
+                        // The lowest year minus years in selector, or the minimum year
+                        firstYear = getNumberInRange( lowestYear - yearsInSelector, DATE_MIN.YEAR )
+                    }
+
+
+                    // Add the years to the collection by looping through the range
+                    for ( var index = 0; index <= lastYear - firstYear; index += 1 ) {
+                        yearsCollection.push( firstYear + index )
+                    }
+
+
+                    // Create the dom string node for a select element
+                    return createNode( 'select',
+
+                        // Map through the years collection
+                        yearsCollection.map( function( year ) {
+
+                            // Create a dom string node for each option
+                            return createNode( 'option',
+
+                                // With the year and no classes
+                                year, 0,
+
+                                // Set the value and selected index
+                                'value=' + year + ( yearFocused == year ? ' selected' : '' )
+                            )
+                        }),
+
+                        // The year selector class
+                        CLASSES.yearSelector,
+
+                        // And some tabindex
+                        'tabindex=' + ( CALENDAR.isOpen ? 0 : -1 )
+                    )
+                }
+
+
+                // Otherwise just return the year focused
+                return createNode( STRING_DIV, yearFocused, CLASSES.year )
+            } //createYearLabel
+
+
+            /**
+             * Create the calendar table body
+             */
+            function createTableBody() {
+
+                var
+                    // The loop date object
+                    loopDate,
+
+                    // A pseudo index will be the divider between
+                    // the previous month and the focused month
+                    pseudoIndex,
+
+                    // An array that will hold the classes
+                    // and binding for each looped date
+                    classAndBinding,
+
+                    // Collection of the dates visible on the calendar
+                    // * This gets discarded at the end
+                    calendarDates = [],
+
+                    // Weeks visible on the calendar
+                    calendarWeeks = '',
+
+                    // Count the number of days in the focused month
+                    // by getting the 0-th date of the next month
+                    countMonthDays = createDate([ MONTH_FOCUSED.YEAR, MONTH_FOCUSED.MONTH + 1, 0 ]).DATE,
+
+                    // Count the days to shift the start of the month
+                    countShiftby = getCountShiftDays( MONTH_FOCUSED.DATE, MONTH_FOCUSED.DAY ),
+
+
+                    // Set the class and binding for each looped date.
+                    // Returns an array with 2 items:
+                    // 1) The classes string
+                    // 2) The data binding string
+                    createDateClassAndBinding = function( loopDate, isMonthFocused ) {
+
+                        var
+                            // Boolean check for date state
+                            isDateDisabled = false,
+
+                            // Create a collection for the classes
+                            // with the default classes already included
+                            klassCollection = [
+
+                                // The generic day class
+                                CLASSES.day,
+
+                                // The class for in or out of focus
+                                ( isMonthFocused ? CLASSES.dayInfocus : CLASSES.dayOutfocus )
+                            ]
+
+
+                        // If it's less than the minimum date
+                        // or greater than the maximum date
+                        // or if there are dates to disable
+                        // and this looped date is one of them
+                        if ( loopDate.TIME < DATE_MIN.TIME || loopDate.TIME > DATE_MAX.TIME || ( DATES_TO_DISABLE && DATES_TO_DISABLE.filter( DISABLED_DATES, loopDate ).length ) ) {
+
+                            // Flip the boolen
+                            isDateDisabled = true
+
+                            // Add the disabled class
+                            klassCollection.push( CLASSES.dayDisabled )
+                        }
+
+
+                        // If it's today, add the class
+                        if ( loopDate.TIME == DATE_TODAY.TIME ) {
+                            klassCollection.push( CLASSES.dayToday )
+                        }
+
+
+                        // If it's the highlighted date, add the class
+                        if ( loopDate.TIME == DATE_HIGHLIGHTED.TIME ) {
+                            klassCollection.push( CLASSES.dayHighlighted )
+                        }
+
+
+                        // If it's the selected date, add the class
+                        if ( loopDate.TIME == DATE_SELECTED.TIME ) {
+                            klassCollection.push( CLASSES.daySelected )
+                        }
+
+
+                        // Return an array with the classes and data binding
+                        return [
+
+                            // Return the classes joined
+                            // by a single whitespace
+                            klassCollection.join( ' ' ),
+
+                            // Create the data binding object
+                            // with the value as a string
+                            'data-' + ( isDateDisabled ? 'disabled' : 'date' ) + '=' + [
+                                loopDate.YEAR,
+                                loopDate.MONTH,
+                                loopDate.DATE
+                            ].join( '/' )
+                        ]
+                    } //createDateClassAndBinding
+
+
+
+                // Go through all the days in the calendar
+                // and map a calendar date
+                for ( var index = 0; index < DAYS_IN_CALENDAR; index += 1 ) {
+
+                    // Get the distance between the index
+                    // and the count to shift by.
+                    // This will serve as the separator
+                    // between the previous, current,
+                    // and next months.
+                    pseudoIndex = index - countShiftby
+
+
+                    // Create a calendar date with
+                    // a negative or positive pseudoIndex
+                    loopDate = createDate([ MONTH_FOCUSED.YEAR, MONTH_FOCUSED.MONTH, pseudoIndex ])
+
+
+                    // Set the date class and bindings on the looped date.
+                    // If the pseudoIndex is greater than zero,
+                    // and less than the days in the month,
+                    // we need dates from the focused month.
+                    classAndBinding = createDateClassAndBinding( loopDate, ( pseudoIndex > 0 && pseudoIndex <= countMonthDays ) )
+
+
+                    // Create the looped date wrapper,
+                    // and then create the table cell wrapper
+                    // and finally pass it to the calendar array
+                    calendarDates.push( createNode( 'td', createNode( STRING_DIV, loopDate.DATE, classAndBinding[ 0 ], classAndBinding[ 1 ] ) ) )
+
+
+                    // Check if it's the end of a week.
+                    // * We add 1 for 0index compensation
+                    if ( ( index % DAYS_IN_WEEK ) + 1 == DAYS_IN_WEEK ) {
+
+                        // Wrap the week and append it into the calendar weeks
+                        calendarWeeks += createNode( 'tr', calendarDates.splice( 0, DAYS_IN_WEEK ) )
+                    }
+
+                } //endfor
+
+
+
+                // Join the dates and wrap the calendar body
+                return createNode( 'tbody', calendarWeeks, CLASSES.calendarBody )
+            } //createTableBody
+
+
+            /**
+             * Create the wrapped calendar
+             * using the collection of calendar items
+             * and creating a new table body
+             */
+            function createCalendarWrapped() {
+
+                // Create a calendar wrapper node
+                return createNode( STRING_DIV,
+
+                    // Create a calendar box node
+                    createNode( STRING_DIV,
+
+                        // The prev/next month tags
+                        // * Truthy argument creates "next" tag
+                        createNode( STRING_DIV, createMonthNav() + createMonthNav( 1 ), CLASSES.monthNav ) +
+
+                        // The calendar month tag
+                        createNode( STRING_DIV, createMonthLabel( SETTINGS.showMonthsFull ? SETTINGS.monthsFull : SETTINGS.monthsShort ), CLASSES.monthWrap ) +
+
+                        // The calendar year tag
+                        createNode( STRING_DIV, createYearLabel(), CLASSES.yearWrap ) +
+
+                        // The calendar table with table head
+                        // and a new calendar table body
+                        createNode( 'table', [ TABLE_HEAD, createTableBody() ], CLASSES.calendarTable ),
+
+                        // Calendar class
+                        CLASSES.calendar
+                    ),
+
+                    // Calendar wrap class
+                    CLASSES.calendarWrap
+                ) //endreturn
+            } //calendarWrapped
+
+
+            /**
+             * Get the number that's allowed within an
+             * upper or lower limit. A truthy third argument
+             * test against the upper limit.
+             */
+            function getNumberInRange( number, limit, upper ) {
+
+                // If we need to test against the upper limit
+                // and number is less than the limit,
+                // or we need to test against the lower limit
+                // and number is more than the limit,
+                // return the number. Otherwise return the limit.
+                return ( ( upper && number < limit ) || ( !upper && number > limit ) ? number : limit )
+            } //getNumberInRange
+
+
+            /**
+             * Get the count of the number of
+             * days to shift the month by,
+             * given the date and day of week
+             */
+            function getCountShiftDays( date, dayIndex ) {
+
+                var
+                    // Get the column index for the
+                    // day if month starts on 0
+                    dayColumnIndexAtZero = date % DAYS_IN_WEEK,
+
+                    // Get the difference between the actual
+                    // day index and the column index at zero.
+                    // Then, if the first day should be Monday,
+                    // reduce the difference by 1
+                    difference = dayIndex - dayColumnIndexAtZero + ( SETTINGS.firstDay ? -1 : 0 )
+
+
+                // Compare the day index if the
+                // month starts on the first day
+                // with the day index
+                // the date actually falls on
+                return dayIndex >= dayColumnIndexAtZero ?
+
+                    // If the actual position is greater
+                    // shift by the difference in the two
+                    difference :
+
+                    // Otherwise shift by the adding the negative
+                    // difference to the days in week
+                    DAYS_IN_WEEK + difference
+            } //getCountShiftDays
+
+
+
+            /**
+             * Set a date as selected or only highlighted
+             */
+            function setDateSelected( dateTargeted, isHighlight ) {
+
+                // Set the target as the highlight
+                DATE_HIGHLIGHTED = dateTargeted
+
+                // Set the target as the focus
+                MONTH_FOCUSED = dateTargeted
+
+                // If it's just a highlight, render a new calendar
+                if ( isHighlight ) {
+                    calendarRender()
+                }
+
+                // Otherwise set the element value as well
+                // * A truthy second argument renders new calendar
+                else {
+                    setElementsValue( dateTargeted, 1 )
+                }
+            } //setDateSelected
+
+
+
+            /**
+             * Set the date in the input element and hidden input
+             */
+            function setElementsValue( dateTargeted, updateCalendar ) {
+
+                // Set the target as the selection
+                DATE_SELECTED = dateTargeted
+
+                // Set the element value as the formatted date
+                ELEMENT.value = P.getDate()
+
+                // If there's a hidden input,
+                // set the value with the submit format
+                if ( ELEMENT_HIDDEN ) {
+                    ELEMENT_HIDDEN.value = P.getDate( SETTINGS.formatSubmit )
+                }
+
+                // If the calendar should be updated, render a new one
+                if ( updateCalendar ) {
+                    calendarRender()
+                }
+
+                // Trigger the onSelect method within scope of the picker
+                triggerFunction( SETTINGS.onSelect, P )
+            } //setElementsValue
+
+
+
+            /**
+             * Set the date that determines
+             * the month to show in focus
+             */
+            function setMonthFocused( month, year ) {
+
+                // Create and return the month focused
+                // * We set the date to first of month
+                //   because date doesn't matter here
+                return ( MONTH_FOCUSED = createDate([ year, month, 1 ]) )
+            } //setMonthFocused
+
+
+            /**
+             * Find something within the calendar holder
+             */
+            function $findInHolder( klass ) {
+                return $HOLDER.find( '.' + klass )
+            } //$findInHolder
+
+
+            /**
+             * Show the month visible on the calendar
+             */
+            function showMonth( month, year ) {
+
+                // Ensure we have a year to work with
+                year = year || MONTH_FOCUSED.YEAR
+
+                // Get the month to be within
+                // the minimum and maximum date limits
+                month = getMonthInRange( month, year )
+
+                // Set the month to show in focus
+                setMonthFocused( month, year )
+
+                // Then render a new calendar
+                calendarRender()
+
+                triggerFunction( SETTINGS.onChangeMonth, P )
+            } //showMonth
+
+
+            /**
+             * Create a bounding date allowed on the calendar
+             * * A truthy second argument creates the upper boundary
+             */
+            function createBoundaryDate( limit, upper ) {
+
+                // If the limit is set to true, just return today
+                if ( limit === true ) {
+                    return DATE_TODAY
+                }
+
+                // If the limit is an array, construct the date
+                // while fixing month 0index
+                if ( Array.isArray( limit ) ) {
+                    --limit[ 1 ]
+                    return createDate( limit )
+                }
+
+                // If there is a limit and its a number, create a
+                // calendar date relative to today by adding the limit
+                if ( limit && !isNaN( limit ) ) {
+                    return createDate([ DATE_TODAY.YEAR, DATE_TODAY.MONTH, DATE_TODAY.DATE + limit ])
+                }
+
+                // Otherwise create an infinite date
+                return createDate( 0, upper ? Infinity : -Infinity )
+            } //createBoundaryDate
+
+
+            /**
+             * Create a validated date
+             */
+            function createValidatedDate( datePassed, direction ) {
+
+
+                // If the date passed isn't a date, create one
+                datePassed = !datePassed.TIME ? createDate( datePassed ) : datePassed
+
+
+                // If there are disabled dates
+                if ( DATES_TO_DISABLE ) {
+
+                    // Create a reference to the original date passed
+                    var originalDate = datePassed
+
+                    // Check if this date is disabled. If it is,
+                    // then keep adding the direction (or 1) to the date
+                    // until we get to a date that's enabled.
+                    while ( DATES_TO_DISABLE.filter( DISABLED_DATES, datePassed ).length ) {
+
+                        // Create the next date based on the direction
+                        datePassed = createDate([ datePassed.YEAR, datePassed.MONTH, datePassed.DATE + ( direction || 1 ) ])
+
+                        // If we've looped through to another month,
+                        // then increase/decrease the date by one and
+                        // continue looping with the new original date
+                        if ( datePassed.MONTH != originalDate.MONTH ) {
+                            datePassed = createDate([ originalDate.YEAR, originalDate.MONTH, direction > 0 ? ++originalDate.DATE : --originalDate.DATE ])
+                            originalDate = datePassed
+                        }
+                    }
+                }
+
+
+                // If it's less that min date, set it to min date
+                // by creating a validated date by adding one
+                // until we find an enabled date
+                if ( datePassed.TIME < DATE_MIN.TIME ) {
+                    datePassed = createValidatedDate( DATE_MIN )
+                }
+
+
+                // If it's more than max date, set it to max date
+                // by creating a validated date by subtracting one
+                // until we find an enabled date
+                else if ( datePassed.TIME > DATE_MAX.TIME ) {
+                    datePassed = createValidatedDate( DATE_MAX, -1 )
+                }
+
+
+                // Finally, return the date
+                return datePassed
+            } //createValidatedDate
+
+
+            /**
+             * Return a month by comparing with the date range.
+             * If outside the range, returns the value passed.
+             * Otherwise returns the in range value or the month itself.
+             */
+            function getMonthInRange( month, year, returnValue, inRangeValue ) {
+
+                // If the month is less than the min month,
+                // then return the return value or min month
+                if ( year <= DATE_MIN.YEAR && month < DATE_MIN.MONTH ) {
+                    return returnValue || DATE_MIN.MONTH
+                }
+
+                // If the month is more than the max month,
+                // then return the return value or max month
+                if ( year >= DATE_MAX.YEAR && month > DATE_MAX.MONTH ) {
+                    return returnValue || DATE_MAX.MONTH
+                }
+
+                // Otherwise return the in range return value
+                // or the month itself
+                return inRangeValue != null ? inRangeValue : month
+            } //getMonthInRange
+
+
+            /**
+             * Render a new calendar
+             */
+            function calendarRender() {
+
+                // Create a new wrapped calendar
+                // and place it within the holder
+                $HOLDER.html( createCalendarWrapped() )
+
+                // Do stuff after rendering the calendar
+                postRender()
+            } //calendarRender
+
+
+            /**
+             * Stuff to do after a calendar has been rendered
+             */
+            function postRender() {
+
+                // Find and store the month selector
+                CALENDAR.selectMonth = $findInHolder( CLASSES.monthSelector ).on({
+
+                    // *** For iOS ***
+                    click: function( event ) { event.stopPropagation() },
+
+                    // Bind the change event
+                    change: function() {
+
+                        // Show the month based on the option selected
+                        // while parsing as a float
+                        showMonth( +this.value )
+
+                        // Find the new month selector and focus back on it
+                        $findInHolder( CLASSES.monthSelector ).focus()
+                    }
+                })[ 0 ]
+
+                // Find and store the year selector
+                CALENDAR.selectYear = $findInHolder( CLASSES.yearSelector ).on({
+
+                    // *** For iOS ***
+                    click: function( event ) { event.stopPropagation() },
+
+                    // Bind the change event
+                    change: function() {
+
+                        // Show the year based on the option selected
+                        // and month currently in focus while parsing as a float
+                        showMonth( MONTH_FOCUSED.MONTH, +this.value )
+
+                        // Find the new year selector and focus back on it
+                        $findInHolder( CLASSES.yearSelector ).focus()
+                    }
+                })[ 0 ]
+            } //postRender
+
+
+
+
+
+
+            /**
+             * Handle all delegated click events on the calendar holder
+             */
+            function onClickCalendar( event ) {
+
+                var
+                    // Get the jQuery target
+                    $target = $( event.target ),
+
+                    // Get the target data
+                    targetData = $target.data()
+
+
+                // Stop the event from bubbling up to the document
+                event.stopPropagation()
+
+
+                // Put focus back onto the element
+                $ELEMENT.focus()
+
+
+                // If there's a date provided
+                if ( targetData.date ) {
+
+                    // Split the target data into an array while parsing each as integer
+                    var dateToSelect = targetData.date.split( '/' ).map( function( value ) { return +value })
+
+                    // Create a date from the date to select and set the date as selected
+                    // * Falsy second argument updates the element values
+                    setDateSelected( createDate( dateToSelect ), false, $target )
+
+                    // Close the calendar
+                    P.close()
+                }
+
+
+                // If there's a navigator provided
+                if ( targetData.nav ) {
+
+                    // Show the month according to the direction
+                    showMonth( MONTH_FOCUSED.MONTH + targetData.nav )
+                }
+            } //onClickCalendar
+
+
+
+            /**
+             * Handle all document events when the calendar is open
+             */
+            function onDocumentEvent( event ) {
+
+                var
+                    // Get the keycode
+                    keycode = event.keyCode,
+
+                    // Get the target
+                    target = event.target
+
+
+                // If target is not the element, nor the select
+                // menus, close the calendar.
+                if ( target != ELEMENT && target != CALENDAR.selectMonth && target != CALENDAR.selectYear ) {
+                    P.close()
+                    return
+                }
+
+                // If the target is the select menu, remove the
+                // "focus" state from the input element
+                if ( target == CALENDAR.selectMonth || target == CALENDAR.selectYear ) {
+                    $ELEMENT.removeClass( CLASSES.inputFocus )
+                    return
+                }
+
+
+                // If theres a keycode and the target is the element
+                if ( keycode && target == ELEMENT ) {
+
+
+                    // Prevent the default action if a "super" key
+                    // is not held and the tab key isn't pressed,
+                    // prevent the default action
+                    if ( !event.metaKey && keycode != 9 ) {
+                        event.preventDefault()
+                    }
+
+
+                    // On enter, set the element value as the highlighted date
+                    // * Truthy second argument renders a new calendar
+                    if ( keycode == 13 ) {
+                        setElementsValue( DATE_HIGHLIGHTED, 1 )
+                        P.close()
+                        return
+                    }
+
+
+                    // On escape, close the calendar
+                    if ( keycode == 27 ) {
+                        P.close()
+                        return
+                    }
+
+
+                    // If the keycode translates to a date change,
+                    // set the date as superficially selected by
+                    // creating new validated dates - incrementing by the date change.
+                    // * Truthy second argument makes it a superficial selection
+                    if ( KEYCODE_TO_DATE[ keycode ] ) {
+                        setDateSelected( createValidatedDate( [ MONTH_FOCUSED.YEAR, MONTH_FOCUSED.MONTH, DATE_HIGHLIGHTED.DATE + KEYCODE_TO_DATE[ keycode ] ], KEYCODE_TO_DATE[ keycode ] ), 1 )
+                    }
+
+                } //if ELEMENT
+            } //onDocumentEvent
+
+
+            // Return a new initialized picker
+            return new P.init()
+        } //Picker
+
+
+
+
+
+    /**
+     * Helper functions
+     */
+
+    // Check if a value is a function
+    // and trigger it, if that
+    function triggerFunction( callback, scope ) {
+        if ( typeof callback == 'function' ) {
+            return callback.call( scope )
+        }
+    }
+
+    // Return numbers below 10 with a leading zero
+    function leadZero( number ) {
+        return ( number < 10 ? '0': '' ) + number
+    }
+
+    // Create a dom node string
+    function createNode( wrapper, item, klass, attribute ) {
+
+        // If the item is an array, do a join
+        item = Array.isArray( item ) ? item.join( '' ) : item
+
+        // Check for the class
+        klass = klass ? ' class="' + klass + '"' : ''
+
+        // Check for any attributes
+        attribute = attribute ? ' ' + attribute : ''
+
+        // Return the wrapped item
+        return '<' + wrapper + klass + attribute + '>' + item + '</' + wrapper + '>'
+    } //createNode
+
+    // Create a calendar date
+    function createDate( datePassed, unlimited ) {
+
+        // If the date passed is an array
+        if ( Array.isArray( datePassed ) ) {
+
+            // Create the date
+            datePassed = new Date( datePassed[ 0 ], datePassed[ 1 ], datePassed[ 2 ] )
+        }
+
+        // If the date passed is a number
+        else if ( !isNaN( datePassed ) ) {
+
+            // Create the date
+            datePassed = new Date( datePassed )
+        }
+
+
+        // Otherwise if it's not unlimited
+        else if ( !unlimited ) {
+
+            // Set the date to today
+            datePassed = new Date()
+
+            // Set the time to midnight (for comparison purposes)
+            datePassed.setHours( 0, 0, 0, 0 )
+        }
+
+
+        // Return the calendar date object
+        return {
+            YEAR: unlimited || datePassed.getFullYear(),
+            MONTH: unlimited || datePassed.getMonth(),
+            DATE: unlimited || datePassed.getDate(),
+            DAY: unlimited || datePassed.getDay(),
+            TIME: unlimited || datePassed.getTime()
+        }
+    } //createDate
+
+
+
+
+    /**
+     * Extend jQuery
+     */
+    $.fn.pickadate = function( options ) {
+
+        var pickadate = 'pickadate'
+
+        // Merge the options with a deep copy
+        options = $.extend( true, {}, $.fn.pickadate.defaults, options )
+
+        // Check if it should be disabled
+        // for browsers that natively support `type=date`
+        if ( options.disablePicker ) { return this }
+
+        return this.each( function() {
+            var $this = $( this )
+            if ( this.nodeName == 'INPUT' && !$this.data( pickadate ) ) {
+                $this.data( pickadate, new Picker( $this, options ) )
+            }
+        })
+    } //$.fn.pickadate
+
+
+
+    /**
+     * Default options for the picker
+     */
+    $.fn.pickadate.defaults = {
+
+        monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
+        monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
+
+        weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
+        weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
+
+        monthPrev: '&#9664;',
+        monthNext: '&#9654;',
+
+        // Display strings
+        showMonthsFull: true,
+        showWeekdaysShort: true,
+
+        // Date format to show on the input element
+        format: 'd mmmm, yyyy',
+
+        // Date format to send to the server
+        formatSubmit: false,
+
+        // Hidden element name suffix
+        hiddenSuffix: '_submit',
+
+        // First day of the week: 0 = Sunday, 1 = Monday
+        firstDay: 0,
+
+        // Month & year dropdown selectors
+        monthSelector: false,
+        yearSelector: false,
+
+        // Date ranges
+        dateMin: false,
+        dateMax: false,
+
+        // Dates to disable
+        datesDisabled: false,
+
+        // Disable for browsers with native date support
+        disablePicker: false,
+
+        // Events
+        onOpen: null,
+        onClose: null,
+        onSelect: null,
+        onChangeMonth: null,
+        onStart: null,
+
+
+        // Classes
+        klass: {
+
+            inputFocus: STRING_PREFIX_DATEPICKER + 'input--focused',
+
+            holder: STRING_PREFIX_DATEPICKER + 'holder',
+            open: STRING_PREFIX_DATEPICKER + 'holder--opened',
+
+            calendar: STRING_PREFIX_DATEPICKER + 'calendar',
+            calendarWrap: STRING_PREFIX_DATEPICKER + 'calendar--wrap',
+            calendarTable: STRING_PREFIX_DATEPICKER + 'calendar--table',
+            calendarBody: STRING_PREFIX_DATEPICKER + 'calendar--body',
+
+            year: STRING_PREFIX_DATEPICKER + 'year',
+            yearWrap: STRING_PREFIX_DATEPICKER + 'year--wrap',
+            yearSelector: STRING_PREFIX_DATEPICKER + 'year--selector',
+
+            month: STRING_PREFIX_DATEPICKER + 'month',
+            monthWrap: STRING_PREFIX_DATEPICKER + 'month--wrap',
+            monthSelector: STRING_PREFIX_DATEPICKER + 'month--selector',
+            monthNav: STRING_PREFIX_DATEPICKER + 'month--nav',
+            monthPrev: STRING_PREFIX_DATEPICKER + 'month--prev',
+            monthNext: STRING_PREFIX_DATEPICKER + 'month--next',
+
+            week: STRING_PREFIX_DATEPICKER + 'week',
+            weekdays: STRING_PREFIX_DATEPICKER + 'weekday',
+
+            day: STRING_PREFIX_DATEPICKER + 'day',
+            dayDisabled: STRING_PREFIX_DATEPICKER + 'day--disabled',
+            daySelected: STRING_PREFIX_DATEPICKER + 'day--selected',
+            dayHighlighted: STRING_PREFIX_DATEPICKER + 'day--highlighted',
+            dayToday: STRING_PREFIX_DATEPICKER + 'day--today',
+            dayInfocus: STRING_PREFIX_DATEPICKER + 'day--infocus',
+            dayOutfocus: STRING_PREFIX_DATEPICKER + 'day--outfocus'
+        }
+    } //$.fn.pickadate.defaults
+
+
+
+})( jQuery, window, document );
+
+
+
+
+
+