我使用jQuery的用户界面，你可以使用相同的在线日历，请为约会选择的创建日期范围选择器。
看到这里我的小提琴： 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 ) { $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>') .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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="wrapper"> <div id="jrange" class="dates"> <input /> <div></div> </div> </div>
老兄，你的代码确实是我需要的东西！
并与杰米·莱恩的修正，我决定用它做一个插件。
这里是链接的jsfiddle： http://jsfiddle.net/dxLRm/35/ （链接更新2014年1月1日）
因为我必须表现出一些代码，这里是我有：
(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);
你应该访问小提琴和读取要做的事情列表！
任何想法或一段代码被感激！
我也一直在寻找一种方式来延长日期选择器jQuery插件，利用引导造型和整个这个小宝石来了：
自举日期范围选择器由丹·格罗斯曼表示有工作代码的一些活生生的实例。
下面是该项目GitHub上也是如此。
最后，这里是设计的简单性和强大的截图：
谢谢，我需要这种代码。 这里是我的代码：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="Datepicker"></div>
<p>
<label><b>Checkin:</b></label> <label id="checkinDate"></label>
<label><b>Checkout:</b></label> <label id="checkoutDate"></label>
</p>
/** Display Checkin Datepicker and Checkout DatePicker */
<script>
datePicker();
function datePicker(){
$(document).ready(function(){
$( "#Datepicker" ).datepicker({
dateFormat: "MM d, yy",
minDate: 0,
maxDate: "+3M +0D",
beforeShowDay: dateRange,
onSelect: DRonSelect
});
});
}
function dateRange(date){
var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
$(document).ready(function(){
// $("td.dp-highlight").text("Y");
});
return [true, isHighlight ? "dp-highlight" : ""];
}
function DRonSelect(dateText, inst) {
var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
if (!date1 || date2) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#Datepicker").datepicker();
}
else {
if ( $.datepicker.parseDate("MM d, yy", $("#checkinDate").text()) >=
$.datepicker.parseDate("MM d, yy", dateText)) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#Datepicker").datepicker();
}
else {
$("#checkoutDate").text(dateText);
$("#Datepicker").datepicker();
}
}
}
</script>
我的代码是一个示例代码来自别人，而是在日期选择，日期范围和higlights不同。 我创建和保存的jsfiddle代码
https://jsfiddle.net/kk585b4g/
寻找一个日期范围选择器的自己，我找到了这个网页。 我想建议大多数的想法，在这里更是彰显并把所有到一个易于这对使用和集成扩展： https://github.com/BuroRaDer/DateRangePicker 。 试用演示页面，看看它是如何工作的。 我想我可以把它变成一个真正的jQuery的扩展，但现在很高兴与它的工作方式。
现场演示：
- http://lescamelias.eu/en/availability
- http://maisonnera.eu/
两者都使用到它已经现在集成可用性日历模块的Drupal网站。
我一直在寻找一个版本，将工作即使不内联它。 我希望能够点击输入字段火起来的范围内日期选择器。 所有范围内的日期选择器的例子我能找到被内嵌（包括mcestone及以上杰米·莱恩版本，这是该分叉代码的基础）。
这里的小提琴： http://jsfiddle.net/boson/pjffdtz2/
困难的部分似乎是越来越日期选择器来处理多个输入不是内联的时候。 如果你想打开日期选择焦点的DatePicker不会轻易处理两个输入 - 那里肯定是“绝招”。 如果您在日期选择器采用了隐藏式输入（显示：无）联系起来，可见输入之前创建一个隐藏的输入，然后让你看到输入显示上的click事件的日期选择器，一切都很好。
所以我把原来的答案，只是做了一些小的改动：
- 在HTML中，创建日期选择器关联的隐藏输入。 可见输入之前列出。
- 在HTML中，使用的可视输入的点击事件，以显示与隐藏的输入相关的日期选择器。
- 在JavaScript日期选择器ONSELECT，暂时将日期选择器串联模式，直到两个日期已被点击。 这使您可以点击日期选择器关闭之前多个日期（“至”日期范围，“从”日） - 这实质上是将日期选择为multiclick日期选择器。
- 在日期选择器的OnClose，关闭在线模式。 这使得有人点击输入字段再次打开日期选择器。
- 在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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <input type="text" id="input1_1" class="rangepicker" style="display: none"> <p> Dates: <label><b>To:</b></label> <input type="text" id="input1" onclick="$('.rangepicker').datepicker('show');"> <label><b>From:</b></label> <input type="text" id="input2" onclick="$('.rangepicker').datepicker('show');"> <button id="done">Done</button> </p>
许多事情留给提高。 需要更好的输入验证。 尤其是想获得“完成”按钮，日期选择器串联模式，但日期选择器并没有为这种情况设计的（肯定会是不错的日期选择器可设定的完成按钮标志）工作。 所以现在，我旁边，其实什么也不做（不是鼓励用户采取的焦点关闭日期选择器关闭日期选择器等）输入字段俗气完成按钮。
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/Qd8dm.png', '推荐 太酷不给撩 的文章《在jQuery UI的日期选择日期范围选择器(Date range picker on jquery》','https://www.manongdao.com/article-1425323.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}