

Show HN: A date range picker for Twitter Bootstrap - dangrossman
http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

======
wickedchicken
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.

~~~
Groxx
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?

~~~
rasmusrygaard
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.

~~~
cwilson
Most definitely a joke, though it took me a second to realize that myself.

~~~
possibilistic
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.

------
timdorr
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.

~~~
bm1362
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/>

~~~
k3n
> 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
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?

~~~
k3n
Indeed! I begrudgingly moved to Austin a few years ago.

------
masklinn
* 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
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.

------
kn8
<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
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)

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

~~~
franklovecchio
Dittoed.

~~~
angryasian
agree, another vote for a date + time picker

------
tibbon
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.

~~~
freditup
If you find anything be sure to post it. I've been hunting for a nice
time/datetime picker also.

------
smackfu
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.

~~~
dangrossman
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.

------
tommoor
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 :-)

~~~
dangrossman
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.

~~~
tommoor
Totally understood, by the way - what is it that makes it depend on Bootstrap,
could it be easily decoupled?

~~~
dangrossman
Bootstrap 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.

------
Encosia
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.

------
stephenhuey
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.

~~~
gmac
Well, kind of. Wouldn't nicer UX be: let the user type the date if he or she
wants to?

~~~
smackfu
Or have that trigger the custom picker. Just putting up an X cursor is hostile
to the user.

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

------
przemoc
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

~~~
Xurinos
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.

~~~
lobo_tuerto
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 ;)

~~~
Gigablah
That's actually the same UI as the Windows 7 date/time picker :)

~~~
dangrossman
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.

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

------
wickchuck
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>

------
mlitwiniuk
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.

------
sadpluto
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/>

------
culshaw
I really like this, another approach has been done here too:
[http://www.eyecon.ro/colorpicker-and-datepicker-for-
twitter-...](http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-
bootstrap.htm)

------
illdave
This is incredibly useful - thanks so much.

------
vailripper
Nice job, very clean UI.

------
_1
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.

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

------
uripom
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)?

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

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

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

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

------
sledmonkey
Beautiful.

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

~~~
onassar
I wonder if <http://phpjs.org/functions/date:380> along with some of it's
related methods could be of use.

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

------
ozataman
Fantastic. Thanks for sharing!

------
avirambm
Terrific job, thanks.

------
guscost
Neat stuff here.

------
danso
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

------
southphillyman
Oh my

------
WayneDB
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.

~~~
nopal
Isn't that what's shown on the linked page under "Pre-defined Ranges &
Callback Example?"

