我使用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解决方案中，它只会把较早的日期放在第二个输入中，而不会突出显示中间的日期。
7条答案
按热度按时间oewdyzsn1#
你的脚本正是我所寻找的。我叉你原来的小提琴，只做了轻微的调整，你的onSelect让它工作的方式，你想要的。
字符串
原始部分中缺少的只是一个检查，用于将当前选择的日期值与已经捕获的日期值进行比较。
这是我的分叉小提琴：https://jsfiddle.net/7xwm6bqt/
x7rlezfr2#
我在这里找到了答案：
http://www.benknowscode.com/2012/11/selecting-ranges-jquery-ui-datepicker.html（该网站看起来已被黑客攻击）
伟大的教程
omvjsjqw3#
我也在寻找一种方法来扩展Datepicker jQuery插件，以利用Bootstrap样式，并遇到了这个小宝石：
Dan Grossman的Bootstrap-Date Range Picker展示了一些带有工作代码的示例。
下面是GitHub项目。
最后，这里是一个简单和强大的设计截图：
的数据
wh6knrhe4#
谢谢我需要这样的代码。下面是我的代码：
字符串
我的代码是一个样本代码来自别人，但不同的日期选择，日期范围和higlights。我创建和保存的代码在JSFIDDLE
https://jsfiddle.net/kk585b4g/
9wbgstp75#
伙计，你的代码真的是我需要的！
在Jamie Layne的纠正下，我决定用它来做一个插件。
以下是jsfiddle的链接：http://jsfiddle.net/dxLRm/35/（链接更新于2014/01/01）
由于我必须显示一些代码，下面是我所拥有的：
字符串
你应该访问小提琴和阅读的事情要做的列表！
任何想法或代码都值得赞赏！
vngu2lb86#
我自己也在寻找一个日期范围选择器，我发现了这个页面。我尝试了大多数建议的想法，甚至在这里演示，并把这一切变成了一个易于使用和集成的扩展：https://github.com/BuroRaDer/DateRangePicker。尝试演示页面，看看它是如何工作的。我想我可以把它变成一个真实的jQuery扩展，但现在我对它的工作方式很满意。
现场演示：
两者都是Drupal网站，使用可用性日历模块，它现在已经集成到其中。
uqdfh47h7#
我一直在寻找一个即使没有内联也能工作的版本。我希望能够点击输入字段来启动范围日期选择器。我能找到的所有范围日期选择器示例都是内联的（包括上面的mcestone和Jamie Layne版本，这是这个分叉代码的基础）。
小提琴：http://jsfiddle.net/boson/pjffdtz2/
困难的部分似乎是让datepicker在没有内联的情况下处理多个输入。如果你想在焦点上打开datepicker，那么Datepicker不会轻松地处理两个输入-这绝对是一个“技巧”。如果你将datepicker与隐藏输入相关联（显示：none），在可见输入之前创建隐藏输入，然后让你的可见输入在点击事件上显示datepicker，一切都很好。
所以我接受了最初的答案，只做了一些小的修改：
下面是代码：
还有很多东西需要改进。需要更好的输入验证。特别是想让日期选择器“完成”按钮在内联模式下工作，但日期选择器不是为这种情况设计的（当然，如果在datepicker中有一个可设置的Done按钮标志就好了）。所以现在，我有一个俗气的完成按钮旁边的输入字段，实际上什么也不做（除了鼓励用户将焦点从日期选择器移开以关闭日期选择器之外）。