Javascript 日历未显示在 Bootstrap 日期时间选择器中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31601942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calendar not showing up in Bootstrap datetimepicker
提问by ATP
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/
添加提琴手：http: //jsfiddle.net/1c1nr9sp/4/
回答by Vimalan Jaya Ganesh
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/
请参阅文档：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>回答by JaymesG
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.
我的项目为我处理这个。ASP.net/MVC 我还将 col-sm-6 更改为 col-sm-12。
回答by Fab
Similar problem but different solution
类似的问题但不同的解决方案
It's specific to ASP.NET Core projects. In default visual studio template, all input tags are set with a max width of 280px like this:
它特定于 ASP.NET Core 项目。在默认的 Visual Studio 模板中，所有输入标签的最大宽度设置为 280px，如下所示：
file:site.css
文件：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 fits in the right place :)
只需删除它，日历图标就会放在正确的位置:)
回答by mrrrk
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.
我在使用jQuery 3.x 时遇到问题。（最新版本的 Bootstrap 3 支持 jQuery 3）。下拉菜单会部分呈现，但没有日历。时间选择器部分工作正常。
Downgrading to jQuery 2.xfixed the problem.
降级到jQuery 2.x解决了这个问题。
回答by Swaps
You might also want to check what icon-set are you using.
There are multiple font icon sets like Font Awesome, Material Design, Bootstrap glyphicons, etc.
您可能还想检查您使用的是什么图标集。有多种字体图标集一样Font Awesome，Material Design，Bootstrap glyphicons，等。
By default DateTimePickeruses Bootstrap glyphiconsbut you can specify your custom icons for all other things.
默认情况下DateTimePicker使用，Bootstrap glyphicons但您可以为所有其他内容指定自定义图标。
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
参考- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons
