jQuery datepicker允许特定日期

Question

我有一个基本问题，我想我几乎找到了解决方案，但我不能说我做错了。

我有多个jQuery datepicker，但我不希望用户选择非工作日。

这是我到目前为止所做的：

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

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

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

因此日期选择器将能够选择多个日期，并且我不希望用户选择过去的日期和非工作日。

数组enabledDates看起来像这样：

我并不奇怪，控制台会显示非工作日，但是由于某些原因，用户仍然可以使用datepicker选择它们！我猜错误是来自return [true]和return [false]的问题，但到目前为止，我没有找到任何相关的文档来解决此问题。

感谢您的帮助。

路易

Answer 1

这里是jquery datepicker的示例，您可以根据需要限制或启用/禁用日期。

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() {
  $(function() {
    $("#newOrderDates").datepicker({
      todayHighlight: true,
      format: 'yy-mm-dd',
      multidate: true,
      startDate: new Date(),
      beforeShowDay: enableAllTheseDays
    });
  });

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

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

    return [false];
  }
})

h1 {
  color: green;
}

.ui-datepicker {
  width: 12em;
}

<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>

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

Answer 2

这里是bootstrap datepicker的示例，您可以根据需要限制或启用/禁用日期。

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">