Error with plugin datetimepicker in JQuery with ajax

Question

I try to do this, disable all dates and enable the dates that i pass with parameters

This code not work

$.ajax({
    method: "GET",
    url: "url",
})
.success(function(msg) {
    console.log(JSON.parse(msg));
    var disableIni = JSON.parse(msg);

    var disable = [];

    for (var i = 0; i < disableIni.length; i++)
    {
        disable[i] = moment(disableIni[i][0] + "/" + disableIni[i][1] + "/" + disableIni[i][2], "M/DD/YYYY");
        if (i > 5)
        {
            break;
        }
    }

    console.log(disable);

    var vectorTest = [moment("5/25/2017", "M/DD/YYYY"), moment("5/26/2017", "M/DD/YYYY"), moment("5/27/2017", "M/DD/YYYY")];

    console.log(vectorTest);

    var vector = disable;
    console.log(vector);

    $('#input_from').datetimepicker({
        locale: 'es',
        format: 'DD-MM-YYYY',
        enabledDates: $.each(vector, function(i, value) {
            return value;
        })
    });
});

But if i change var vector = disable for var vector = vectorTest, work correctly:

$.ajax({
    method: "GET",
    url: "url",
})
.success(function(msg) {
    console.log(JSON.parse(msg));
    var disableIni = JSON.parse(msg);

    var disable = [];

    for (var i = 0; i < disableIni.length; i++)
    {
        disable[i] = moment(disableIni[i][0] + "/" + disableIni[i][1] + "/" + disableIni[i][2], "M/DD/YYYY");
        if (i > 5)
        {
            break;
        }
    }

    console.log(disable);

    var vectorTest = [moment("5/25/2017", "M/DD/YYYY"), moment("5/26/2017", "M/DD/YYYY"), moment("5/27/2017", "M/DD/YYYY")];

    console.log(vectorTest);

    var vector = vectorTest;
    console.log(vector);

    $('#input_from').datetimepicker({
        locale: 'es',
        format: 'DD-MM-YYYY',
        enabledDates: $.each(vector, function(i, value) {
            return value;
        })
    });
});

Its possible to do that i want??

EDIT

The ajax response:

It's an array that contains other array with 3 position. [0] => Month, [1] => Day, [2] => Year

Thanks

Answer 1

You can do something like the following:

$.ajax({
  method: "GET",
  url: "url",
  dataType: "json",
  success: function(response){
    var disable = [];
    for(var i=0; i<response.length; i++){
      var data = response[i];
      disable.push( moment([ data[2], data[0], data[1] ]) );
    }

    $('#input_from').datetimepicker({
      locale: 'es',
      format: 'DD-MM-YYYY',
      enabledDates: disable
    });
  }
});

You can use success and dataType key of jQuery.ajax.

Then you can loop your results and build an array of moment objects using moment(Array) method and pass it to enabledDates option of the datetimepicker.

Answer 2

You could use the beforeShowDay, that function takes a date as a parameter and must return an array with:

• [0]: true/false indicating whether or not this date is selectable
• [1] (optional): a CSS class name to add to the date's cell or "" for the default presentation
• [2] (optional): popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

Please see following:

var availableDates = [[2017,6,1],[2017,6,2],[2017,6,5]];

function available(date) {
  t = [date.getDate(),(date.getMonth()+1),date.getFullYear()];
  var result = $.grep(availableDates, function(v,i) {
    return v[0]===t[2] && v[1]===t[1] && v[2]===t[0];
  }).length > 0;
  return [result];
}

$('#date').datepicker({ beforeShowDay: available });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" name="date" id="date" readonly="readonly" size="12" />

In the above code you could switch from enabled/disabled by modify the boolean condition:

length > 0 rather than length == 0

I hope it helps you, bye.