【问题标题】:How to block multiple date ranges in jQuery Datepicker ui如何在 jQuery Datepicker ui 中阻止多个日期范围
【发布时间】:2016-04-25 19:14:25
【问题描述】:

我有这段代码要继续,但我希望这些日期被阻止而不是启用。所以恰恰相反。 任何人都知道如何根据此代码执行此操作? 谢谢一百万!

var ranges = [ { start: new Date(2010, 8, 1), end: new Date(2010, 8, 20) },
               { start: new Date(2010, 9, 1), end: new Date(2010, 9, 20) },
               { start: new Date(2010, 10, 1), end: new Date(2010, 10, 20) } ];

$(function() {
  $("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(date) {
        for(var i=0; i<ranges.length; i++) {
          if(date >= ranges[i].start && date <= ranges[i].end) return [true, ''];
        }
        return [false, ''];
    },
    minDate: ranges[0].start,
    maxDate: ranges[ranges.length -1].end
  });
});​

另外,我的日期格式是 dd-mm-yy。我对日期格式有点疑惑。

【问题讨论】:

    标签: javascript jquery jquery-ui datepicker jquery-ui-datepicker


    【解决方案1】:

    您需要通过将return [true, '']return [false, ''] 分别更改为return [false, '']return [true, ''] 来反转逻辑。您还需要删除minDate: ranges[0].startmaxDate: ranges[ranges.length -1].end

    这是一个演示(我稍微更改了日期,以便更容易看到效果。请转到 2016 年 9 月)。

    var ranges = [ { start: new Date(2016, 8, 1), end: new Date(2016, 8, 20) },
                   { start: new Date(2016, 9, 1), end: new Date(2016, 9, 20) },
                   { start: new Date(2016, 10, 1), end: new Date(2016, 10, 20) } ];
    
    $(function() {
      $("#datepicker").datepicker({
        numberOfMonths: 1,
        beforeShowDay: function(date) {
            for(var i=0; i<ranges.length; i++) {
              if(date >= ranges[i].start && date <= ranges[i].end) return [false, ''];
            }
            return [true, ''];
        }
      });
    });
    @import url(https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css );
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <input type="text" id="datepicker">

    编辑

    这里只是快速编辑以解决日期问题。您的日期格式是非标准的d(d)-m(m)-yyyy。您可以通过将其转换为数组来轻松地将其转换为标准格式,将值 [day,month,year] 作为数字字符串(例如 ["4", "27", "2016"] 用于 27-4-2016)。这是一个 sn-p 来做到这一点

    // our date-like string and an array equivalent
    var d = '27-4-2016',
        dArray = d.split('-');
    // rearrange the month and day
    dArray.splice(1, 0, dArray.shift());
    // create a date object called date and pass our array to the constructor
    var date = new Date(dArray); // Result: Wed Apr 27 2016 00:00:00 GMT-0500 (CDT)
    

    【讨论】:

    • 嗨约瑟夫,太好了!我刚刚看到你的答案,但你真的用光速回答了这个问题!那么日期格式呢?我的日期格式是:d-m-yy,比如 27-4-2016
    • @ItsMagic 我将在我的答案中添加一个编辑以解决日期格式问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-07-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多