Twitter Bootstrap date picker

Question

How can I use the Twitter Bootstrap date picker  I used the code below but its not working    lt html gt       lt head gt       lt title gt DatePicker Demo lt  title gt       lt script src  js jquery-1 7 1 js  gt  lt  script gt       lt link href  css datepicker less  rel  stylesheet  type  text css    gt       lt link href  css bootstrap css  rel  stylesheet  type  text css    gt       lt link href  css bootstrap min css  rel  stylesheet  type  text css    gt       lt script src  js bootstrap-datepicker js  gt  lt  script gt        lt  script gt       lt  head gt       lt body gt       lt form  gt           lt div class  input  gt               lt input class  small  type  text  value  01 05 2011  data-datepicker  datepicker  gt           lt  div gt       lt  form gt        lt  body gt   lt  html gt

User · Answer

Some people posted the link to this bootstrap-datepicker.js implementation. I used that one in the following way, it works with Bootstrap 3.

This is the markup I used:

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">                        
    <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
    <span class="input-group-addon add-on">
        <span class="glyphicon glyphicon-calendar"</span>
    </span>
</div>

This is the javascript:

$('.date').datepicker();

I also included the javascript file downloaded from the link above, along with it's css file, and of course, you should remove any bootstrap grid classes like the col-md-3 to suit your needs.

User · Answer

Much confusion stems from the existence of at least three major libraries named bootstrap-datepicker    A popular fork of eyecon s datepicker by Andrew  eternicode  Rowls  use this one      Online demo  plus download link for the latest release version Comprehensive documentation GitHub repo  The original version by Stefan  eyecon  Petre  still available at http   www eyecon ro bootstrap-datepicker  A totally unrelated datepicker widget that  storborg  sought to have merged into bootstrap  It wasn t merged and no proper release version of the widget was ever created    If you re starting a new project - or heck  even if you re taking over an old project using the eyecon version - I recommend that you use eternicode s version  not eyecon s  The original eyecon version is outright inferior in terms of both functionality and documentation  and this is unlikely to change - it has not been updated since March 2013   You can see most of the capabilities of the eternicode datepicker on the demo page which lets you play with the datepicker s configuration and observe the results  For more detail  see the succinct but comprehensive documentation  which you can probably consume in its entirety in under an hour   In case you re impatient  though  here s a very short step-by-step guide to the simplest and most common use case for the datepicker   Quick start guide   Include the following libraries  minimum versions noted here  on your page    jQuery Bootstrap - both the JS and CSS The latest release version of bootstrap-datepicker - both the JS and CSS  Put an input element on your page somewhere  e g    lt input id  my-date-input  gt   With jQuery  select your input and call the  datepicker   method   jQuery   my-date-input   datepicker     Load your page and click on or tab into your input element  A datepicker will appear

User · Answer

You used data-datepicker  datepicker  It must be date-provide  datepicker   Also  you included 2 bootstrap stylesheets bootstrap css and bootstrap min css  I also prefer to use bootstrap-datepicker3 min css than datepicker less  Full Html    lt html gt       lt head gt       lt title gt DatePicker Demo lt  title gt       lt link href  css bootstrap min css  rel  stylesheet  type  text css    gt       lt link rel  stylesheet  href  css bootstrap-datepicker3 min css  gt       lt script src  js jquery-1 7 1 js  gt  lt  script gt       lt script src  js bootstrap-datepicker js  gt  lt  script gt       lt  head gt       lt body gt           lt form gt               lt div class  input  gt                   lt input data-provide  datepicker  class  small  type  text  value  01 05 2011  gt               lt  div gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

I was having the same problem but when I created a test project  to my surprise  datepicker worked perfectly using Bootstrap v2 0 2 and Jquery UI 1 8 11  Here are the scripts i m including            lt link href   Url Content    Content bootstrap css    rel  stylesheet  type  text css    gt   lt link href   Url Content    Content bootstrap-responsive css    rel  stylesheet  type  text css    gt   lt link href   Url Content    Content themes base jquery ui all css    rel  stylesheet  type  text css    gt   lt script src   Url Content    Scripts jquery-1 5 1 min js    type  text javascript  gt  lt  script gt   lt script src   Url Content    Scripts jquery-ui-1 8 11 min js    type  text javascript  gt  lt  script gt

User · Answer

Create a custom theme with themeroller  then on the download page  choose  Advanced Theme Settings   Set the CSS scope to  body   Since the CSS rules you download will be prefixed with the body tag selector  they ll have higher specificity and will override bootstrap rules

User · Answer

Twitter Bootstrap is incompatible with jQuery UI styles at the moment   https   github com twitter bootstrap issues 156  This might help you https   github com sferik rails admin   http   rails-admin-tb herokuapp com admin drafts new

User · Answer

Check out Jquery Bootstrap   http   jslegers github com jquery-bootstrap

User · Answer

add   z-index 1151    to the style sheet in    datepicker

User · Answer

I was also facing the same problem for twitter-bootstrap   As eternicode bootstrap-datepicker is incompatible with jQuery UI   But twitter-bootstrap is working fine for vitalets bootstrap-datepicker even with jQuery UI

User · Answer

The most popular bootstrap date picker is currently  https   github com eternicode bootstrap-datepicker   thanks to  dentarg for digging it up   A simple instantiation only requires   HTML   lt input class  datepicker  gt    Javascript      datepicker   datepicker      See a simple example here https   jsfiddle net k6qsm5no 1  or the full docs here http   bootstrap-datepicker readthedocs org en latest

[twitter-bootstrap] Twitter Bootstrap date picker

Examples related to twitter-bootstrap

Examples related to datepicker

Examples related to bootstrap-datepicker