jQuery UI Datepicker - 多个日期选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1452066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Datepicker - Multiple Date Selections
提问by tarnfeld
Is there a way to use the jQuery UI Datepicker widget to select multiple dates?
有没有办法使用 jQuery UI Datepicker 小部件来选择多个日期？
All help is appreciated! If its not posable to use the jquery UI datepicker then is there something similar that does?
感谢所有帮助！如果它不能使用 jquery UI datepicker 那么有没有类似的东西呢？
回答by Tevin
I needed to do the same thing, so have written some JavaScript to enable this, using the onSelectand beforeShowDayevents. It maintains its own array of selected dates, so unfortunately doesn't integrate with a textbox showing the current date, etc. I'm just using it as an inline control, and I can then query the array for the currently selected dates.
I used this codeas a basis.
我需要做同样的事情，所以写了一些 JavaScript 来启用它，使用onSelect和beforeShowDay事件。它维护自己的选定日期数组，因此不幸的是没有与显示当前日期等的文本框集成。我只是将它用作内联控件，然后我可以查询当前选定日期的数组。
我使用此代码作为基础。
<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>
回答by chriszero
When you modifiy it a little, it works regardless which dateFormat you have set.
当您稍微修改它时，无论您设置了哪种 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, ""];
}
});
回答by user310457
I have now spent quite some time trying to find a good date picker that support interval ranges, and eventually found this one:
我现在花了很多时间试图找到一个支持间隔范围的好日期选择器，最终找到了这个：
http://keith-wood.name/datepick.html
http://keith-wood.name/datepick.html
I believe this may be the best jquery date picker for selecting a range or multiple dates, and it is claimed to have been the base for the jQuery UI datepicker, and I see no reason to doubt that since it seems to be really powerful, and also good documented !
我相信这可能是用于选择范围或多个日期的最佳 jquery 日期选择器，并且据称它是 jQuery UI 日期选择器的基础，我认为没有理由怀疑，因为它似乎非常强大，并且也很好记录！
回答by adarshr
The plugin developed by @dubrox is very lightweight and works almost identical to jQuery UI. My requirement was to have the ability to restrict the number of dates selected.
@dubrox 开发的插件非常轻量级，工作方式几乎与 jQuery UI 相同。我的要求是能够限制所选日期的数量。
Intuitively, the maxPicksproperty seems to have been provided for this purpose, but it doesn't work unfortunately.
直觉上，该maxPicks属性似乎是为此目的而提供的，但不幸的是它不起作用。
For those of you looking for this fix, here it is:
对于那些正在寻找此修复程序的人，这里是：
First up, you need to patch
jquery.ui.multidatespicker.js. I have submitted a pull request on github. You can use that until dubrox merges it with the master or comes up with a fix of his own.Usage is really straightforward. The below code causes the date picker to not select any dates once the specified number of dates (
maxPicks) has been already selected. If you unselect any previously selected date, it will let you select again until you reach the limit once again.$("#mydatefield").multiDatesPicker({maxPicks: 3});
首先，您需要修补
jquery.ui.multidatespicker.js. 我已经在 github 上提交了一个拉取请求。您可以使用它，直到 dubrox 将其与母版合并或提出自己的修复方案。用法非常简单。一旦
maxPicks已经选择了指定数量的日期 ( ) ，以下代码会导致日期选择器不选择任何日期。如果您取消选择之前选择的任何日期，它将让您再次选择，直到再次达到限制。$("#mydatefield").multiDatesPicker({maxPicks: 3});
回答by frasq
<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>
NOTE: You can prefill dayswith a list of dates like '20190101'with a piece of code in PHP.
注意：您可以days像'20190101'使用 PHP 中的一段代码一样预先填充日期列表。
Add 2 lines to your CSS:
将 2 行添加到您的 CSS：
#calendar .ui-state-busy a {background:#e6e6e6 !important;}
#calendar .ui-state-free a {background:none !important;}
To get the list of days selected by the calendar in a <form>:
要在 a 中获取日历选择的天数列表<form>：
<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>
Add this to the <script>:
将此添加到<script>：
$('#calendar_get').click(function() {
$(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
});
Apply implodeon the string in $_POST['calendar_days']and map strtotimeto all the formatted dates.
应用于implode字符串 in$_POST['calendar_days']并映射strtotime到所有格式化的日期。
回答by Jet
http://t1m0n.name/air-datepicker/docs/? I've have tried several method of multi datepicker but only this works
http://t1m0n.name/air-datepicker/docs/？我已经尝试了多种多日期选择器的方法，但只有这种方法有效
回答by Whelkaholism
Just had a requirement for this; here is the code I used. Apply it to an input as normal, I am using the class typeof__multidatepicker.
刚好有这个要求；这是我使用的代码。像往常一样将其应用于输入，我正在使用 class typeof__multidatepicker。
It maintains a list of unique dates in the owner textbox. You can also type in there, this is not validated - obviously the server needs to check the resulting list!
它在所有者文本框中维护一个唯一日期列表。你也可以在那里输入，这不是经过验证的——显然服务器需要检查结果列表！
I tried to get it to work with the datepicker's linked textbox but failed, so it creates an invisible input for the datepicker (it doesn't seem to work with display:none, hence the odd styling).
我试图让它与日期选择器的链接文本框一起工作但失败了，因此它为日期选择器创建了一个不可见的输入（它似乎不适用于display:none，因此样式很奇怪）。
It is positioned over the main input so the datepicker appears in the correct place, and is 1px in width so you can still type into the main textbox.
它位于主输入上方，因此日期选择器出现在正确的位置，宽度为 1px，因此您仍然可以在主文本框中输入。
It's for an intranet with a fixed platform so I haven't done much cross-browser testing.
是针对一个固定平台的内网，所以我没有做太多的跨浏览器测试。
Remember to include the handler on the bodyor it works confusingly.
请记住在 上包含处理程序，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); });
回答by Eslam Sameh Ahmed
Use this pluginhttp://multidatespickr.sourceforge.net
使用这个插件http://multidatespickr.sourceforge.net
- Select date ranges.
- Pick multiple dates not in secuence.
- Define a maximum number of pickable dates.
- Define a range X days from where it is possible to select Y dates. Define unavailable dates
- 选择日期范围。
- 选择不连续的多个日期。
- 定义可选取日期的最大数量。
- 定义可以选择 Y 日期的 X 天范围。定义不可用日期
回答by GerA
use this on:
使用它：
$('body').on('focus',".datumwaehlen", function(){
$(this).datepicker({
minDate: -20
});
});
