jQuery UI Datepicker – 多个dateselect

有没有办法使用jQuery UI Datepicker小部件来select多个date？

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

Answer 1

我需要做同样的事情，所以写了一些JavaScript来启用它，使用onSelect和beforeShowDay事件。 它维护自己的选定date数组，所以不幸的是没有集成显示当前date的文本框等。我只是用它作为内联控件，然后我可以查询当前select的date数组。
我用这个代码作为基础。

 <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, eg "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> 

Answer 2

使用jQuery UI日历，这个插件允许你select多个date：

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

Answer 3

当你稍微修改一下它时，不pipe你设置了哪个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, ""]; } }); 

Answer 4

我现在花了相当一段时间试图find一个支持间隔范围的好dateselect器，并最终find了这个：

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

我相信这可能是最好的jQuerydateselect器select范围或多个date，它声称是jQuery UIdateselect器的基础，我看不出有任何理由怀疑，因为它似乎是非常强大的，也很好logging！

Answer 5

由@dubrox开发的插件非常轻便，几乎与jQuery UI相同。 我的要求是有能力限制select的date的数量。

直观上， maxPicks属性似乎是为此目的而提供的，但不幸的是它不工作。

对于那些正在寻找这个修补程序的人来说，这里是：

1. 首先，你需要修补 jquery.ui.multidatespicker.js 。 我已经在github上提交了一个pull请求 。 你可以使用它，直到dubrox将其与主人合并或自己修复。

2. 用法非常简单。 下面的代码会导致dateselect器在指定的date数（ maxPicks ）已被选中后不会select任何date。 如果您取消select之前select的date，则会再次select，直到您再次达到限制。

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

Answer 6

刚刚有这个要求， 这里是我使用的代码。 正常应用它到一个input，我使用类typeof__multidatepicker 。

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

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

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

这是一个固定平台的Intranet，所以我没有做过多的浏览器testing。

请记住将处理程序包含在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); }); 

Answer 7

使用这个插件 http://multidatespickr.sourceforge.net

• selectdate范围。
• select多个date不安全。
• 定义可选date的最大数量。
• 定义一个距离X天的距离，可以selectYdate。 定义不可用的date

Answer 8

使用这个：

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