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
[email protected]
wrote:

yep we've talked about adding this :)

Reply to this email directly or view it on GitHub:
#445 (comment)

[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:
#445 (comment)

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

[Garito]

Done! I move the discussion to: uxsolutions/bootstrap-datepicker#16

[Anahkiasen]

Note : Chrome now has a datepicker from version 21 and onwards, joining Opera that had it for a while. I wouldn't be surprised if Firefox added a datepicker in Nightly in a close future, so this might soon be an issue of the past. Not that it's all gone but Chrome and Firefox are respectively a big chunk of the browsers used and they both self-update so.

[eternicode]

@Anahkiasen while it's nice to see browsers implementing native datepickers, they're not a perfect solution. If you read the spec, for example, you'll see that the format is fixed at "yyyy-mm-dd". The inner "shadow DOM" of these widgets is, AIUI, inaccessible to scripts and styles, so you get no events from various interactions and no way to customize the look-n-feel. Among other things.

Also, I wasn't aware the Firefox self-updated o_0 is that a non-Linux feature?

[Anahkiasen]

No I just got ahead of myself, Firefow will update in the background à la Chrome when version 15 reaches stable (stable is currently 13).

[olvlvl]

I started working on a proposal for a calendar, which, lovingly fitted in a popover, can also be used as a datepicker.

I tried to keep things simple. There's only three classes: one to handle months, one to handle calendars and another for date editors. Calendars are automatically accessible to screen reader and keyboard only users, that's very important to me, and a lot of shortcuts are available to browse through dates. Also, editors are available to quickly enter dates using the keyboard.

One can create a calendar as simply as that :

var calendar = Brickrouge.Calendar.from({ date: '2012-07-08' })

I've only spent my weekend on this, so it's still work in progress. It would be nice to have comments to know if I'm going in the right direction.

http://brickrouge.org/features/calendar/

[richardpoole]

@olvlvl That is really nice. Bootstrap nice. My money is on yours becoming the de facto Bootstrap calendar.

[tj]

@olvlvl Y U MAKE HUGE LIB? that is a nice calendar, make it a stand-alone component tho :p it's hard to consume these if you have them shoved in some huge lib

[miki725]

@olvlvl Your implementations looks very good. The only thing I don't really like is when you try to navigate between the years (by clicking on the year). Even though its pretty useful to be able to type things, I think it is more user-friendly when it just shows the months or years in a table format as it is done in http://www.eyecon.ro/bootstrap-datepicker/.

Some comments about this issue in general:

I am looking at some of the implementations and they look great!

However I think if the feature will be added to the core, to only use this custom datepicker for popover as a fallback if the browser does not support a date field, or if it forced to be displayed.

I tried using some of the date-pickers above and I did not particularly like the experience on my Android devices (not sure about iOS), so I think in cases like this to always use the browser built-in date-picker. The following are some of the screenshots to illustrate the point:

https://www.dropbox.com/s/z1yq9gdkx3e559w/2012-07-30%2022.46.50.png
https://www.dropbox.com/s/oxnb13xqu9s3cvn/2012-07-30%2022.49.07.png
https://www.dropbox.com/s/k1y11lxcj7x4ruh/2012-07-30%2023.07.31.png

Regarding forcing though, I think that the build-in date-picker in Chrome looks terrible, so on desktops I think it would make sense to be able to force to use the custom picker.

[olvlvl]

@richardpoole Thank you !

@visionmedia The calendar code is currently standalone, although the required Popover code is shoved in a huge 4ko lib.

http://brickrouge.org/features/calendar/calendar.css
http://brickrouge.org/features/calendar/calendar.js

Once the calendar is finished it will also be available as a standalone project for MooTools Forge.

@miki725 I made this calendar because I wanted to be able to enter the years. I was tired of the 20 clicks required to enter my birthday. You can navigate years easily using keyboard shortcut, this might not be ideal, but one can use data-decrement and data-increment to add years browsing buttons to the layout :

<span data-decrement="year">-y</span>
<span data-decrement="month">-m</span>
<span class="name" data-edit="my">
    <span class="month name"></span>
    <span class="year name"></span>
</span>
<span data-increment="month">+m</span>
<span data-increment="year">+y</span>

Thank you for your comments.

[pushpinderbagga]

This one at http://www.eyecon.ro/bootstrap-datepicker/ works just perfectly. Cheers!

[koenpunt]

@olvlvl When I click on the year and enter 20 for the year, the week numbers doesn't show correctly:
!

But because there will never be anyone selecting a date that long ago (I guess), maybe its better to validate the year on 4 digits?

[olvlvl]

I noticed that too, but that's a JavaScript error. Jump to January 100, you'll see that the week number is correct. Maybe a 2k bug, or a workaround that didn't work ? I could add a Math.round() but that wouldn't be fun :)

[andriijas]

The future promises better datepicking options in the browser. Chrome canary got support for datalists recently.

http://jsfiddle.net/5tvF3/1/

I think bootstrap should just envy css styling of that instead of providing too many js plugins.

[cvrebert]

@andriijas Well, some of us are living in the present, where a modern browser like Firefox hasn't implemented <input type="date"> yet, thus making a JS datepicker very handy...

[andriijas]

@cvrebert very handy indeed, for those needs there already exist good options and bootstrap doesnt need to provide one.

Im just afraid bootstrap will grow to heavy if it add to many official js plugins and the creators will get tired of maintaining it because it grow to big.

What I rather see is maybe some offical plugin channel where people can find and contribute to bootstrap goodies that doesnt need to be in the core.

[DBD80]

@pushpinderbagga Unfortunately not, eg it does not support empty input field.

[tarruda]

Check out this fork. I have enchanced it to support mask on the input (for faster typing) time picking. I also applied some css fixes to the original code for it to work properly on IE7.

Soon I will add documentation but a live demo can be seen here

[mdo]

Given current limitations of our own time, and the available community-made plugins that provide this functionality, we're closing this as something we won't be adding to the core. In the future we may revisit this when the Bootstrap core team is a bit larger. Hope folks can understand, and we do appreciate the community stepping up in the meantime.

<3

[waynebrantley]

Really think this would be an important component to be included in bootstrap. Maybe even just absorb one of the separately maintained ones. Anyway, here is a nice one. https://github.com/eternicode/bootstrap-datepicker

[add1ct3dd]

Any updates to this? the one linked above has far too many bugs, but as above I also think it's an important component.

[davit09]

is possible to make the datepicker with only year and thus can not show me the month and day year alone. help =).

[chrvadala]

+1

[sakulstra]

+1

[rybakit]

+1

[lee36656]

NAVER - http://www.naver.com/

[email protected] 님께 보내신 메일 <Re: [bootstrap] Calendar/Date input (#445)> 이 다음과 같은 이유로 전송 실패했습니다.

---

받는 사람이 회원님의 메일을 수신차단 하였습니다.

---

[cvrebert]

Folks, the de facto recommended widget for this is:

https://github.com/eternicode/bootstrap-datepicker