8 ms·
Show HN: A date range picker for Twitter Bootstrap
- wickedchicken 14y agoWith 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.
- Groxx 14y agoI 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?
- rasmusrygaard 14y agoParent 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 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.
- cwilson 14y agoMost definitely a joke, though it took me a second to realize that myself.
- possibilistic 14y agoIt'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.
- skeletonjelly 14y agoOh damn got me too! I don't see a problem with enforcing design consistency rules however, probably why it flew over my head.
- deleted 14y ago[deleted]
- tnorthcutt 14y agoOpen 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.
- s_kilk 14y agoI'll admit it, this one took me a long time and multiple reads to get the joke. well done.
- juddlyon 14y agoWell played! I was halfway indignant before I got it.
- vailripper 14y agoNice job, very clean UI.
- stephenhuey 14y agoLove 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.
- illdave 14y agoThis is incredibly useful - thanks so much.
- s_kilk 14y agoWow! this is amazingly useful, thanks so much. Needless to say I'll be replacing my crappy date forms with this asap.
- sledmonkey 14y agoBeautiful.
- southphillyman 14y agoOh my
- timdorr 14y agoThis 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.
- bm1362 14y agoIf 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/ http://cs.txstate.edu/~bm1362/projects/bootstrap-datepicker/
- yehanyin 14y agoseems the demo doesn't work for me due to js errors. However, seems https://github.com/eternicode/bootstrap-datepicker https://github.com/eternicode/bootstrap-datepicker is good for single datepicker.
- bm1362 14y agoHmm, browser specs + errors? I have it running in production for about 400+ developers and no one has filed a bug, yet. Thanks for the heads up!
- k3n 14y ago> 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 :|
- bm1362 14y agoBeing 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?
- 14y ago
- 5h 14y agoVery nice! is the datejs project still as dead as the website makes it appear?
- WayneDB 14y agoYou 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.
- nopal 14y agoIsn't that what's shown on the linked page under "Pre-defined Ranges & Callback Example?"
- dangrossman 14y agoScroll down a little -- that was the reason I created it.
- campnic 14y agoI'd like to see someone do this and handle times and timezones. What a pain that is.
- franklovecchio 14y agoDittoed.
- angryasian 14y agoagree, another vote for a date + time picker
- samstr 14y agoGreat work!
- przemoc 14y agoIt'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
- nantes 14y agoOr even file a bug about it. https://github.com/dangrossman/bootstrap-daterangepicker/issues/1 https://github.com/dangrossman/bootstrap-daterangepicker/iss...
- Xurinos 14y agoI 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.
- Xurinos 14y agoTo add to this... http://filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/ http://filamentgroup.com/lab/date_range_picker_using_jquery_... Same one? Seems to have a slick interface that does not require an apply button, does provide ranges and customizable range options, although it does not have easy keyboard input either.
- lobo_tuerto 14y agoI really like the year navigation pick in this one: http://www.eyecon.ro/bootstrap-datepicker/ http://www.eyecon.ro/bootstrap-datepicker/ Maybe it could just improve on it? they look the same ;)
- Xurinos 14y agoWow, that component's approach is a nice idea. That component ALSO handles keyboard changes to the date.
- jfaucett 14y agogreat job! Finally, bootstrap really needs this. good job-
- tibbon 14y agoI'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.
- freditup 14y agoIf you find anything be sure to post it. I've been hunting for a nice time/datetime picker also.
- smackfu 14y agoSeems 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.
- dangrossman 14y agoThat'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.
- katabatic 14y agoI'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.
- uripom 14y agoNice work. Is there any out of the box way to use this simply as a date picker (popping up one calendar rather than two)?
- mmuro 14y agoOther than the styles, I'm not so sure this is much better than the jQuery UI Datepicker.
- deleted 14y ago[deleted]
- danso 14y agoNice 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
- wickchuck 14y agoThere 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 http://addyosmani.github.com/jquery-ui-bootstrap/#rangeA
- _1 14y agoLooks 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.
- yesimahuman 14y agoLooks great, I think I'm going to add it to the Bootstrap interface builder I'm working on. Super cool!
- avirambm 14y agoTerrific job, thanks.
- tarellel 14y agoMy 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.
- culshaw 14y agoI really like this, another approach has been done here too: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-...
- donbronson 14y agoDatejs is huge. Seems to be a shame they made it a dependency.
- onassar 14y agoI wonder if http://phpjs.org/functions/date:380 http://phpjs.org/functions/date:380 along with some of it's related methods could be of use.
- tommoor 14y agoThis 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 :-)
- dangrossman 14y agoIt'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.
- tommoor 14y agoTotally understood, by the way - what is it that makes it depend on Bootstrap, could it be easily decoupled?
- dangrossman 14y agoBootstrap provides a bunch of the styles that control the appearance of dropdown menus (for the container around the component) and tables (for the calendars), which this uses. You'd have to copy the relevant styles out of Bootstrap's CSS.
- mlitwiniuk 14y agoI 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.
- ozataman 14y agoFantastic. Thanks for sharing!
- alexyoung 14y agoIt would be nice if you could add some tests to the project. QUnit would suffice.
- kn8 14y agohttp://momentjs.com/ 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.
- masklinn 14y agoYeah. 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)
- voidfiles 14y agoDoesn't fit in with the bootstrap code style. Your plugin has too many semicolons.
- guscost 14y agoNeat stuff here.
- sadpluto 14y agoAre 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/ http://www.amazon.com/Twitter-Bootstrap/dp/6201519254/
- masklinn 14y ago* 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)
- mclin 14y agoWould 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.
- Encosia 14y agoI 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.
- johnx123-up 14y agoMy favorite date range picker http://burrow.dev.agriya.com/ http://burrow.dev.agriya.com/ (They didn't seem to use Bootstrap though)