jquery ui datepicker上的日期范围选择器
我使用jquery ui创建了一个日期范围选择器，您可以使用相同的内联日历来选择日期。
看看我的小提琴： http ： //jsfiddle.net/kVsbq/4/
JS
$(".datepicker").datepicker({ minDate: 0, numberOfMonths: [12, 1], beforeShowDay: function (date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""]; }, onSelect: function (dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker(); } else { $("#input2").val(dateText); $(this).datepicker(); } } }); 我想要做的是像这样的范围选择器： http ： //jsfiddle.net/D3wLX/1/
如果选择较早的日期，则会自动将较早的日期作为范围中的第一个日期，并突出显示中间日期。 现在，在我原来的jquery ui解决方案中，它只会将较早的日期放在第二个输入中，而不是突出显示两者之间的日期。
你的脚本正是我想要的。 我分叉你原来的小提琴，只对你的onSelect做了一点调整，让它以你想要的方式工作。
onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker(); } else if( selectedDate < date1 ) { $("#input2").val( $("#input1").val() ); $("#input1").val( dateText ); $(this).datepicker(); } else { $("#input2").val(dateText); $(this).datepicker(); } }
原始部分缺少的只是检查以将当前选定的日期值与已捕获的日期值进行比较。
这是我的分叉小提琴： http ： //jsfiddle.net/sWbfk/
我在这里找到了答案：
http://www.benknowscode.com/2012/11/selecting-ranges-jquery-ui-datepicker.html
很棒的教程
$.datepicker._defaults.onAfterUpdate = null; var datepicker__updateDatepicker = $.datepicker._updateDatepicker; $.datepicker._updateDatepicker = function( inst ) { datepicker__updateDatepicker.call( this, inst ); var onAfterUpdate = this._get(inst, 'onAfterUpdate'); if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ''), inst]); } $(function() { var cur = -1, prv = -1; $('#jrange div') .datepicker({ //numberOfMonths: 3, changeMonth: true, changeYear: true, showButtonPanel: true, beforeShowDay: function ( date ) { return [true, ( (date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')]; }, onSelect: function ( dateText, inst ) { var d1, d2; prv = cur; cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime(); if ( prv == -1 || prv == cur ) { prv = cur; $('#jrange input').val( dateText ); } else { d1 = $.datepicker.formatDate( 'mm/dd/yy', new Date(Math.min(prv,cur)), {} ); d2 = $.datepicker.formatDate( 'mm/dd/yy', new Date(Math.max(prv,cur)), {} ); $('#jrange input').val( d1+' - '+d2 ); } }, onChangeMonthYear: function ( year, month, inst ) { //prv = cur = -1; }, onAfterUpdate: function ( inst ) { $('') .appendTo($('#jrange div .ui-datepicker-buttonpane')) .on('click', function () { $('#jrange div').hide(); }); } }) .position({ my: 'left top', at: 'left bottom', of: $('#jrange input') }) .hide(); $('#jrange input').on('focus', function (e) { var v = this.value, d; try { if ( v.indexOf(' - ') > -1 ) { d = v.split(' - '); prv = $.datepicker.parseDate( 'mm/dd/yy', d[0] ).getTime(); cur = $.datepicker.parseDate( 'mm/dd/yy', d[1] ).getTime(); } else if ( v.length > 0 ) { prv = cur = $.datepicker.parseDate( 'mm/dd/yy', v ).getTime(); } } catch ( e ) { cur = prv = -1; } if ( cur > -1 ) $('#jrange div').datepicker('setDate', new Date(cur)); $('#jrange div').datepicker('refresh').show(); }); });
.wrapper { height: 600px; } #jrange input { width: 200px; } #jrange div { font-size: 9pt; } .date-range-selected > .ui-state-active, .date-range-selected > .ui-state-default { background: none; background-color: lightsteelblue; }
伙计，你的代码真的是我需要的！
随着Jamie Layne的纠正，我决定用它来制作一个插件。
这是jsfiddle的链接： http ： //jsfiddle.net/dxLRm/35/ （链接更新时间：2014/01/01）
因为我必须显示一些代码，所以这就是我所拥有的：
(function ($) { $.prototype.rangedatepicker = function (o,x,y) { var dp = $.datepicker, cl = dp.markerClassName, di = 'data-rdp-i', df = 'data-rdp-f'; switch(o) { case 'option': return $(this).datepicker('option'); case 'hide': return $(this).datepicker('hide'); case 'show': return $(this).datepicker('show'); case 'getInitialDate': return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''); case 'getFinalDate': return dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||''); case 'getRange': var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''), fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||''); return (!ini&&!fin)?null:[ini,fin]; case 'getNumDays': var ini=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(di)||''), fin=dp.parseDate($(this).eq(0).datepicker('option','dateFormat'),$(this).eq(0).attr(df)||''); return (ini+0==0||fin+0==0)?0:Math.round((fin-ini)/86400000)+1; case 'removeRange': return $(this).attr(di,'').attr(df,'').datepicker('setDate',null); case 'destroy': return $(this).removeAttr(di).removeAttr(df).datepicker('destroy'); case 'serialize': return this[0].id+'_initial='+this[0].getAttribute(di)+'&'+this[0].id+'_final='+this[0].getAttribute(df); default: var defaults={ allowSelectOneDay: false, alwaysSetDateToFirstDay: true, rangeEnabled: true, rangeClass: 'ui-state-default ui-state-active'//'dp-highlight' }; o = $.extend({}, defaults, $.datepicker._defaults, o); return $(this).each(function () { if (!$.datepicker) return; var t = this, hd = !! ((' ' + t.className + ' ').indexOf(' ' + cl + ' ') + 1); $(t).datepicker($.extend({}, o, { beforeShowDay: function (d) { if (o.rangeEnabled) { var d1 = dp.parseDate(o.dateFormat, t.getAttribute(di) || ''), d2 = dp.parseDate(o.dateFormat, t.getAttribute(df) || ''), y = (function (d) { try { return o.beforeShowDay.call(t, d); } catch (e) {} })(d) || [true, '', null], x = ((y && y[0] !== false) || !y) && d1 && ((d.getTime() == d1.getTime()) || (d2 && d >= d1 && d <= d2)); return (!d1||!d2)?y||[true,'',null]:[y[0]&&x, (x ? o.rangeClass || defaults.rangeClass : '') + (y[1] ? ' ' + y[1] : ''), y[2]]; } else { return (function (d) { try { return o.beforeShowDay.call(t, d); } catch (e) {} })(d) || [true, '', null]; } }, onSelect: function (dt, x) { if (o.rangeEnabled) { var i = t.getAttribute(di) || '', f = t.getAttribute(df) || '', d1 = dp.parseDate(o.dateFormat, i), d2 = dp.parseDate(o.dateFormat, f), s = dp.parseDate(o.dateFormat, dt); if ((dt == i && dt == f) || (!o.allowSelectOneDay && ((dt == i && !f) || (dt == f && !i)))) { t.removeAttribute(di); t.removeAttribute(df); $(t).datepicker('setDate', null); } else if (!d1 || d2) { t.setAttribute(di, dt); t.removeAttribute(df); o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s); } else if (s < d1) { t.setAttribute(df, i); t.setAttribute(di, dt); o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', s); } else { t.setAttribute(df, dt); o.alwaysSetDateToFirstDay && $(t).datepicker('setDate', d1); } } else { t.removeAttribute(di); t.removeAttribute(df); $(t).datepicker('setDate', dp.parseDate(o.dateFormat, dt)); } try { if($(t).datepicker('getDate'))o.onSelect.call(t, dt, x); } catch (e) {} } })); }); } }; })(window.jQuery);
您应该访问小提琴并阅读要做的事情列表！
任何想法或一段代码表示赞赏！
我也在寻找一种方法来扩展Datepicker jQuery插件以利用Bootstrap样式并遇到这个小gem：
Dan Grossman的Bootstrap-Date Range Picker显示了一些带有工作代码的实例。
这是GitHub项目。
最后，这里是设计的简洁性和强大function的截图：
我自己寻找一个日期范围选择器，我找到了这个页面。 我尝试了大多数建议，甚至在这里展示过，并将这一切转化为易于使用和集成的扩展： https ： //github.com/BuroRaDer/DateRangePicker 。 试试演示页面，看看它是如何工作的。 我想我可以把它变成一个真正的jQuery扩展，但现在我很满意它的工作方式。
现场演示：
两者都是Drupal站点，使用现在已集成的可用性日历模块。
我正在寻找一个即使没有内联也能工作的版本。 我希望能够单击输入字段以启动范围datepicker。 我能找到的所有范围的datepicker示例都被内联（包括上面的mcestone和Jamie Layne版本，这是这个分叉代码的基础）。
这是小提琴： http ： //jsfiddle.net/boson/pjffdtz2/
困难的部分似乎是在没有内联时使用datepicker来处理多个输入。 如果你想在焦点上打开日期选择器，Datepicker将不会轻易处理两个输入 – 肯定是一个’技巧’。 如果将datepicker与隐藏输入（display：none）相关联，则在可见输入之前创建该隐藏输入，然后让您的可见输入在click事件上显示datepicker，一切都很好。
所以我采取了原来的答案，并做了一些小改动：
- 在html中，创建与datepicker关联的隐藏输入。 在可见输入之前列出它。
- 在html中，使用可见输入的click事件来显示与隐藏输入关联的datepicker。
- 在Javascript datepicker onSelect中，暂时将datepicker置于内联模式，直到单击两个日期。 这允许您在datepicker关闭之前单击多个日期（范围’To’日期和’From’日期） – 这实质上将datepicker转换为多点击日期选择器。
- 在datepicker onClose中，关闭内联模式。 这允许有人点击输入字段再次打开datepicker。
- 在beforeShow中，将日期选择器向下移动几个像素，以便您可以看到输入字段和日期选择器
这是代码：
$(function() { $(".rangepicker").datepicker({ minDate: 0, numberOfMonths: [2, 1], beforeShow: function (input, inst) { var rect = input.getBoundingClientRect(); setTimeout(function () { inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); }, 0); }, beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)); return [true, isHighlight ? "dp-highlight" : ""]; }, onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); } else if (selectedDate < date1) { $("#input2").val($("#input1").val()); $("#input1").val(dateText); } else { $("#input2").val(dateText); } $(this).data('datepicker').inline = true; $(this).datepicker(); }, onClose: function() { // Since we went inline as soon as the date input was clicked // (to leave the datepicker up for both dates selection), // turn inline back off again so date input click will once again // display the datepicker $(this).data('datepicker').inline = false; } }); });
.dp-highlight .ui-state-default { background: #484; color: #FFF; }
Dates:
谢谢，我需要这种代码。 这是我的代码：
/** Display Checkin Datepicker and Checkout DatePicker */
我的代码是来自其他代码的示例代码，但在日期选择，日期范围和高光方面有所不同。 我在JSFIDDLE中创建并保存了代码