So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing. I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: /
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing. I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: http://kenyontechnology./2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
Share Improve this question asked Dec 4, 2013 at 15:43 noobprogrammernoobprogrammer 1,1648 gold badges22 silver badges35 bronze badges 5- I just implemented the fix from kenyontechnology. myself, and it works fine. Are all your included files being found? Are there any console errors? – Blazemonger Commented Dec 4, 2013 at 16:13
-
Perhaps the problem is that you're calling
$('#dp3').datepicker()twice. – Blazemonger Commented Dec 4, 2013 at 16:15 - @Blazemonger I've tried and finally I found the problem. The problem is I've included jquery.js which may be interfere with the jquery-2.0.3.js. After I removed jquery.js, voila it works. Thanks for the help bro – noobprogrammer Commented Dec 4, 2013 at 16:17
- @Blazemonger according to your implementation, is the input text changed when you pick any dates on the datepicker? – noobprogrammer Commented Dec 4, 2013 at 16:29
- Would be a good idea to now answer this question with the answer, or alternatively remove the question since it's now been resolved. – Ciaran Gallagher Commented Dec 4, 2013 at 17:38
1 Answer
Reset to default 3I ran into a similar issue - in my case in the jQuery wiring $('#someid').datepicker() 'someid' was the id of the 'input' and where it should have been of the container div. which means - it worked when you click the input box but not the glyphicon button.
I have a working copy fiddle is here : jsfiddle
The jsfiddle code is here : (Note: the reference to jQuery 2.0.2 and also the external reosurces tab in jsFiddle editor)
http://jsfiddle/Lro8kxjx/6/
<div class="col-xs-6 ">
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
}); });