84 comments

[ 3.9 ms ] story [ 201 ms ] thread
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.
Well, kind of. Wouldn't nicer UX be: let the user type the date if he or she wants to?
Or have that trigger the custom picker. Just putting up an X cursor is hostile to the user.
This is incredibly useful - thanks so much.
Wow! this is amazingly useful, thanks so much. Needless to say I'll be replacing my crappy date forms with this asap.
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.
And it would automatically do what I was about to suggest - highlight the selected range.
If you're looking for an alternative with this feature, I modified a datepicker a while ago to do just that:

http://cs.txstate.edu/~bm1362/projects/bootstrap-datepicker/

> cs.txstate.edu

Yeah right, you expect me to believe that students ever go to class in San Marvelous?

Kidding, sort of. I didn't attend too often :|

Being from Wimberley, I can attest- it is rather difficult to get things done. I've still got a year or so left before I'm free. Glad to see our CS dept has some presence somewhere, eh?
Indeed! I begrudgingly moved to Austin a few years ago.
In this same vein, I encountered a bug when I was picking a date after the default selected end date in Chrome 12.0.742.112. Essentially, I couldn't actually select the date. It wouldn't take.

The expected behavior is that I could not only select a date, but the "end date" calendar should jump to at least whatever month-year I selected my start date at if the selected start date comes after the selected end date. Even nicer if you tie the event to the month selection so that the end date calendar's minimum month-year is the furthest point the start date's month-year calendar has gone.

Slightly off-topic: why are you using/testing on a Chrome version that was released more than a year ago?
I would be more interested in "how". Chrome updates automatically. So how does he/she avoid auto update?
> Chrome updates automatically. So how does he/she avoid auto update?

Kill the auto-update daemon, remove it, prevent it from re-installing itself (by creating an empty "GoogleSoftwareUpdate" directory with write bits unset in place of the removed one). Done.

I have the EXACT same problem and I came here to see how many more people were running into this wall ... the thing is: I'm using Chrome's latest version (21.0.1180.82) ... is this a bug ?
Very nice! is the datejs project still as dead as the website makes it appear?
I'd like to see someone do this and handle times and timezones. What a pain that is.
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

I have to do a ton of clicking to get to last year. It would be much faster to be able to type in arbitrary dates, too, and have the calendars update to reflect those new dates. And when I altered the date text in the editable field (the one you click to drop down the calendars), they did not honor my change; to be consistent, that field should also be readonly.
I really like the year navigation pick in this one:

http://www.eyecon.ro/bootstrap-datepicker/

Maybe it could just improve on it? they look the same ;)

Wow, that component's approach is a nice idea. That component ALSO handles keyboard changes to the date.
That's actually the same UI as the Windows 7 date/time picker :)
I don't know about him, but that's no coincidence here. I was staring at the Win7 taskbar calendar while figuring out how to generate calendars for arbitrary months/years, and how to show the overlap from previous/future months. Add the Bootstrap table and button styles, and you end up with what you see.
"This is a great looking timepicker. One thing that I would love to see added is better keyboard support: for instance when modifying input by keyboard it would be nice to see the UI update, it would also be nice to be able to navigate through days and months using arrow keys."

It doesn't hurt to be friendly, you know.

Sure. I was simply put off, because of all these appraisals and lack of sober evaluation. Mea culpa.
great job! Finally, bootstrap really needs this. good job-
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.

If you find anything be sure to post it. I've been hunting for a nice time/datetime picker also.
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.
That's a lot more work when the dates are not in the same month. My use case for building this was choosing ranges for reports.
I've seen this pattern a lot, particularly in websites for picking reservation dates (airlines, vacation homes, cars, etc...). It's very useful in that case, and I find that it's much easier for me to keep track of what I've entered that way.
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)?
Other than the styles, I'm not so sure this is much better than the jQuery UI Datepicker.
(comment deleted)
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.
Isn't that what's shown on the linked page under "Pre-defined Ranges & Callback Example?"
Scroll down a little -- that was the reason I created it.
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.
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.

I didn't find any mention of this on the Bootstrap github project. And I feel I must ask: why? Bootstrap includes dropdowns, how is this different?
Parent is referencing the Twitter blog post about changes in Version 1.1 of the API which stirred some controversy because of the new rules and limitations for 3rd party developers. See the link below:

https://dev.twitter.com/blog/changes-coming-to-twitter-api

I don't know of any similar limitations for Bootstrap, so you can probably safely assume that wickedchicken is kidding.

Most definitely a joke, though it took me a second to realize that myself.
It's a joke? I totally missed that! My perception for these things is rather obtuse, so thanks for pointing it out. I thought that perhaps the Twitter devs themselves had jumped the shark.
Oh damn got me too! I don't see a problem with enforcing design consistency rules however, probably why it flew over my head.
(comment deleted)
Open source != a company's core business.

Not that I think Twitter's recent announcements are smart; quite the contrary. However, a false comparison distracts from the real problem.

I also think your comment is funny.

I'll admit it, this one took me a long time and multiple reads to get the joke. well done.
Well played! I was halfway indignant before I got it.
Looks great, I think I'm going to add it to the Bootstrap interface builder I'm working on. Super cool!
My oh my, this is fantastic, except I can see another wave of bootstrap plugins this time everyone trying to out-do each other with date pickers.