jQuery datepicker allow specific dates

Question

I have a basic problem and I think I almost found the solution but I can't tell what I did wrong.

I have a multiple jQuery datepicker and I don't want the user to be able to select non working days.

Here is what I've done so far :

function enableAllTheseDays(date) {
    var sdate = moment(date).format('YYYY-MM-DD');

    if ($.inArray(sdate, enabledDates) !== -1) {
        return [true];
    }
    console.log(date);
    return [false];
}

$('#newOrderDates').datepicker({
    todayHighlight: true,
    format: 'yy-mm-dd',
    multidate: true,
    startDate : new Date(),
    beforeShowDay: enableAllTheseDays
});

So the datepicker will be able to select multiple dates and I don't want the user to be able to select past days and non working days.

The array enabledDates looks like this :

What I don't understant is the console displays the non working days, but for some reason, the user is still able to select them with the datepicker ! I guess the error is coming from the return[true] and return [false] but I didn't find any relevant documentation to fix this so far.

Thanks for your help.

Louis

Answer 1

Here is the example of bootstrap datepicker, you can restrict or enabled/disabled dates based on the requirement.

var enabledDates = new Array('2020-01-12', '2020-01-16', '2020-01-18', '2020-01-30', '2020-02-05', '2020-02-10');

$(document).ready(function() {
  $("#newOrderDates").datepicker({
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    multidate: true,
    startDate: new Date(),
    beforeShowDay: function(date) {
      var sdate = moment(date).format('YYYY-MM-DD');
      if ($.inArray(sdate, enabledDates) !== -1) {
        return {
          enabled: true
        }
      } else {
        return {
          enabled: false
        }
      }
    }
  });
});

h1 {
  color: green;
}

.ui-datepicker {
  width: 12em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>

<input type="text" id="newOrderDates">