jQuery UI Datepicker - 多个日期选择
Posted
技术标签:
【中文标题】jQuery UI Datepicker - 多个日期选择【英文标题】：jQuery UI Datepicker - Multiple Date Selections 【发布时间】：2010-11-29 22:32:24 【问题描述】：有没有办法使用 jQuery UI Datepicker 小部件来选择多个日期？
感谢所有帮助！ 如果无法使用 jquery UI datepicker 那么有没有类似的东西呢？
【问题讨论】：
有一个好用的插件@filamentgroup.com/lab/… 相关：***.com/questions/903628/… 谢谢 :) 这很好，虽然不是多日期选择器 JQuery UI DatePicker - Can it handle multiple dates?的可能重复 【参考方案1】：我需要做同样的事情，所以编写了一些 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 后备吗？ insertZeroForDayOrMonth 未定义 将 insertZeroForDayOrMonth 替换为 padNumber。谢谢@Tevin。这对我帮助很大。 可能是最直接的非基于插件的答案【参考方案2】：稍微修改一下，不管你设置了哪种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, ""];
);
【讨论】：
【参考方案3】：我现在花了很长时间试图找到一个支持间隔范围的好日期选择器，最终找到了这个：
http://keith-wood.name/datepick.html
我相信这可能是用于选择一个范围或多个日期的最佳 jquery 日期选择器，并且据称它是 jQuery UI 日期选择器的基础，我认为没有理由怀疑它，因为它似乎真的功能强大，而且记录良好！
【讨论】：
【参考方案4】：@dubrox 开发的插件非常轻量级，工作方式几乎与 jQuery UI 相同。我的要求是能够限制所选日期的数量。
直观地说，maxPicks 属性似乎是为此目的而提供的，但不幸的是它不起作用。
对于那些正在寻找此修复程序的人，这里是：
首先，您需要patch jquery.ui.multidatespicker.js。我已经提交了pull request on github。你可以使用它，直到 dubrox 将它与 master 合并或提出他自己的修复程序。
使用非常简单。一旦已经选择了指定的日期数 (maxPicks)，下面的代码将导致日期选择器不选择任何日期。如果您取消选择之前选择的任何日期，它将让您再次选择，直到再次达到限制。
$("#mydatefield").multiDatesPicker(maxPicks: 3);
【讨论】：
【参考方案5】：<div id="calendar"></div>
<script>
$(document).ready(function()
var days = [];
$('#calendar').datepicker(
dateFormat: 'yymmdd',
showWeek: true, showOtherMonths: false, selectOtherMonths: false,
navigationAsDateFormat: true, prevText: 'MM', nextText: 'MM',
onSelect: function(d)
var i = $.inArray(d, days);
if (i == -1)
days.push(d);
else
days.splice(i, 1);
,
beforeShowDay: function(d)
return ([true, $.inArray($.datepicker.formatDate('yymmdd', d), days) == -1 ? 'ui-state-free' : 'ui-state-busy']);
);
);
</script>
注意：您可以使用 php 中的一段代码在 days 中预填日期列表，例如 '20190101'。
在您的 CSS 中添加 2 行：
#calendar .ui-state-busy a background:#e6e6e6 !important;
#calendar .ui-state-free a background:none !important;
要在<form> 中获取日历选择的日期列表：
<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>
将此添加到<script>：
$('#calendar_get').click(function()
$(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
);
将implode 应用于$_POST['calendar_days'] 中的字符串并将strtotime 映射到所有格式化日期。
【讨论】：
【参考方案6】：刚好有这个需求；这是我使用的代码。像往常一样将其应用于输入，我使用的是 typeof__multidatepicker 类。
它在所有者文本框中维护一个唯一日期列表。您也可以在那里输入，这没有经过验证 - 显然服务器需要检查结果列表！
我试图让它与日期选择器的链接文本框一起使用，但失败了，因此它为日期选择器创建了一个不可见的输入（它似乎不适用于 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); );
【讨论】：
【参考方案7】：使用这个plugin http://multidatespickr.sourceforge.net
选择日期范围。 选择多个不连续的日期。 定义可选择日期的最大数量。 定义一个范围 X 天 可以选择 Y 日期。定义不可用日期【讨论】：
【参考方案8】：使用这个：
$('body').on('focus',".datumwaehlen", function()
$(this).datepicker(
minDate: -20
);
);
【讨论】：
以上是关于jQuery UI Datepicker - 多个日期选择的主要内容，如果未能解决你的问题，请参考以下文章