jquery datepicker defaultdate will not automatically set to next available date when graphical calendar is persistent on a page

Question

The jquery datepicker defaultdate will not automatically set to next available date when the graphical calendar is persistent on a page. the initial date the calendar selects can be a date that i have disabled. Many suggestions on workaround work when the calendar is a popup to an input field, but do not work when the calendar is persistently shown as a div. doesn't matter if the dates disabled are by noWeekends, by the day of week, or individually set days, the initial date value can be a disabled and unclickable date. I am using the alternate1 input field (which i normally hide) to pass data onto a PHP page. What i have almost works, but the next available date shows as highlighted when minDate happens to land on an available date, but when minDate lands on an unselectible date, the highlight is hidden. The temporary fix i used of setDate null - clears the initial selection value regardless of the highlight, so a visitor may think the a date is already selected when it is not. My PHP page reports back to the visitor that they have to go back and actually select a date. My use of datepicker is geared toward mobile, so popup or flyout calendar to make use of well known workarounds is unfavorable, the calendar GUI needs to be persistent on the page. To recreate my issue for yourself, on the jsfiddle, comment out the last javascript line, disallow a date mid-week in the var selections, and then set the minDate so that it will land on the disallowed date. you'll notice the alternate1 input gets prefilled with the disallowed date.

html code:

<div id="dp1"></div>
<input type="text" id="alternate1" name="alternate1"/> <!-- style="display:none;" this is the field that passes on to php -->   

javascript code:

var selections = [
"2017-07-29",
"2017-07-30",
"2017-08-05",
"2017-08-06",
"2017-08-12",
"2017-08-13",
"2017-08-19",
"2017-08-20",
"2017-08-26",
"2017-08-27",
"2017-09-02",
"2017-09-03",
"2017-09-04",
"2017-09-09",
"2017-09-10",
"2017-09-16",
"2017-09-17",
"2017-09-23",
"2017-09-24",
"2017-09-30",
"2017-10-01",
"2017-10-07",
"2017-10-08",
"2017-10-09",
"2017-10-14",
]

function bansingle(date) {
        var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ selections.indexOf(excerpt) == -1 ]
    }
// somehow combine this function later.
//function bandow(date) {
//              var day = date.getDay();
//          return [(day != 0 && day != 6)];
//      }


$('#dp1').datepicker({
    beforeShowDay: bansingle,
    altField:'#alternate1',
    altFormat: 'm-d-yy',
    fielddateFormat: 'm-d-yy',
    minDate: "+0d",
    //maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value

Here is the jsfiddle it does contain more dates and a little CSS. I recommend opening it in a new tab, to be able to return to this page after editing code.

Answer 1

the progress of my other question here has negated the need for an answer to this question. pursuing multiple changes to input, styling, and options - will workaround this question's problem.