Twitter Bootstrap date picker

Twitter BootstrapDatepickerBootstrap Datepicker

Twitter Bootstrap Problem Overview

How can I use the Twitter Bootstrap date picker? I used the code below but its not working.

<html>
	<head>
	<title>DatePicker Demo</title>
	<script src="js/jquery-1.7.1.js"></script>
	<link href="css/datepicker.less" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="js/bootstrap-datepicker.js"></script>
	
	</script>
	</head>
	<body>
	<form >
		<div class="input">
			<input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
		</div>
	</form>
		
	</body>
</html>

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

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

<input class="datepicker">

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/

Solution 2 - Twitter Bootstrap

Much confusion stems from the existence of at least three major libraries named bootstrap-datepicker:

  1. A popular fork of eyecon's datepicker by Andrew 'eternicode' Rowls (use this one!):
  1. The original version by Stefan 'eyecon' Petre, still available at http://www.eyecon.ro/bootstrap-datepicker/
  2. 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

  1. Include the following libraries (minimum versions noted here) on your page:

  1. Put an input element on your page somewhere, e.g.

     <input id="my-date-input">

  2. With jQuery, select your input and call the .datepicker() method:

     jQuery('#my-date-input').datepicker();

  3. Load your page and click on or tab into your input element. A datepicker will appear:

Picture of a datepicker

Solution 3 - Twitter Bootstrap

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 )

Solution 4 - Twitter Bootstrap

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:

        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

Solution 5 - Twitter Bootstrap

Check out Jquery Bootstrap:

http://jslegers.github.com/jquery-bootstrap/

Solution 6 - Twitter Bootstrap

add

z-index:1151;

to the style sheet in

.datepicker

Solution 7 - Twitter Bootstrap

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.

Solution 8 - Twitter Bootstrap

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.

Solution 9 - Twitter Bootstrap

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.

Solution 10 - Twitter Bootstrap

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:

<html>
    <head>
    <title>DatePicker Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <form>
            <div class="input">
                <input data-provide="datepicker" class="small" type="text" value="01/05/2011">
            </div>
        </form>
    </body>
</html>
Categories
Recommended Twitter Bootstrap Solutions
Recommended Datepicker Solutions
Recommended Bootstrap Datepicker Solutions

Previous Solution:

Is it possible to create a temporary table in a View and drop it after select?

Sql ServerTsql

Next Solution:

ClassCastException when calling ListView.addHeaderView()?

AndroidAndroid Listview

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSangram AnandView Question on Stackoverflow
Solution 1 - Twitter BootstrapJosh StuartView Answer on Stackoverflow
Solution 2 - Twitter BootstrapMark AmeryView Answer on Stackoverflow
Solution 3 - Twitter BootstrapMichaelView Answer on Stackoverflow
Solution 4 - Twitter BootstrapAndrewView Answer on Stackoverflow
Solution 5 - Twitter BootstrapAndrewView Answer on Stackoverflow
Solution 6 - Twitter BootstrapSujay sreedharView Answer on Stackoverflow
Solution 7 - Twitter BootstrapShehab FawzyView Answer on Stackoverflow
Solution 8 - Twitter BootstrapTanmayView Answer on Stackoverflow
Solution 9 - Twitter BootstrapCloud9999StrifeView Answer on Stackoverflow
Solution 10 - Twitter BootstrapQuan DoView Answer on Stackoverflow