Calendar not showing up in Bootstrap datetimepicker
Solution 1
The cause of your issue is, you did not place the reference scripts in correct order.
See the documentation: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/
$('#datetimepicker1').datetimepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Solution 2
I had problems using jQuery 3.x. (latest version of Bootstrap 3 supports jQuery 3). The dropdown would partially render but without the calendar. The time picker portion worked ok.
Downgrading to jQuery 2.x fixed the problem.
Solution 3
As far as the messed up spacing between the textbox and calendar icon, I was able to fix that by commenting out the line:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
My project handles this for me instead. ASP.net/MVC I also changed the col-sm-6 to col-sm-12.
Comments
-
ATP almost 2 years
I am implementing bootstrap datetimepicker with below code:
<div class="container"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <div class="input-group date" id="datetimepicker1"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div>
I have included below scripts and styles:
And my output is looking like below:
Order of including files is:
@Styles.Render("~/Content/css") @Styles.Render("~/Content/Styles/PreLayout.css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/moment") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/Scripts/JavaScripts/PreLayout.js")
When I click on calendar icon nothing happens. What mistake I am making in implementation?
EDIT:
Added fiddler: http://jsfiddle.net/1c1nr9sp/4/
-
ATP over 8 yearsThanks Vimalan. I replaced my bootstrap datetime js and css with that in your answer's link and it worked. Now I can see calendar. But still I find the selector distorted as given in snapshot in my question. Can you please suggest the reason for that too?
-
JGV over 8 years@ATP, I am not able to reproduce the selector distorted issue... one reason could be, the .form-control css could be overridden somewhere in your other css files... It will be helpful if you could update the fiddler which reflects the issue?
-
ATP over 8 yearsEven I can't reproduce that in fiddler. Seems like some local system issue. Thanks for the help. :)
-
CYoung over 6 yearsI also had a problem with the files I'd pulled from bower. Something was silently failing. Replaced my references with what you have and it now works. Thanks.
-
Cristian Porto almost 6 yearsSo there's no hope of making it work with jQuery 3.x? I had to upgrade jQuery for using another library and this happened...
-
jay rangras almost 4 years@mrrrk Please check your css file once. I was facing same issue. For me, it was display: none.