[英]Bootstrap Datetimepicker not working MVC 4
在過去的幾天里,我一直在嘗試使用此datetimepicker ,無論我盡力而為,日歷都會顯示在左上角。 我找不到任何有關如何實現控件的真正教程,該站點上的過去答案也沒有幫助。
這是我現在所擁有的:
視圖
@Scripts.Render("~/Scripts/knockout-3.4.0.js")
@Scripts.Render("~/Scripts/jquery-1.10.2.js")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<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>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
關於解決日歷glyphicon與輸入隔開的第二個問題,您需要執行以下任一操作(您的偏好設置):
<div class="row">
<div class='col-sm-6' /*change this to col-sm-3 or any that is below 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 class="row">
<div style="width: 25%;/*or something close to that*/" 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>
也只是挑剔的事情..嘗試使您的Scripts
和Styles
保持在一起,而不要相互混在一起..以便於閱讀。
js腳本“ bootstrap-datetimepicker”需要首先加載Moment.js和Jquery.js。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/moment.js",
"~/Scripts/moment.min.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/bootstrap-datetimepicker.js"));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.