From one Form to Another

[ben03]

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:

<form onSubmit="return UpdateDeliveryOptions()">
	<input class="input" id="disableDate" value="Date to disable">
	<input type="submit" class="button is-medium is-primary" value="Save">
</form>

<div id="customerCalendar"></div>

jQuery(function($) {
  let disabledDates = [];
  
  function UpdateDeliveryOptions() {
                dateValue = document.getElementById('disableDate').value
                disabledDates.push(dateValue)
                return false
            };

            $("#disableDate").datepicker({
            });

            $("#customerCalendar").datetimepicker({
                beforeShowDay: function(date) {
                    let string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [disabledDates.indexOf(string) == -1]
                },
                timeFormat: 'HH'
            });
        });

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?

Help appreciated, thanks in advance.