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

Coffelt

your msg variable is string or object? if object then use msg.data – Michikomichon

is a string, i try this, but not work @AlivetoDie – Coffelt

this is the response of $.ajax GET: [2017,4,23],[2017,4,24],[2017,4,25],[2017,4,26],[2017,4,27],[2017,4,28],[2017,4,29],[2017,4,30],[2017,4,31],[2017,5,1],[2017,5,2],[2017,5,3],[2017,5,4],[2017,5,5],[2017,5,6],[2017,5,7],[2017,5,8],[2017,5,9],[2017,5,10],[2017,5,11],[2017,5,12],[2017,5,13],[2017,5,14],[2017,5,15],[2017,5,16],[2017,5,17],[2017,5,18],[2017,5,19],[2017,5,20],[2017,5,21],[2017,5,22],[2017,5,23],[2017,5,24],[2017,5,25],[2017,5,26],[2017,5,27],[2017,5,28],[2017,5,29],[2017,5,30] @AlivetoDie – Coffelt

create a variable disableParams = [true,msg], and then use this disable:disableParams – Sturdy

send it by converting it to json via json_encode() and then use parseJSON() to use it correctly – Michikomichon

your msg variable should look like this ["2013-03-14","2013-03-15","2013-03-16"] .. some example jsfiddle.net/arunpjohny/CxNNh/1 – Debbydebee

@RanjeetSingh thanks, but not work – Coffelt

@AlivetoDie thanks, but not work – Coffelt

@BilalAhmed i use other plugin, not the same, not work – Coffelt

try this msgArr = JSON.parse(msg) and then use msgArr. JSON.parse() will convert string into array – Snowden

@Snowden thansk, but not work – Coffelt

whats the error now? if the above result is a string make it 2d array string by adding tempMsg = "["+msg+"]" and then use JSON.parse(tempMsg) to convert it into 2d array. – Snowden

@Snowden The console not return error, but the calendar not work. If i use that: disable: [ true, [2017,4,23],[2017,4,24],[2017,4,25],[2017,4,26],[2017,4,27] ] it work correctly – Coffelt

then try this ------ tempMsg = "["+msg+"]" => it will give you 2d array string ------ then msgArr = JSON.parse(tempMsg) => give you 2d Array i.e [[2017,4,23],[2017,4,24], ...] ------ then dissableArr = msgArr.unshift(true) => give you [ true, [2017,4,23],[2017,4,24], ...] ------- and finally use disable: disableArr – Snowden

@Snowden i put the console's response: tempMsg = ["[2017,4,24],[2017,4,25],[2017,4,26],[2017,4,27],[2017,4,28],[2017,4,29],[2017,4,30],[2017,4,31],[2017,5,1],[2017,5,2],[2017,5,3],[2017,5,4],[2017,5,5],[2017,5,6],[2017,5,7],[2017,5,8],[2017,5,9],[2017,5,10],[2017,5,11],[2017,5,12],[2017,5,13],[2017,5,14],[2017,5,15],[2017,5,16],[2017,5,17],[2017,5,18],[2017,5,19],[2017,5,20],[2017,5,21],[2017,5,22],[2017,5,23],[2017,5,24],[2017,5,25],[2017,5,26],[2017,5,27],[2017,5,28],[2017,5,29],[2017,5,30]"] | msgArr = Array [ "[2017,4,24],[2017,4,25],[2017,4,26]…" ] | dissableArr = 2 – Coffelt

@Snowden i think that msgArr.unshift(true) is not correct, return 2 – Coffelt

Can you use success inside $.ajax instead instead of done? Please edit the question showing which is the exact result of your ajax call. – Hydroxyl

@Hydroxyl i edit my question – Coffelt

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.

Hydroxyl

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.

Cloudless