Search code examples
c#jsonjquery-ui-datepicker

Jquery UI Datepicker, beforeShowDay error


I am trying to add days to disable from the server. This is my code so far:

 $("#startDatePicker").datepicker({
        minDate: '+31',
        maxDate: '+12M',
        changeMonth: true,
        showAnim: 'blind',
        dateFormat: 'yy mm dd',           
        onSelect: function(dateText, inst) {

            // Capture the Date from User Selection
            var oldDate = new Date(dateText);
            var newDate = new Date(dateText);

            // Compute the Future Limiting Date
            newDate.setDate(newDate.getDate() + 365);


            // Set the Widget Properties
            $("#endDatePicker").datepicker('option', 'minDate', oldDate);
            $("#endDatePickerto").datepicker('option', 'maxDate', newDate);

        }
    });

    $("#endDatePicker").datepicker({
        minDate: '+5',
        maxDate: '+12M',
        changeMonth: true,
        showAnim: 'blind',
        dateFormat: 'yy mm dd',
        onSelect: function(dateText, inst) {

            // Capture the Date from User Selection
            var endDate = new Date(dateText);
            var startDate = new Date(dateText);

            // Compute the Future Limiting Date
            startDate.setDate(startDate.getDate() - 5);

            // Set the Widget Properties
            $("#startDatePicker").datepicker('option', 'minDate', startDate);
            $("#startDatePicker").datepicker('option', 'maxDate', endDate);

        }

    });

The picker works fine until i add days to disable. I parse it from a viewbag. Here is the code.

var NewArray = [];
var array = @Html.Raw(Json.Encode((@ViewBag.GetDates)));
for (var i = 0; i < array.length; i++) {
    NewArray[i] = array[i];
    console.log(NewArray);
   
}
var parsedDates = [];
for (var i = 0; i < array.length; i++) {
    var d = array[i];
    var unix = +d.replace(/\D/g, '');
    var date = new Date(unix);
    var desDate = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
    parsedDates.push(desDate);
}
console.log(parsedDates);

and I add the dates like this to the picker:

beforeShowDay: function (date) {
            var string = jQuery.datepicker.formatDate('yy mm dd', date);
            return [parsedDates.indexOf(string) === -1];
        }

The picker looks like this when everything is added: enter image description here

What I am doing wrong.


Solution

  • Solved It. Had to reconstruct the date string going in to the beforShowDay. After that everything worked.