0

I realize many have already asked similar questions, but I have been plugging away at this for ages and, despite reviewing numerous posts and multiple attempts, I can't figure out how to get it working.

I'm using an ajax call to retrieve an array of dates that I want to remove as an option from my date field. The values are formatted as 'yyyy-mm-dd'. I will present this code as an example:

// minDate is a date value, set to 2022-08-05
// maxDate is a date set to 2023-01-29
// 'calendar' is a jquery object representing a date field
var unavailableDates = ["2022-08-06","2022-08-07","2022-08-12"] //this is a reduced/simplified version

calendar.attr('min', minDate);
calendar.attr('max', maxDate);

Everything up to here works just fine. If I leave it at that, the min and max work as expected. However, as soon as I try and add anything using beforeShowDay, it all falls apart. If I inspect the element after trying to use beforeShowDay, I can still see the min and max attributes, but the datepicker no longer shows them as disabled. Here are a few different things I've tried:

const beforeShowDayHandler = function (date) {
  // check appt available
  if (unavailableDates.indexOf(date) >= 0)
    return [false, '', ''];

  return [true, '', ''];
}
        
calendar.attr('min', minDate);
calendar.attr('max', maxDate);
calendar.datepicker('option', 'beforeShowDay', beforeShowDayHandler);

Or

calendar.datepicker('option', 'beforeShowDay', function(date){
      if (unavailableDates.indexOf(date) >=0)  //along with a couple versions of date.toString
        return [false, '', ''];
      
      return [true, '', ''];
});


calendar.datepicker({
  minDate: minDate,
  maxDate: maxDate,
  beforeShowDay: function (date) {
    debugger;
    // check appt available
    if (unavailableDates.indexOf(date.toDateString()) >= 0){
      return [false, '', ''];
    }
    else {
      return [true, '', ''];
    }
  }
});

And a few others. So far, none of them have worked. I've never used this before (obviously) - what am I doing wrong?

Sean
  • 95
  • 3
  • 11
  • Can you make a runnable code snippet that has all the info? ... use the `<>` option on the tool bar. You'll have to manually add the jqueryui script stuff to the top of the html section. – Paul T. Jul 30 '22 at 00:57

1 Answers1

1

This was a tad fiddly to do but this should be what you want

$(function() {
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: "05-08-2022",
    beforeShowDay: my_check
  });
  var my_array = ["2022-08-06", "2022-08-07", "2022-08-12"]
  $("#datepicker").datepicker("option", "minDate", new Date("2022-08-05"));
  $("#datepicker").datepicker("option", "maxDate", new Date("2023-01-29"));

  function my_check(in_date) {
    in_date = in_date.getFullYear() + '-' +
      String((in_date.getMonth() + 1)).padStart(2, '0') + '-' +
      String(in_date.getDate()).padStart(2, '0')
    // console.log(in_date)
    if (my_array.indexOf(in_date) >= 0) {
      return [false, "notav", 'Not Available'];
    } else {
      return [true, "av", "available"];
    }
  }
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  </script>
</head>

<body>

  <p>Date: <input type="text" id="datepicker"></p>


</body>

</html>

The trick was mapping the date control values to the array values in the correct format. I hope this helps

Patrick Hume
  • 2,064
  • 1
  • 3
  • 11
  • Yes, that was helpful! It gets me closer, and when debugging I can now see where the invalid date values return 'true' or 'false' correctly. I obviously still have some kind of interference somewhere, though, because when it's all said and done, the datepicker values that returned false are still showing as available. There must be some code somewhere that is interfering; I'll have to keep looking at it. – Sean Aug 01 '22 at 15:50
  • I checked it in Edge, Firefox and Chrome, when you say it's not working, is it not working here or on your site? if it's your site, try debugging or using console.log and examining the my_check and how it checks the array values against the data control value, that will be the key, if you get stuck just let me know – Patrick Hume Aug 01 '22 at 19:32