jquery.datePicker example: linked datePickers with start and end dates and code to get a list of dates

< date picker home

The following example displays how you can synchronise two date pickers together and get a list of all of the dates that fall between the start date and end date...

Test date picker form

Page sourcecode

$(function()
{
    $('.date-pick').datePicker()
    $('#start-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = new Date(d);
                $('#end-date').dpSetStartDate(d.addDays(1).asString());
            }
        }
    );
    $('#end-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = new Date(d);
                $('#start-date').dpSetEndDate(d.addDays(-1).asString());
            }
        }
    );
    $('#go-button').bind(
        'click',
        function(e)
        {
            var d = $('#start-date').dpGetSelected()[0];
            var endD = $('#end-date').dpGetSelected()[0];
            var datesInRange = [];
            if (d && endD)
            {
                d = new Date(d)
                endD = endD;
                while (d.getTime() != endD)
                {
                    datesInRange.push(d.asString());
                    d.addDays(1);
                }
                alert(datesInRange);
            } else {
                alert('Please select start and end dates');
            }
            return false;
        }
    );
});

Page CSS

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
    float: left;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 5px 3px 0;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
    background-position: 0 -20px;
    cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
    width: 140px;
    float: left;
}