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.
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.
* 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)
Would be nice if the dates in the selection range were highlighted, and unselectable dates (eg. later than the end date in left calendar, earlier than start date in right calendar.) were grayed out.
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.
Yeah. Only issue with it: reinvented yet another format language instead of using strftime's or UTS#35's (most annoying part: moment's format is confusingly close to UTS#35's)
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.
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.
It's just a matter of time; I could've spent a week on this adding features and perfecting UX, but then I'd have pushed back finishing Improvely another week. I hope to find some time to go back and add all the details I've missed as pointed out in various comments here.
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.
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...
"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."
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 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.
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.
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
[+] [-] wickedchicken|13 years ago|reply
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.
[+] [-] Groxx|13 years ago|reply
[+] [-] tnorthcutt|13 years ago|reply
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.
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] juddlyon|13 years ago|reply
[+] [-] s_kilk|13 years ago|reply
[+] [-] timdorr|13 years ago|reply
[+] [-] bm1362|13 years ago|reply
http://cs.txstate.edu/~bm1362/projects/bootstrap-datepicker/
[+] [-] rplnt|13 years ago|reply
[+] [-] dclowd9901|13 years ago|reply
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.
[+] [-] masklinn|13 years ago|reply
* 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)
[+] [-] mclin|13 years ago|reply
[+] [-] kn8|13 years ago|reply
[+] [-] masklinn|13 years ago|reply
[+] [-] campnic|13 years ago|reply
[+] [-] franklovecchio|13 years ago|reply
[+] [-] tibbon|13 years ago|reply
I have an application that I have to choose dates/times when sections of classes are.
[+] [-] freditup|13 years ago|reply
[+] [-] smackfu|13 years ago|reply
[+] [-] dangrossman|13 years ago|reply
[+] [-] katabatic|13 years ago|reply
[+] [-] tommoor|13 years ago|reply
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 :-)
[+] [-] dangrossman|13 years ago|reply
[+] [-] Encosia|13 years ago|reply
[+] [-] stephenhuey|13 years ago|reply
[+] [-] gmac|13 years ago|reply
[+] [-] voidfiles|13 years ago|reply
[+] [-] s_kilk|13 years ago|reply
[+] [-] przemoc|13 years ago|reply
Nice-looking UI -/-> Good UI
And even more:
Nice-looking UI -/-> Good UX
[+] [-] jurre|13 years ago|reply
It doesn't hurt to be friendly, you know.
[+] [-] Xurinos|13 years ago|reply
[+] [-] nantes|13 years ago|reply
https://github.com/dangrossman/bootstrap-daterangepicker/iss...
[+] [-] wickchuck|13 years ago|reply
[+] [-] mlitwiniuk|13 years ago|reply
[+] [-] culshaw|13 years ago|reply
[+] [-] sadpluto|13 years ago|reply
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/
[+] [-] illdave|13 years ago|reply
[+] [-] vailripper|13 years ago|reply
[+] [-] danso|13 years ago|reply