Hi there,

  I am new to all this so please bear with me! I am hoping it is something obvious missing in the code.

I am using 2 jquery date pickers in one page, and hoping so that when a date is selected in the first, it disables that selected date in the second calendar. Here's what I have:

HTML:

1. <form onSubmit="return UpdateDeliveryOptions()">
2.     <input class="input" id="disableDate" value="Date to disable">
3.     <input type="submit" class="button is-medium is-primary" value="Save">
4. </form>
5. <div id="customerCalendar"></div>

JQUERY

1. jQuery(function($) {
2.   let disabledDates = [];
3.  
4.   function UpdateDeliveryOptions() {
5.                 dateValue = document.getElementById('disableDate').value
6.                 disabledDates.push(dateValue)
7.                 return false
8.             };
9.             $("#disableDate").datepicker({
10.             });
11.             $("#customerCalendar").datetimepicker({
12.                 beforeShowDay: function(date) {
13.                     let string = jQuery.datepicker.formatDate('yy-mm-dd', date);
14.                     return [disabledDates.indexOf(string) == -1]
15.                 },
16.                 timeFormat: 'HH'
17.             });
18.         });

I have no backend to save to, so I read I needed to add 'return' the where the function was called, and 'return false' to the function to stop the page refreshing and losing everything.

When I hit 'save' there is a flash of an error message in console, but is too quick to read what it says. All I can see is it isn't working.

Does this sort of function need to convert the array to JSON to work? Or is there a way to make this work as it is?