Menu
I am trying to use bootstrap-datepicker.
I have included the datepicker.css and bootstrap-datepicker.js like this:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
Then in my div, I did like this:
<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="15-07-2013" readonly>
<label class="add-on"><i class="icon-calendar"></i></label>
</div>
Then at last, I did like this:
<script>
$(function(){
$('#dp2').datepicker();
});
</script>
I can see the date picker, but without the icon.
I wish to have like:
What I did wrong?
Edit
My full code:
<!doctype html>
<html>
<head>
<title>Date</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" href="themes/readable/bootstrap.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="well">
<h4>Date Picker</h4>
<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="15-07-2013">
<label class="add-on"><i class="icon-calendar"></i></label>
</div>
</div>
</div>
<script>
$(function(){
$('#dp1').datepicker();
$('#dp2').datepicker();
});
</script>
</body>
</html>
743
I've put this JSFiddle together which works using the following HTML:
<div class="input-append date" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" id="dp3" size="16" type="text" value="12-02-2012"/>
<span class="add-on"><i class="icon-calendar" id="cal"></i></span>
</div>
And JS:
$( document ).ready(function() {
$('#dp3').datepicker();
});
The difference being that id="dp3" is applied to the input tag and not the containing div. However, it seems that in your case it's related to how and where you're referencing your includes.
The JSfiddle above references the base files directly (from both CDN and author sites), so it's likely related to how you are referencing the location (relative or absolute) of the glyphicons/js/css files.
Without a direct link to your implementation or full code, it's hard to diagnose the problem further than this.
75
It works for me by using this: :)
<div class="input-append date" id="theDate" data-date-format="dd-mm-yyyy">
<form:input path="theDate" class="span2" size="130" readonly="true"/>
<span class="add-on"><i class="icon-th"><img src="${pageContext.request.contextPath}/....../datepicker.png"/></i></span>
</div>
Hope this will help.... :)
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
