Question

从JQuery Mobile查看Datepicker Widget - 需要能够将日期选择限制为从开始日期到结束日期的星期日。并在12个月内每隔三个星期四限制一次。我只查看日期范围以查看日历而不是限制选择日期的能力吗？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
  $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

Answer 1

提供beforeShowDay方法的实现。只有在可以选择日期时，您才能实现自定义逻辑，以便在第一个索引上返回true数组。

A function that takes a date as a parameter and must return an array with:
  [0]: true/false indicating whether or not this date is selectable
  [1]: a CSS class name to add to the date's cell or "" for the default presentation
  [2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.

有关详细信息，请参阅JQueryUI API documentation。

Answer 2

以下是显示如何实现这一目标的最终代码，仍然需要排除整年的日期，但似乎可行。我添加了JSFiddle - datepicker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  var unavailableDates = [
    new Date(2014, 0, 23).valueOf(),
    new Date(2014, 11, 25).valueOf(),
    new Date(2014, 7, 14).valueOf()
  ];

function unavailable(date) {
if (date.getDay() === 4 && $.inArray(date.valueOf(), unavailableDates) < 0) {
    return [true, ""];
} else {
    return [false, "", "Unavailable"];
}
}

$(document).ready(function() {
$("#datepicker").datepicker({
    beforeShowDay: unavailable
});
});
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Datepicker Widget限制随机日期

2 个答案: