Calendar not showing in Bootstrap datetimepicker
I am using 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 looks like this:
The order of including files:
@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 the calendar icon, nothing happens. What mistake am I making in the implementation?
EDIT:
Added fiddler: http://jsfiddle.net/1c1nr9sp/4/
source to share
The reason for your problem is that you have not placed the referenced scripts in the correct order.
See 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>
source to share
You can also check which icon set you are using. There are several sets of fonts, such as Font Awesome
, Material Design
, Bootstrap glyphicons
, etc.
DateTimePicker
Uses by default Bootstrap glyphicons
, but you can specify your custom icons for everyone else.
icons:{
time: 'glyphicon glyphicon-time',
date: 'glyphicon glyphicon-calendar',
up: 'glyphicon glyphicon-chevron-up',
down: 'glyphicon glyphicon-chevron-down',
previous: 'glyphicon glyphicon-chevron-left',
next: 'glyphicon glyphicon-chevron-right',
today: 'glyphicon glyphicon-screenshot',
clear: 'glyphicon glyphicon-trash',
close: 'glyphicon glyphicon-remove'
}
Ref- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons
source to share
Regarding the confused spacing between the textbox and the calendar icon, I was able to fix it by commenting out the line:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
My project is handling this for me. ASP.net/MVC I also changed col-sm-6 to col-sm-12.
source to share
Similar problem, but different solution
It is specific to ASP.NET Core projects. In the standard Visual Studio template, all input tags are set to a maximum width of 280 pixels as follows:
file: site.css
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
Just remove that and the calendar icon is placed in the right place :)
source to share