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>
Check out Jquery Bootstrap:
http://jslegers.github.com/jquery-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:
Much confusion stems from the existence of at least three major libraries named bootstrap-datepicker:
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
Put an
input
element on your page somewhere, e.g.With jQuery, select your input and call the
.datepicker()
method:Load your page and click on or tab into your
input
element. A datepicker will appear: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.