Calendar/Date input

[wburningham]

I think it would be great to have some CSS for a calendar widget. It may seem pointless to have CSS without some JS to accompany it. Would it be possible to have a calendar icon appended to an input that when clicked on would display the calendar. I know jQuery UI can accomplish this, but it would great if it matched the Boostrap CSS.

[fat]

yep we've talked about adding this :)

[wburningham]

I don't know how far along you are, but I would suggest something similar to the attached image.

On Wed, Oct 19, 2011 at 10:42 AM, Jacob Thornton reply@reply.github.com wrote:

yep we've talked about adding this :)

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/445#issuecomment-2458164

[fat]

you can't attach images

[wburningham]

Here is a link: http://goo.gl/yh1yA

[wburningham]

There is also a jQuery plugin here: https://github.com/jonleighton/date_input

[brennanmceachran]

What are the thoughts of just rolling a Bootstrap jQuery UI theme? I'd hate to duplicate work too much...

[wburningham]

How many other features of Bootstrap are going to use jQuery UI. If there are enough it may be smart to create a theme.

W J Burningham Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Wednesday, October 19, 2011 at 1:28 PM, brennanmceachran wrote:

What are the thoughts of just rolling a Bootstrap jQuery UI theme? I'd hate to duplicate work too much...

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/445#issuecomment-2460088

[fat]

We don't have plans ourselves to write a jquery ui theme, although i've heard others have taken a swing at it, which is awesome!

We don't plan on duplicating work either - our development philosophy is very different from the jquery ui teams approach. A good example of this is our tab implementations. Jquery's tab widget is about 2500 lines of code, where our's is about 50 lines.

There's lots of room of innovation in this space and the way we are currently approaching development allows us to cut a lot of corners that just isn't possible for the jquery-ui team.

[brennanmceachran]

2500?! Seriously? That's what I like about Bootstrap! It "feels" very light.

I'd actually love some form widgets in bootstrap (calendar, slider, validations)... As long as it doesn't make bootstrap feel like jQuery UI, if you know what i mean?

[fat]

Yep - we definitely plan on building lots more stuff like that :)

[plentz]

(you can't attach, but you can link to it )

[storborg]

I tossed up a crude design based on jquery.date_input.js, attempting to match bootstrap's visual style. See it in action here: http://dl.dropbox.com/u/143355/datepicker/datepicker.html

I plan to write a new datepicker plugin to clean up the markup and match the bootstrap structure of configuring UI elements with data attributes.

[kevsmt]

nice one @storborg, i would be nice to have an option to make the months and year as dropdown & input for year. Love it man! great job.

[dirkkelly]

Beautiful work @storborg, thanks :)

[kasperp]

nice one

[hanshasselberg]

This is really cool @storborg!

[smasty]

@storborg: It's really nice. However, there are some problems in Opera/Linux:

• No rounded borders on days
• Weird white space on the right side of the month/year picker
• Incorrectly aligned arrows

[thatfunkymunki]

This would be a lifesaver- Really excited about storberg's work here

[arielkirkwood]

Great work @storborg!

[mdo]

Broheim, looking badass. Few questions and comments for you to consider:

• Submit a pull request! Make it for 2.0-wip and we'll add this in as soon as we can.
• Why are you using divs instead of a table? I understand the advantages I think, but what I like about tables here is that they maintain their intended structure when styles are missing or broken.
• Good work on accounting for overlap dates—nicely done.
• Do you see this being extensible to include two months at the same time, side-by-side?

Keep up the good work!

[storborg]

Thanks!

Re: divs v. table, it makes both the js and css simpler. I thought about going with a table, but it didn't seem quite worth it, since if the styles are missing entirely it's still going to be pretty crude. It may be worth using a table to try to better accommodate for extreme font size overrides, though.

Two month view: I like the idea, just haven't gotten to it yet, and there's obviously more UI edge cases that have to be thought through there.

Related, another thing I'd like to explore is the "date range" entry where you map a date picker to two text boxes, or have two date pickers which show their associated selections.

[zrod]

Good stuff @storborg, any thoughts on embedding a time selector for it as well?

[davoclavo]

@storborg I tried to use the datepicker with a fixed toolbar and it was displaced because of the padding-top of the body tag... so shouldn't the position of the datepicker be relative to the parent? So instead of using $.offset(), use $.position()

Great job!

[storborg]

@davoclavo Yup, the same problem also occurs inside of a modal, and is also fixed just by swapping .offset() for .position(). I've fixed this in my version. However, it looks pretty clear that the bootstrap maintainers are planning on a datepicker solution designed in-house, so I don't think I'm going to do any more public development of this one, since I don't think it's wise to create something that implements core functionality in a different way.

[lookfirst]

Please also do some sort of timepicker as well. I've actually grown fairly fond of this one, but I'm sure you guys can do better. https://github.com/fgelinas/timepicker

[pokonski]

Any progress on that? :( I actually made custom calendar style for my current project matching bootstrap's look. Needs JS though.

.calendar
  .caption March 2012
  .week-names
    .day Mon
    .day Tue
    .day Wed
    .day Thu
    .day Fri
    .day Sat
  .month-days
    - for week in weeks
      .week
        - for day in week
             .day= day

Very simple structure, styled as display: table, table-cell etc for proper horizontal spread.

[tuler]

Any plans for a calendar component for 2.0?

[necolas]

@tuler You might be interested in this for the moment: https://github.com/addyosmani/jquery-ui-bootstrap

[fat]

@tuler maybe 2.1 - but not 2.0

[ejain]

Don't forget localization...

[nphase]

Great job on shipping 2.0! Would love to see this in 2.1..

[pokonski]

So is anyone working on it? Because I don't want to double the work.

[jslegers]

I totally rewrote the Bootstrap 1.4 logic to match the semantics of jQuery UI + added compatibility for IE6. Basicly, it's a variation of jQuery Bootstrap that works with jQuery UI and makes jQuery UI themes obselete.

It's only in a preview phase. What do you guys think? ---> http://jslegers.github.com/jquery-bootstrap/

[odilontalk]

I will be glad to see this functionality on the next version !

[t2]

I add this to my jQuery UI Datepickers and place them inside input-append divs and it looks just fine.

$('input.date-picker').datepicker({
        showOn: 'button',
        buttonImage: '/images/default/shared/calendar.gif',
        buttonImageOnly: true
 }).next(".ui-datepicker-trigger").addClass('add-on');

[NelsonReis]

@t2 That's a really nice solution. It looks just like the appended inputs that Bootstrap already has and it allows using jQuery UI out of the box. Thanks!

[t2]

That's what I was going for. Glad it helped!

[pgmillon]

@storborg I have a very strange issue with your datepicker using Chrome if there's only one field on the page: when using the keyboard it moves 2 days forwards or backwards instead of just one. If I have two fields on the page, everything goes fine. See http://jsbin.com/izojih

[airtonix]

I much prefer this one : http://www.eyecon.ro/bootstrap-datepicker/

[mneuhaus]

this one seems quite extensive and good: Kalendae

[Nerian]

+1 I would love a Date input for Bootstrap.

[nilcolor]

@storborg you removed datepicker? Why?

[olvlvl]

DatePickers of the world, could you make the Year an <INPUT[type="text"]> and the Month a <SELECT> ? Because it takes 10 clicks to select my birthday (which is 1977-6-6 BTW). With inputs it would only take 3 clicks and some typing which I'm really good at.

@airtonix I really like that one !

[kirkegaard]

Second what @olvlvl said about dropdown :) Maybe use the same flag that jquery ui uses for the datepicker

[tuler]

In my opinion date pickers are horrible for birth dates. I would use three selects, day, month and year.

[olvlvl]

@tuler You prefer using three selects instead of a date picker for birth dates because most date pickers are not well designed and are cumbersome to use when you need to pick a date that is not near the current date.

The problem with using a select to choose the year is that the choices are limited. 1789 was the year of the French revolution. 2263 is the year at which Korben Dallas wakes up in "The Fifth Element". How many clicks to enter these dates ? :)

[airtonix]

@olvlvl yeah although it looks nice... i'm not so sure about the code within. For some reason I'd like something that uses moments.js. I'm also looking into expanding that to support time selection too.

[eternicode]

The datepicker that @airtonix linked is pretty decent, and the one I'm currently using. Access to the higher-level views could be more intuitive (click the header in Date view to get to Month view, again to get to Year view), and it doesn't support range dates, but overall it's good stuff.

I've made myriad improvements, available at https://github.com/eternicode/bootstrap-datepicker (a mirror of my bitbucket repo, to explain the strange code blocks).

@olvivi It may just be me, but it seems like a timepicker would work better as a separate widget, rather than folded into any one datepicker.

[realityking]

I didn#t read the whole thing, but if a calendar widget is added I hope it's structured according to the WAI-ARIA guidelines (which recommend tables BTW), I couldn't find the link quickly but they are pretty percise guidelines.

[sstok]

Currently I'm using this one http://www.ama3.com/anytime/ Which works really well, only one problem: It does not allow commercial usage.

Edit: My other comment about needing to set the time with the date is no longer valid (setting time separately will also work).