jQuery UI Datepicker - 多个日期选择

问题描述：

是否有一种方法可以使用jQuery UI Datepicker小部件来选择多个日期？jQuery UI Datepicker - 多个日期选择

所有帮助表示赞赏！如果它不能使用jQuery UI日期选择器，那么是否有类似的东西呢？

有一个有用的插件@ http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/ – 2009-09-20 21:37:54

相关：http://stackoverflow.com/问题/ 903628/jquery-ui-datepicker-can-it-handle-multiple-dates – 2009-09-20 23:54:12

谢谢:)这很好，虽然不是多日期选择器 – tarnfeld 2009-09-21 17:10:26

答

我需要做同样的事情，所以写了一些JavaScript来启用它，使用onSelect和beforeShowDay事件。它维护自己的选定日期数组，因此不幸的是没有与显示当前日期的文本框集成在一起。我只是将它用作内联控件，然后我可以查询当前选定日期的数组。
我用this code作为基础。

<script type="text/javascript"> 
// Maintain array of dates 
var dates = new Array(); 

function addDate(date) { 
    if (jQuery.inArray(date, dates) < 0) 
     dates.push(date); 
} 

function removeDate(index) { 
    dates.splice(index, 1); 
} 

// Adds a date if we don't have it yet, else remove it 
function addOrRemoveDate(date) { 
    var index = jQuery.inArray(date, dates); 
    if (index >= 0) 
     removeDate(index); 
    else 
     addDate(date); 
} 

// Takes a 1-digit number and inserts a zero before it 
function padNumber(number) { 
    var ret = new String(number); 
    if (ret.length == 1) 
     ret = "0" + ret; 
    return ret; 
} 

jQuery(function() { 
    jQuery("#datepicker").datepicker({ 
     onSelect: function (dateText, inst) { 
      addOrRemoveDate(dateText); 
     }, 
     beforeShowDay: function (date) { 
      var year = date.getFullYear(); 
      // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009" 
      var month = padNumber(date.getMonth() + 1); 
      var day = padNumber(date.getDate()); 
      // This depends on the datepicker's date format 
      var dateString = month + "/" + day + "/" + year; 

      var gotDate = jQuery.inArray(dateString, dates); 
      if (gotDate >= 0) { 
       // Enable date so it can be deselected. Set style to be highlighted 
       return [true, "ui-state-highlight"]; 
      } 
      // Dates not in the array are left enabled, but with no extra style 
      return [true, ""]; 
     } 
    }); 
}); 
</script>

这很好！ =）你有任何非JavaScript的后备？ – 2010-01-31 11:44:14

insertZeroForDayOrMonth未定义 – 2011-11-01 18:40:30

用padNumber替换insertZeroForDayOrMonth。谢谢@Tevin。这对我帮助很大。 – 2012-09-06 17:48:22

答

当你稍微修改它时，它会工作，不管你设置了哪个dateFormat。

$("#datepicker").datepicker({ 
         dateFormat: "@", // Unix timestamp 
         onSelect: function(dateText, inst){ 
          addOrRemoveDate(dateText); 
         }, 
         beforeShowDay: function(date){ 
          var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates); 
          if (gotDate >= 0) { 
           return [false,"ui-state-highlight", "Event Name"]; 
          } 
          return [true, ""]; 
         } 
        });

答

我现在已经花了相当长的一段时间，试图找到一个很好的日期选择器支持区间范围，而这最终找到了一个：

http://keith-wood.name/datepick.html

我认为这可能是最好的jQuery日期选择器来选择一个范围或多个日期，并且声称它是jQuery UI datepicker的基础，我没有理由怀疑它，因为它看起来非常强大，并且还有很好的文档记录！

这很好，但无法得到uitheme造型。 – JohnMerlino 2012-02-07 14:45:41

答

@dubrox开发的插件非常轻便，几乎与jQuery UI完全相同。我的要求是有能力限制所选日期的数量。

直观地看，maxPicks属性似乎是为此目的而提供的，但它不起作用。

对于那些寻找此修复程序，那就是：

首先，你需要patchjquery.ui.multidatespicker.js。我已提交pull request on github。您可以使用它，直到dubrox将其与主人合并或提出他自己的修复。
用法非常简单。下面的代码会导致日期选择器在指定的日期数（maxPicks）已被选中后不会选择任何日期。如果您取消选择任何先前选择的日期，它将让您再次选择，直到您再次达到限制。

$("#mydatefield").multiDatesPicker({maxPicks: 3});

答

使用jQuery UI日历，这个插件可以让你选择多个日期：

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

答

刚把这个要求;这里是我使用的代码。照常将其应用于输入，我正在使用类typeof__multidatepicker。

它维护所有者文本框中的唯一日期列表。你也可以在那里键入，这是没有验证 - 显然服务器需要检查结果列表！

我试图让它与datepicker的链接文本框一起工作，但失败了，所以它为datepicker创建了一个不可见的输入（它似乎不适用于display:none，因此也是奇怪的样式）。

它位于主输入上方，所以日期选择器出现在正确的位置，宽度为1px，因此您仍然可以键入主文本框。

这是一个固定平台的内部网，所以我没有做过很多的跨浏览器测试。

请记住在body上包含处理程序，或者它易于混淆。

$('.typeof__multidatepicker').each(
    function() 
    { 
     var _this = $(this);       

     var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>'); 

     picker.insertAfter(this) 
     .position({my:'left top', at:'left top', of:this}) 
     .datepicker({ 
      beforeShow: 
       function() 
       { 
        _this.data('mdp-popped', true); 
       }, 
      onClose: 
       function(dt, dpicker) 
       { 
        var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate')); 
        var hash = {}; 
        var curr = _this.val() ? _this.val().split(/\s*,\s*/) : []; 
        var a = []; 

        $.each(curr, 
         function() 
         { 
          if(this != '' && !/^\s+$/.test(this)) 
          { 
           a.push(this); 
           hash[this] = true; 
          } 
         } 
        ); 

        if(date && !hash[date]) 
        { 
         a.push(date); 

         _this.val(a.join(', ')); 
        }                 

        _this.data('mdp-popped', false); 
        _this.data('mdp-justclosed', true); 
       } 
     }); 

     _this.on('focus', 
      function(e) 
      {        
       if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed')) 
        _this.next().datepicker('show'); 

       _this.data('mdp-justclosed', false); 
      } 
     ); 
    } 
); 

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); });

答

使用此plugin http://multidatespickr.sourceforge.net

选择日期范围。
挑选多个日期不安全。
定义可选日期的最大数量。
定义一个范围X天，它可以从其中选择Y日期的地方。定义不可用日期

答

使用本上：

$('body').on('focus',".datumwaehlen", function(){ 
    $(this).datepicker({ 
     minDate: -20 
    }); 
});

jQuery UI Datepicker - 多个日期选择

相关推荐