[英]MVC5 Bootstrap Datetimepicker CSS not formatting correctly
I'm currently working on adding a datetimepicker to my MVC5 project. 我目前正在为我的MVC5项目添加datetimepicker。 I've decided to use Bootstrap.v3.datetimepicker by Eonasdan.
我决定使用Eonasdan的Bootstrap.v3.datetimepicker。 Now, I have it working to an extent, but, the formatting is not correct.
现在,我可以在某种程度上使用它了,但是格式不正确。 The current day is not selected, the month / year aren't aligned centrally and the time icon also isn't aligned centrally.
未选择当前日期,月/年未居中对齐,时间图标也未居中对齐。 Also, when trying to change the month/year, the months/years all display on one line.
另外,当尝试更改月份/年份时,月份/年份全部显示在一行上。
It must be CSS related, but, I've no idea how to resolve it. 它必须与CSS相关,但是,我不知道如何解决它。 Has anyone had the same problem and resolved this?
有人遇到过同样的问题并解决了吗?
bundleconfig.cs bundleconfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/datetime").Include(
"~/Scripts/moment*",
"~/Scripts/bootstrap-datetimepicker*"));
// // Use the development version of Modernizr to develop with and learn from. Then, when you're
// // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
// bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
// "~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui")
.Include("~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/jqueryui")
.Include("~/Content/themes/base/all.css"));
}
_Layout.cshtml _Layout.cshtml
...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datetime")
@RenderSection("scripts", required: false)
</body>
</html>
Create.cshtml - control Create.cshtml-控件
<div class="form-group">
@Html.LabelFor(model => model.Check_Date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Check_Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Check_Date, "", new { @class = "text-danger" })
</div>
</div>
Create.cshtml - scripts Create.cshtml-脚本
@section scripts {
<script type="text/javascript">
$(function () {
$('#Check_Date').datetimepicker({
defaultDate: '@DateTime.Now',
locale: 'en',
widgetPositioning: {
vertical: 'bottom',
horizontal: 'left'
}
});
});
</script>
}
You might have missed bootstrap-datetimepicker.css
. 您可能错过了
bootstrap-datetimepicker.css
。
Refer to the below link: Follow the GitHub Link- By Eonasdan 请参考以下链接: 按照GitHub链接-作者: Eonasdan
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.