检查日期在日期选择器中是否可用

Question

我有这样的日期选择器，根据图像选择的当前日期是 02/06/2015，如果我单击“+1 天”那么它应该通过错误 "Date is Unavailable"，因为 03/06/2015 是不可用或已禁用。

有没有人以前做过这个，请给出答案。

Answer 1

您可以检查输入的日期是否有效，例如：

DateTime d = new DateTime();
DateTime.TryParse("33-01-2014", out d);

您还可以添加日期

d.AddDays(1);

并检查月份是否更改或其他...

Answer 2

我刚刚做了一个例子。我必须重写一些方法，做一些技巧。希望这有帮助。下面演示。

$(function() {
  var beforeShowFunction = function(input, inst) {
    setTimeout(function() {
      var buttonPane = $(input).datepicker("widget")
        .find(".ui-datepicker-buttonpane");
      var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">+</button>');
      btn.bind("click", function(e) {
        if ($(input).datepicker('getDate') == null)
          return;
        var currentDate = new Date($(input).datepicker("getDate"));
        var newDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
        $(input).datepicker("setDate", newDate);
        currentDate = new Date($(input).datepicker("getDate"));
        if (currentDate.getDate() != newDate.getDate()) {
          alert('Unavailabled!');
        }
        $(input).datepicker("hide");
        $(input).datepicker("show");
      });
      btn.appendTo(buttonPane);
      var btnMinus = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">-</button>');
      btnMinus.bind("click", function(e) {
        if ($(input).datepicker('getDate') == null)
          return;
        var currentDate = new Date($(input).datepicker("getDate"));
        var newDate = new Date(currentDate.setDate(currentDate.getDate() - 1));
        $(input).datepicker("setDate", newDate);
        currentDate = new Date($(input).datepicker("getDate"));
        if (currentDate.getDate() != newDate.getDate()) {
          alert('Unavailabled!');
        }
        $(input).datepicker("hide");
        // force call show to see +, - buttons 
        $(input).datepicker("show");
      });
      btnMinus.appendTo(buttonPane);
    }, 1);
  };

  $("#datepicker").datepicker({
    minDate: -20,
    maxDate: "+1M +10D",
    showButtonPanel: true,
    beforeShow: beforeShowFunction,
  });
  // Below fix today button 
  jQuery.datepicker._gotoToday = function(id) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
      inst.selectedDay = inst.currentDay;
      inst.drawMonth = inst.selectedMonth = inst.currentMonth;
      inst.drawYear = inst.selectedYear = inst.currentYear;
    } else {
      var date = new Date();
      inst.selectedDay = date.getDate();
      inst.drawMonth = inst.selectedMonth = date.getMonth();
      inst.drawYear = inst.selectedYear = date.getFullYear();
      this._setDateDatepicker(target, date);
      this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
    // force call show to see +, - buttons
    $('#datepicker').datepicker("show");
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<input type="text" id="datepicker" />
<br />

检查日期在日期选择器中是否可用

Check date is available or not in datepicker

jquery

datepicker

jquery-ui-datepicker