【问题标题】:Check date is available or not in datepicker检查日期在日期选择器中是否可用
【发布时间】:2015-06-27 11:02:47
【问题描述】:

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

以前有没有人做过这个,请提出答案。

【问题讨论】:

  • 应指定最大日期,然后永远不要在任何日期之后选择最大日期
  • 我认为它对 maxDate 没有任何作用!!!如果有人点击“+1 天”,我想检查下一天是否可用,即是否禁用,类似于“+1 周”和“+1 月”,有没有办法做到这一点? ?

标签: jquery datepicker jquery-ui-datepicker


【解决方案1】:

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

$(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 />

【讨论】:

  • 您已经添加了 +1day 和 -1day,但我已经这样做了。我想知道的是,无论如何检查第二天(选定日期后的第二天)是否处于活动状态。你能指导我吗?
  • 我添加了日期范围。如果您选择响铃的最小/最大天数,然后单击 +/- 按钮,它可以更改日期。它应该比向用户显示警报消息更好。如果你还想显示消息,在调用 setDate(newDate) 之后,你应该调用 getDate 来获取 currentDate 并将 newDate 与 currentDate 进行比较以显示消息。
【解决方案2】:

您可以检查输入日期是否为有效日期,例如:

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

您也可以添加日期

d.AddDays(1);

并检查月份是否变化或其他...

【讨论】:

  • 请阅读我的问题,它与验证无关,我想检查一个日期是否可用,即是否禁用
  • 让我们这样说,根据图片,当前日期是“02/06/2015”,我想检查“03/06/2015”是否可点击
  • 它的可用性规则是什么?不是周末?
  • 不,不仅是周末,我还有一些预定的日子,其他日子我设置为禁用日
  • 所以只有你知道如果用户在当前选择的日期添加更多天需要检查什么规则......你需要为此创建自己的逻辑......
猜你喜欢
  • 2011-02-16
  • 1970-01-01
  • 1970-01-01
  • 2021-04-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多