jQuery-ui Datepicker return first day of selected week

Question

How can I edit my datepicker to return the first day of the selected week? Currently, it always returns the exact date of the selected date.

What I want is: If I select "Wednesday 28/08/2013" the datepicker should return "Monday 26/08/2013". How can I achieve this?

if I write in textboxfor @id="#startDate don't work.

@Html.TextBoxFor(m => m.datS, new { @type = "text", @width = "80", @maxlength = 10, @readonly = "true" })

@Html.TextBoxFor(m => m.datE, new { @type = "text", @width = "80", @maxlength = 10, @readonly = "true" })

Here is javascript for datepicker.

 $(function () {
         var startDate;
         var endDate;
         var dateToday = new Date();
         var selectCurrentWeek = function () {
             window.setTimeout(function () {
                 $('#datS, #datE').find('.ui-datepicker-current-day a').addClass('ui-state-active')
             }, 1);
         }
         $('#datS, #datE').datepicker({
             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() + 5);
                 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();
             },
             onClose: function (selectedDate, test) {
                 var day = ('0' + (parseInt(test.selectedDay))).slice(-2);
                 var month = ('0' + (test.selectedMonth)).slice(-2);
                 var year = test.selectedYear;
                 var tempDate = new Date(year, month, day);
                 if (this.id == "datS") {
                     tempDate.setDate(tempDate.getDate() + 1);
                     $("#datE").datepicker("option", "minDate", tempDate);
                 }
                 if (this.id == "datE") {
                     tempDate.setDate(tempDate.getDate() - 1);
                     $("#datS").datepicker("option", "maxDate", tempDate);
                 }
             }
         });

Answer 1

I have created a jQuery plugin that can do this. Get it at https://github.com/Prezent/jquery-weekpicker or through Bower. Example usage:

$('#selector').weekpicker({
    startField: '#date-start',
    endField: '#date-end'
});

Answer 2

FIDDLE

$(function() {
    $( "#datepicker" ).datepicker({
        showWeek: true,
        firstDay: 1,
        onSelect: function(date){
         var d = new Date(date);
            var index = d.getDay();
            if(index == 0) {
             d.setDate(d.getDate() - 6);
            }
            else if(index == 1) {
             d.setDate(d.getDate());
            }
            else if(index != 1 && index > 0) {
              d.setDate(d.getDate() - (index - 1));
            }
            $(this).val(d);
        }

    });
});