日期范围选择器类似谷歌分析日期范围选择器?

I'm building a web app where the vast majority of our target audience likely have experience with Google Analytics - and as a part of that website there is a date range selector. I was hoping to find an off-the-shelf javascript/jquery date range selector to customize to my needs, but I'm not a fan of the stock version that jquery provides because it lacks the actual date inputs, it only has the two visual calenders. I listed what I'm looking for below.

我正在开发一个web应用程序，我们的绝大多数目标受众可能都有谷歌分析的经验——作为该网站的一部分，有一个日期范围选择器。我希望找到一个现成的javascript/jquery日期范围选择器来定制我的需求，但我不喜欢jquery提供的股票版本，因为它没有实际的日期输入，它只有两个可视日历。我在下面列出了我要找的东西。

What I'd love:

我的爱:

Select a start and end date on a single calender (preferably with two months shown).

在单个日历上选择开始和结束日期(最好显示两个月)。
Enter the start and end date manually into an input box

在输入框中手动输入开始日期和结束日期
Highlighting of selected date range (changing background-color of dates within 'start' and 'end').

突出显示选定日期范围(在“开始”和“结束”中更改日期背景颜色)。
Fairly easy to get at the CSS / layout elements

很容易获得CSS /布局元素

What I don't need:

我不需要什么:

A timeline selector
时间选择器
Compare to past
与过去相比

Thanks for helping out!

谢谢你的帮忙!

3 个解决方案

#1

jquery-ui-datepicker

http://jqueryui.com/demos/datepicker/#multiple-calendars

http://jqueryui.com/demos/datepicker/多种日历

here is also a listing of other plug ins

这里还有其他插件的列表

http://www.bloggingdeveloper.com/post/8-Widely-Used-Calendar-Date-Picker-and-Time-Formatting-jQuery-Plugins-that-Web-Developers-Should-Know.aspx

#2

jquery-ui-datepicker do not have date range selector. Just found out this nice plugin which does that - http://www.eyecon.ro/datepicker/

jquery-ui-datepicker没有日期范围选择器。刚刚发现了这个漂亮的插件——http://www.eyecon.ro/datepicker/。

update

更新

Recently started using another open source plugin and it's working great too.

最近开始使用另一个开源插件，它也很好用。

https://github.com/dangrossman/bootstrap-daterangepicker

#3

I like this one due to the quick select of common ranges such as year to date, today etc. The code looked pretty readable, so i guess it would be possible rewrite it slightly to align with use cases for the application.

我喜欢这个，因为它快速地选择了一些通用的范围，比如到目前为止的年份，今天等等。代码看起来非常容易读懂，所以我想可以稍微重写一下，以便与应用程序的用例保持一致。

http://www.filamentgroup.com/examples/daterangepicker_v2/

#1