Calendar/Date Input - Refs #445. #614

Closed
wants to merge 14 commits into
from

Conversation

Projects
None yet
@storborg

This is a js date entry widget built expressly for bootstrap. It's fairly thin, at 2.1K min/gz, but still somewhat extensible. It supports keyboard navigation, reverts to iOS native date entry, and a few other little features. It's pretty thoroughly tested in all the browsers that Bootstrap lists support for, although the visual design could probably be improved.

Demo here:
http://dl.dropbox.com/u/143355/datepicker/datepicker.html

@kasperp

This comment has been minimized.

Show comment
Hide comment
@kasperp

kasperp Nov 12, 2011

Contributor

Nice one, I like it

Contributor

kasperp commented Nov 12, 2011

Nice one, I like it

@orefalo

This comment has been minimized.

Show comment
Hide comment

orefalo commented Nov 12, 2011

+1

@juarezpaf

This comment has been minimized.

Show comment
Hide comment

+1

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat Nov 12, 2011

Member

Great work! I'll keep this in mind when we start working our datepicker for 2.0. In the meantime you should release this as a plugin and I'll add it to our wiki!

Member

fat commented Nov 12, 2011

Great work! I'll keep this in mind when we start working our datepicker for 2.0. In the meantime you should release this as a plugin and I'll add it to our wiki!

@fat fat closed this Nov 12, 2011

@storborg

This comment has been minimized.

Show comment
Hide comment
@storborg

storborg Nov 12, 2011

Ah ok, so I should re-submit this as a patch against 2.0-wip?

Ah ok, so I should re-submit this as a patch against 2.0-wip?

@fleeting

This comment has been minimized.

Show comment
Hide comment
@fleeting

fleeting Nov 23, 2011

I ran into an issue using the datepicker inside a modal box. Since it is inside the modal which is position: fixed; the position: absolute; of the datepicker causes the top/left to be from the modal box instead of the viewport. I'm not actually sure of a fix for this.

I ran into an issue using the datepicker inside a modal box. Since it is inside the modal which is position: fixed; the position: absolute; of the datepicker causes the top/left to be from the modal box instead of the viewport. I'm not actually sure of a fix for this.

@LukasHurych

This comment has been minimized.

Show comment
Hide comment
@LukasHurych

LukasHurych Nov 23, 2011

Hi, inside a modal box a quick fix is to comment out the positioning on line 208 and add show method. Dirty, but temporarily worked.

    var offset = this.$el.offset();

    /*this.$picker.css({
      top: offset.top + this.$el.outerHeight() + 2,
      left: offset.left
    }).

    this.$picker.show();

Hi, inside a modal box a quick fix is to comment out the positioning on line 208 and add show method. Dirty, but temporarily worked.

    var offset = this.$el.offset();

    /*this.$picker.css({
      top: offset.top + this.$el.outerHeight() + 2,
      left: offset.left
    }).

    this.$picker.show();
@rgp

This comment has been minimized.

Show comment
Hide comment
@rgp

rgp Dec 24, 2011

Very nice.... it would be nice to add the time to it as well ... but it is very nice the way it is ;)

rgp commented Dec 24, 2011

Very nice.... it would be nice to add the time to it as well ... but it is very nice the way it is ;)

@dilas

This comment has been minimized.

Show comment
Hide comment
@dilas

dilas Jan 19, 2012

Cool man, keep it up ! The missing twitter bootstrap widget :)

dilas commented Jan 19, 2012

Cool man, keep it up ! The missing twitter bootstrap widget :)

@tiagowhite

This comment has been minimized.

Show comment
Hide comment
@tiagowhite

tiagowhite Feb 5, 2012

Sweet! had managed to mix your datepicker with formtastic-bootstrap.

Sweet! had managed to mix your datepicker with formtastic-bootstrap.

@tomthetree

This comment has been minimized.

Show comment
Hide comment
@tomthetree

tomthetree Mar 9, 2012

Nice work!

One issue: as .offset() returns position relative to the doc, and the datepicker is inserted directly after the input, the positioning didn't work correctly for me. My wrapping

was relatively positioned meaning the datepicker was positioned relative to it, and not the document (where the offset came from).

Easy fix was to change where the datepicker is inserted to just before the closing body tag on line 95:

      .appendTo($('body'));

Thanks again for your work :)

Nice work!

One issue: as .offset() returns position relative to the doc, and the datepicker is inserted directly after the input, the positioning didn't work correctly for me. My wrapping

was relatively positioned meaning the datepicker was positioned relative to it, and not the document (where the offset came from).

Easy fix was to change where the datepicker is inserted to just before the closing body tag on line 95:

      .appendTo($('body'));

Thanks again for your work :)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Mar 11, 2012

excellent stuff. Works great with simple_form using haml as so:
= f.input :startdate, :as=>"string", :input_html => {"data-datepicker" => "datepicker", :class =>"small"}

When i tried to use it in one of my additional sections created via js though, it wouldn't work.

I tried modifying the jquery call as follows:
replace the following --> $(selector).datepicker();
with -->
$(selector).live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});

that allowed it to work, but it looks ugly in the js created section and it makes it so I have to click on it twice in my main section to get it to work instead of just tabbing into or cursoring over it once as before. Any idea what I can do to get it to work on fields added via js and still work as pretty and fancy as the original?

ghost commented Mar 11, 2012

excellent stuff. Works great with simple_form using haml as so:
= f.input :startdate, :as=>"string", :input_html => {"data-datepicker" => "datepicker", :class =>"small"}

When i tried to use it in one of my additional sections created via js though, it wouldn't work.

I tried modifying the jquery call as follows:
replace the following --> $(selector).datepicker();
with -->
$(selector).live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});

that allowed it to work, but it looks ugly in the js created section and it makes it so I have to click on it twice in my main section to get it to work instead of just tabbing into or cursoring over it once as before. Any idea what I can do to get it to work on fields added via js and still work as pretty and fancy as the original?

@panahi panahi referenced this pull request Mar 13, 2012

Closed

Minor typo #2568

adamjgrant pushed a commit to adamjgrant/kickstart that referenced this pull request Mar 22, 2012

@1dolinski

This comment has been minimized.

Show comment
Hide comment
@1dolinski

1dolinski Apr 23, 2012

how do you install this? I'm looking to install it with simple form... I read above that someone had success installing it with formtastic.. has anyone else been able to do this?

how do you install this? I'm looking to install it with simple form... I read above that someone had success installing it with formtastic.. has anyone else been able to do this?

@tiagowhite

This comment has been minimized.

Show comment
Hide comment
@tiagowhite

tiagowhite Apr 23, 2012

Inside assets/javascript put the bootstrap-datepicker.js, i have a main.js with others scripts, put this git://gist.github.com/2468395.git on yours.
and on your view: <%= f.input :birth_date, :as => :string, :input_html => { :data => 'datepicker' }, :order => [:day, :month, :year], :use_month_numbers => true%>

I'm using simple_form, and no bootstrap gems

Inside assets/javascript put the bootstrap-datepicker.js, i have a main.js with others scripts, put this git://gist.github.com/2468395.git on yours.
and on your view: <%= f.input :birth_date, :as => :string, :input_html => { :data => 'datepicker' }, :order => [:day, :month, :year], :use_month_numbers => true%>

I'm using simple_form, and no bootstrap gems

daveobriencouk pushed a commit to egocreative/bootstrap that referenced this pull request Nov 18, 2012

tiagowhite added a commit to tiagowhite/crmass that referenced this pull request Feb 14, 2014

@twbs twbs locked and limited conversation to collaborators Jul 28, 2014

DocX pushed a commit to DocX/bootstrap that referenced this pull request Sep 16, 2014

Merge pull request #614 from gpakosz/patch-1
Removed @import "bootstrap/variables";
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.