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.

[ahmontero]

I have done this Calendar plugin compatible with Bootstrap based on: http://www.calendarandti.me. Maybe it is very basic, but I am using it on a project, and for me it is enough.

My intention is not to spam or create hype, just show you another option.

[olvlvl]

That's nice but that's not very usable. How many clicks do you need to set your birthday ? :)

[pokonski]

@olvlvl, I don't think @ahmontero 's approach is for forms and selecting dates. Just displaying.

[ahmontero]

@olvlvl Maybe too much! But as @pokonski says, it was designed just for displaying data

[olvlvl]

@pokonski and it's a nice display ! I hope I wasn't rude.

[pokonski]

No doubt :) I also created a display calendar, just smaller ;]

[ahmontero]

No problem! :D

[dpolkinhorn]

@eternicode Using yours, and it works great! Thanks!

[sstok]

The one from @eternicode looks great and supports formatting in various formats (including month names), but does not support keyboard navigation like the one from @storborg.

Combining the looks and functionality of @eternicode with the keybord navigation of @storborg would really make it look great and easy to use.

Time selection is not really a problem as this is basically always the same format (mm:hh:ss), only when using ranges and maximum/minimum in combination with a date the validation can be tricky. But not as hard as dates.

For the moment adding only a date picker and separate time selector would be great, and letter the final validation (maximum/minimum with date be handled by an own function (as is done when using ranges)).

In the future its always possible to combine the both of them, but at least we have one for the moment.

[eternicode]

@sstock I've added some initial keyboard nav, I'd appreciate any feedback on it.

[sstok]

Great job :+1:

[Anahkiasen]

Really like the Colorpicker and Datepicker from @eternicode, you should make a pull request.

[eternicode]

@Anahkiasen they're not actually mine -- they're by Stefan Petre of eyecon.ro. He doesn't have the code hosted anywhere but as a zipfile on his site, but I needed a datepicker and his was the nicest one I'd seen, so I manually forked it and made some necessary improvements.

At any rate, I'd need to write some tests for it, and I'd like to get Stefan's approval (not that I imagine he'd refuse it being included in bootstrap ;) ) before submitting a pull request. I'd also like to make sure it's structured to WAI-ARIA like @realityking mentioned, but I currently have little knowledge in that area.

Until then, though, people can simply clone it from its own repo ;D

[sannefoltz]

+1 I would love a Date input for Bootstrap.

[add1ct3dd]

+1 this needs to be done :)

I also think @eternicode should pull req this into the main project!

[barryvdh]

I think a datepicker in bootstrap should only use valid (and all of the) html5 input attributes, for compatability with different plugins/frameworks; http://www.w3schools.com/html5/tag_input.asp

I personally like the approach of enabling a datepicker fallback when the browser doesn't support html5 date input, (with the possibility to always override the style) http://afarkas.github.com/webshim/demos/demos/webforms.html

Or just using the html5 standards, with the possibility to override the default handling of date inputs by including the plugin, without calling $(element).datepicker({options});

[eternicode]

W3schools is considered harmful. Instead, please link to the w3c's actual working drafts for inputs (in this specific case, the date input)

@Barryvdh could you clarify what you mean by "only use valid html5 input attributes"? If you mean that it should support the w3c attributes (min, max, etc) instead of custom data-attributes, the main problem I see with that is that the spec specifies that any date values be in RFC3339 format, with the small difference that years may be 4+ digits. This would lock users into the yyyy-mm-dd format. I think, though, that supporting the native attributes and allowing overrides with data-attributes might be a good idea, but then the user would potentially be stuck outputting dates in two formats -- annoying, but sufferable.

Shims are great, but if they only emulate modern browsers' behavior, I imagine that would also take a lot of choice away. I haven't played with the date input itself yet, though, so I don't know for sure.

AIUI, the auto-handling is what the philosophy behind bootstrap's "data-api" is all about -- the ability to use plugin X without writing a single line of javascript. IMO, it doesn't work well in all places (tabs, for example), but I think a datepicker would be an excellent use-case.

[barryvdh]

The shims are just an example, but ideally you could use the html5 format to create your form, and if you want extra customization (bootstrap style instead of standard browser style), load the plugin to override the behaviour, without calling some javascript functions.

On Mon, Mar 26, 2012 at 17:35, Andrew Rowls < reply@reply.github.com

wrote:

W3schools is considered harmful. Instead, please link to the w3c's actual working drafts for inputs (in this specific case, the date input)

@Barryvdh could you clarify what you mean by "only use valid html5 input attributes"? If you mean that it should support the w3c attributes (min, max, etc) instead of custom data-attributes, the main problem I see with that is that the spec specifies that any date values be in RFC3339 format, with the small difference that years may be 4+ digits. This would lock users into the yyyy-mm-dd format. I think, though, that supporting the native attributes and allowing overrides with data-attributes might be a good idea, but then the user would potentially be stuck outputting dates in two formats -- annoying, but sufferable.

Shims are great, but if they only emulate modern browsers' behavior, I imagine that would also take a lot of choice away. I haven't played with the date input itself yet, though, so I don't know for sure.

AIUI, the auto-handling is what the philosophy behind bootstrap's "data-api" is all about -- the ability to use plugin X without writing a single line of javascript. IMO, it doesn't work well in all places (tabs, for example), but I think a datepicker would be an excellent use-case.

---

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

[matreyes]

I'm using the @eternicode version of bootstrap-datepicker. It is amazing! Thanks!

[Garito]

+1 for @eternicode version (using it since some weeks ago)

My first desired enhancement will be date ranges without doubt

So desirable for me that I will sugest your to begin a discussion about the desirable markup for a data range given the 2.0.2 code

I mean given this code:

<div class="control-group"> <label>Date range</label> <div class="controls"> <div class="input-append"> <label class="control-label" for="dateRangeStart">From</label> <input type="date" name="dateRangeStart> <label class="control-label" for="dateRangeStop">to</label> <input type="date" name="dateRangeStart"> </div> </div> </div>

Let's make the simplest and the most complex markup? Complete it, change it what ever you want: it's a discussion!

[Garito]

Is someone interested on define the data range markup?

I propose that in the incorrect place?

[Garito]

Done! I move the discussion to: https://github.com/eternicode/bootstrap-datepicker/issues/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/

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

---

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

---

[cvrebert]

Folks, the de facto recommended widget for this is:

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