Nejc Galof Nejc Galof - 4 months ago 14
Javascript Question

jQuery-ui Datepicker return first day of selected week

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

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);
        }

    });
});