在ShowDay之前附加到jquery ui datepicker

Question

我的逻辑有两个步骤；首先显示/隐藏预定义的日期范围，然后禁用/启用特定日期。我试图弄清楚是否可以在不破坏和重新创建它的情况下操纵 JQuery UI Datepicker 的现有 beforeShowDay 属性。在我的示例中，函数“disableSpecificDay”是我以编程方式禁用/启用日期的地方。有什么建议？我能找到的所有示例都假设禁用/启用的具体日期是已知的。

var myPicker = $("#myDatePicker");
var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"];

function disableExcludedDates(date) {
  for (var i = 0; i < excludeDates.length; i++) {
    if (new Date(excludeDates[i]).toString() == date.toString()) {
      return [false];
    }
  }
  return [true];
}

function weekends(action) {
  if (action === false) { // Hide weekends
    myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); });
    myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); });
  }
  else {  // Show weekends
    myPicker.focus(function() { $(".ui-datepicker-week-end").show(); });
    myPicker.blur(function() { $(".ui-datepicker-week-end").show(); });
  }
}

function disableSpecificDay() {
  var dayNumber = $("#dayNumber").val();
  myPicker.datepicker({
    // Adjust beforeShowDay here? e.g. zero "0" will disable Sundays
  });
}

$(function() {
  myPicker.datepicker( {
    numberOfMonths: 1,
    firstDay: 1,
    dateFormat: "dd/mm/yy",
    beforeShowDay: disableExcludedDates
  });
});

br {
  line-height: 150%;
}

button, input {
  width: 130px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="myDatePicker">
<button onclick="weekends(true)">Show Weekends</button>
<button onclick="weekends(false)">Hide Weekends</button>
<br />
<input type="text" id="dayNumber" placeholder="Digit 0-9">
<button onclick="disableSpecificDay()">Hide Specific Day</button>

Answer 1

您可以发送一个新功能；但我不知道这是个好主意。例如：

function disableSpecificDay() {
  var dayNumber = $("#dayNumber").val();
  myPicker.datepicker("option", "beforeShowDay", function(){ });
}

我会创建一个可以更新的常量变量。您的disableExcludedDates() 可以检查这一点并根据需要采取行动。

var myPicker = $("#myDatePicker");
var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"];
var disableDate = false;

function disableExcludedDates(date) {
  if(disableDate){
    if (new Date(disableDate).toString() == date.toString()){
      return [false];
    }
  }
  for (var i = 0; i < excludeDates.length; i++) {
    if (new Date(excludeDates[i]).toString() == date.toString()) {
      return [false];
    }
  }
  return [true];
}

function weekends(action) {
  if (action === false) { // Hide weekends
    myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); });
    myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); });
  }
  else {  // Show weekends
    myPicker.focus(function() { $(".ui-datepicker-week-end").show(); });
    myPicker.blur(function() { $(".ui-datepicker-week-end").show(); });
  }
}

function disableSpecificDay() {
  if($("#dayNumber").val() != ""){
    disableDate = $("#dayNumber").val();
  } else {
    disableDate = false;
  }
}

$(function() {
  myPicker.datepicker( {
    numberOfMonths: 1,
    firstDay: 1,
    dateFormat: "dd/mm/yy",
    beforeShowDay: disableExcludedDates
  });
});

br {
  line-height: 150%;
}

button, input {
  width: 130px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="myDatePicker">
<button onclick="weekends(true)">Show Weekends</button>
<button onclick="weekends(false)">Hide Weekends</button>
<br />
<input type="text" id="dayNumber" placeholder="Digit 0-9">
<button onclick="disableSpecificDay()">Hide Specific Day</button>

或者，您可以将此日期添加到您的 excludeDates 数组中。比如：

function disableSpecificDay() {
  excludeDates.push($("#dayNumber").val());
}

希望对您有所帮助。