Updating Pickadate Input via AJAX

Question

I use Pickadate.js and JQuery Form Plugin. I have date and time pickers seperately. What I want to do is to disable times in timepicker according to value of datepicker. So, I am trying to get the JSON data into picker.set("disable", [ ]);. I can console.log the plain text but it remains aimless.

I tried a lot and have come across these solutions in that question. But I couldn't launch them. (I adapted pickadate functions and classes to pickatime's.)

// Javascript
$(document).ready(function() {
  $("input").click(function() {
    $(".datepicker").pickadate({
      format: 'yyyy-mm-dd',
      formatSubmit: 'yyyy-mm-dd',
      min: true,
      max: false
    });
    var $input = $(".timepicker").pickatime({
      format: 'HH:i',
      formatSubmit: 'HH:i',
      formatLabel: 'HH:i'
    });
    $('.datepicker').change(function() {
      $('#form').ajaxSubmit({
        target: '#check_result',
        url: 'check.php',
        success: function showResponse(responseText, $form) {
          var picker = $input.pickatime('picker');
          picker.set("disable", [
            console.log(responseText)
          ]);
        }
      });
      return false;
    });
  });
});

// PHP (check.php)
<?php
// Database connection done.
$date = mysqli_real_escape_string($con, $_POST['date']);
$match_query = mysqli_query($con, "SELECT * FROM booking WHERE DATE(time) = '$date'");
$disabled_times = array();
if ($result = $match_query) {
 while ($row = mysqli_fetch_assoc($result)) {
  $disabled_times[] = $row['time'];
 }
 mysqli_free_result($result);
}
echo implode($disabled_times);
?>

Luis Fernando Babinski · Accepted Answer · 2016-07-06T02:13:42.293

1

Can you post an example of the json being returned from your php?

According to the docs (http://amsul.ca/pickadate.js/api/#method-get-disable) your json should be something like this: [2,30], [4,30], [9,0]

If your json is correct, be sure it is not being passed to the timepicker as a string. Try something like:

var json = JSON.parse(responseText);
picker.set("disable", [ json ]);

UPDATE: I guess with the following code, your json will return properly:

...
$time = explode(',', $row['time']);
$time[0] = (int)$time[0];
$time[1] = (int)$time[1];
$disabled_times[] = $time;
...
echo json_encode($disabled_times);

edited Jul 06 '16 at 02:13

answered Jul 06 '16 at 00:22

Luis Fernando Babinski

36
4

Thank you. In my method, console.log(responseText) returns `["[4,30]","[9,0]"]` exactly. And in yours console.log(json) returns `["4,30", "9,0"]`. I know my codes generate a string value and it won't work for me. I am looking for the right way to pass json. – Melih Jul 06 '16 at 01:02
Great job! Needs just a few corrections... `var json = JSON.parse(responseText); picker.set("enable", true); picker.set("disable", json);` – Melih Jul 06 '16 at 02:29

Updating Pickadate Input via AJAX

1 Answers1