jQuery 日期选择器允许特定日期

Question

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

我有多个 jQuery 日期选择器，我不希望用户能够 select 非工作日。

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

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
});

所以日期选择器将能够 select 多个日期，我不希望用户能够 select 过去几天和非工作日。

enabledDates 数组如下所示：

我不明白的是控制台显示非工作日，但出于某种原因，用户仍然可以 select 使用日期选择器来显示它们！我猜错误来自 return[true] 和 return [false] 但到目前为止我没有找到任何相关文档来解决这个问题。

感谢您的帮助。

路易斯

Answer 1

这里是bootstrap日期选择器的例子，你可以根据需要限制或enabled/disabled日期。

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

Answer 2

这里是jquery日期选择器的例子，你可以根据需要限制或enabled/disabled日期。

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,
      dateFormat: '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">

jQuery 日期选择器允许特定日期

jQuery datepicker allow specific dates

jquery

jquery-ui-datepicker