开发MVC应用程序并在Razor中导入了这些脚本:
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/_bootstrap-datetimepicker.less")">
<script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="@Url.Content("~/Scripts/popper.min.js")"></script>
<script src="@Url.Content("~/Scripts/moment-with-locales.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap-datetimepicker.min.js")"></script>
我像这样设置datetimepicker:
$('#datetimepicker').datetimepicker({
locale: 'cs',
format: 'DD.MM.YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
minDate: today,
stepping: 1,
showTodayButton: true,
allowInputToggle: true
});
$('.timepicker').datetimepicker({
locale: 'cs',
format: 'HH:mm',
dayViewHeaderFormat: 'MMMM YYYY',
stepping: 5,
allowInputToggle: true
});
我的datetimepicker和timepicker正在显示控件的箭头按钮,如图所示:
两者都有这些控制元素,但没有图标,我找不到原因。
答案 0 :(得分:2)
所以问题在于通过Nuget包导入MVC引导程序。加载bootstrap glyphicons文件有问题..
所以你需要从bootstrapcdn导入它,如下所示:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
或者只是从项目中下载并加载它。
答案 1 :(得分:1)
在bootstrap 4中,我用字体图标替换了这些图标以使其起作用:
$(".timepicker").datetimepicker({
icons:
{
up: 'fa fa-angle-up',
down: 'fa fa-angle-down'
},
format: 'LT'
});
答案 2 :(得分:1)
Bootstrap不支持glyphicons。 您需要为其提供一个单独的图标库。
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
useCurrent: false,
showTodayButton: true,
showClear: true,
toolbarPlacement: 'bottom',
sideBySide: true,
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: "fa fa-chevron-left",
next: "fa fa-chevron-right",
today: "fa fa-clock-o",
clear: "fa fa-trash-o"
}
});