Question

This may be a basic question but I need to know how can I approach this requirement.
We run selfaudit on each monday and I am developing a chart to show the details. The user will have an option to select not a particular date but a week.
How can I implement this option
1) I can have a select option list showing the mondays (with date) from most recent to the most old.
2) I can have a datepicker which has only mondays enabled? – for this can I just hide other dates in the datepicker than make it diabled? I am using jquery datepicker with a timepicker addon (http://trentrichardson.com/examples/timepicker/).

How do I approach this requirement?
Thanks in Advance

Answer 1

Usually the way this is handled is to allow the user to select any date and then automatically select all the dates within the week that include the selected date. There is an example of how this works using the default JQuery date picker at http://www.tikalk.com/incubator/week-picker-using-jquery-ui-datepicker.

The relevant script is:

$(function() {
    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});