jquery.datePicker example: karmasAgent demo 2

< date picker home

The following example is part II (see part I) of a series and was written to answer this support request.

Page sourcecode

$(function()
{
    $('#monthsList li').each(
        function()
        {
            $this = $(this);
            
            var d = Date.fromString('01/' + $this.html());
            var startDate = d.asString();
            d.setMonth(d.getMonth() + 1);
            d.addDays(-1);
            var endDate = d.asString();
            
            $this
                .datePicker(
                    {
                        createButton:false,
                        startDate: startDate,
                        endDate: endDate
                    }
                )
                .bind(
                    'click',
                    function()
                    {
                        $(this).dpDisplay();
                        this.blur();
                        return false;
                    }
                )
                .bind(
                    'dateSelected',
                    function(e, selectedDate, $td)
                    {
                        Date.format = 'yyyymmdd';
                        // alert the URL
                        alert('http://www.myURL.com/section/' + selectedDate.asString());
                        // reassign the date format back to how you want it.
                        Date.format = 'dd/mm/yyyy';
                    }
                );
        }
    )
});

Page CSS

/* Make it so that dates from other months don't show up */    
td.other-month {
    visibility: hidden;
}