Re: Timesheet entry form that auto-fills the Date ranges?

Here is the solution to populate the week-day labels:

------------------------------------------------------------------

<!--- Populate the Week Days with Dates after employee picks the week from calendar --->

<script type="text/javascript">

$(function() {

    var startDate;

    var endDate;

    var monDate;

          var tueDate;

          var wedDate;

          var thuDate;

          var friDate;

          var satDate;

          var sunDate;

    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,

                    dateFormat: "mm/dd",

                    firstDay: 1, // Start with Monday

        onSelect: function(dateText, inst) {

            var date = $(this).datepicker('getDate');

            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);

            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

                              monDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);

                              tueDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);

                              wedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);

                              thuDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);

                              friDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);

                              satDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

                              sunDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            $('#startDate').val($.datepicker.formatDate( dateFormat, startDate, inst.settings ));

            $('#endDate').val($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            $('#monDate').val($.datepicker.formatDate( dateFormat, monDate, inst.settings ));

                              $('#tueDate').val($.datepicker.formatDate( dateFormat, tueDate, inst.settings ));

                              $('#wedDate').val($.datepicker.formatDate( dateFormat, wedDate, inst.settings ));

                              $('#thuDate').val($.datepicker.formatDate( dateFormat, thuDate, inst.settings ));

                              $('#friDate').val($.datepicker.formatDate( dateFormat, friDate, inst.settings ));

                              $('#satDate').val($.datepicker.formatDate( dateFormat, satDate, inst.settings ));

                              $('#sunDate').val($.datepicker.formatDate( dateFormat, sunDate, 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'); });

});

</script>

------------------------------------------------------------