Show HN: A date range picker for Twitter Bootstrap

With our new Bootstrap guidelines, we're trying to encourage activity in the upper-left, lower-left and lower right quadrants, and limit certain use cases that occupy the upper-right quadrant.

Nearly eighteen months ago, we gave developers guidance that they should not build form elements that mimic or reproduce the mainstream Twitter Bootstrap experience. And to reiterate, that guidance continues to apply today.

This is great, but could use a small tweak: Once you select a start date, it should grey out the dates before the selection in both calendars. That will make it easier to pick an end date that's valid. And vice versa for the end date.

* Clicking on the calendar itself does not work for the first item, shouldn't it focus the field and open the picker?

* Can't [Esc] to close the picker

* Not sure why the "Apply" button is needed when the date is set regardless of its usage

* The ability to drag from one date to the next would be rather nice

* Not sure datejs is a good idea as a base, it's essentially dead (has been for 4 years) and the localizations are in a pretty sorry state

* The reflow/columnification when changing the width of the browser looks pretty bad

* When trying to select a FROM date after the TO date, the selection is just cancelled without any indication or hint that something is wrong. This is compounded by the calendars not showing the current selection range. Hipmunk does that part rather well (though not perfectly)

http://momentjs.com/ is a much better library than datejs. It's maintained, tested, smaller?, deals much better with internationalization/custom date formats. I'd recommend it to anyone looking for a JS date library.

I'd like to see someone do this and handle times and timezones. What a pain that is.

I've had a hell of a time finding a good date AND time picker that compliments Bootstrap well. The combined ones I've found are just a horrid experience.

I have an application that I have to choose dates/times when sections of classes are.

Seems odd to have a date range picker with two calendars. Most of the ones I've seen have you pick both dates on a single calendar.

This is really nice, particularly with the custom ranges - I'm tempted to implement something very similar to this in our admin interface.

I do wonder though why you don't allow for entry into the date boxes and agree that the unselectable dates should be greyed out :-)

I was going to have to build something just like this next week, to add arbitrary date ranges to an existing dropdown with pre-defined ranges. Thanks for releasing this. It looks great.

Love it! Nice UX with the not-allowed cursor on the little FROM and TO boxes. It's amazing how painful date range selection is on so many websites.

Doesn't fit in with the bootstrap code style. Your plugin has too many semicolons.

Wow! this is amazingly useful, thanks so much. Needless to say I'll be replacing my crappy date forms with this asap.

It's sad how more and more people ignore non-mouse-or-touch-oriented users in their UIs. What about damn old keyboard support? Even if I modify input, nothing changes in UI. I'm not even mentioning such things as being able to easily navigate through days and months using arrow keys...

Nice-looking UI -/-> Good UI

And even more:

Nice-looking UI -/-> Good UX

There is also this one here that Addy Osmani and others put together. But this one appears to be a little bit lighter weight solution. http://addyosmani.github.com/jquery-ui-bootstrap/#rangeA

I was looking for such thing for last few hours :D Thanks for great job, I really appreciate. And one more thing - have you thought about pledgie? Because this is one of those plugins, that I would really love to donate + it saved me hours of work.

I really like this, another approach has been done here too: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-...

Are there Bootstrap tutorials that also combine the minimal CSS knowledge required in order to use it? For instance, I have a vague understanding of the box model, and can hand-code very simple pages myself, but I find it unsatisfactory, as the nested divs and knowing what class to use when can drive me a bit nuts. So far the tutorials I've come across don't add much to the official documentation at all.

I'm hoping this lean book [1] will give me a nice, integrated walk through these issues.

[1] http://www.amazon.com/Twitter-Bootstrap/dp/6201519254/

This is incredibly useful - thanks so much.

Nice job, very clean UI.

Nice work. In the first example, I would put the From and To input boxes directly aligned with the corresponding calendars. Right now, with those inputs being aligned into a right column, they look like a totally different option

Looks nice, but I prefer hipmunk.com's date range selector. It doesn't require a start date picker and an end date picker. You select two dates and it knows the range.

My favorite date range picker http://burrow.dev.agriya.com/ (They didn't seem to use Bootstrap though)

Nice work. Is there any out of the box way to use this simply as a date picker (popping up one calendar rather than two)?

Looks great, I think I'm going to add it to the Bootstrap interface builder I'm working on. Super cool!

Other than the styles, I'm not so sure this is much better than the jQuery UI Datepicker.

It would be nice if you could add some tests to the project. QUnit would suffice.

Very nice! is the datejs project still as dead as the website makes it appear?

Beautiful.

Datejs is huge. Seems to be a shame they made it a dependency.

great job! Finally, bootstrap really needs this. good job-

Fantastic. Thanks for sharing!

Terrific job, thanks.

Neat stuff here.

Oh my

You know what would be a really nice addition to this? Relative range options embedded directly in the picker, with labels like "this week", "next week", "this year", "last 30 days", etc.