C# ASP.NETMVC5中的引导日期时间选择器

我在ASP.Net和MVC5中有一个引导模式，我用它编辑FullCalendar javascript插件上的条目

_Edit.cshtml：

@model Models.CalendarEntry

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Edit Calendar Entry</h4>
</div>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="modal-body">

        <div class="form-horizontal">
            <h4>@Model.Title</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.CalendarEntryId)
            @Html.HiddenFor(model => model.PostId)

            <div class="form-group">
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.EntryDateTime, htmlAttributes: new {  @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="input-group" id="datetimepicker">
                        @Html.EditorFor(model => model.EntryDateTime, new { htmlAttributes = new { @class = "form-control" } })
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                    @Html.ValidationMessageFor(model => model.EntryDateTime, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Length, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.EntryStatus, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.EntryStatus, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.EntryStatus, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" type="button">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
    </div>

    <script>
        $(document).ready(function ()
        {
            $("#datetimepicker").datetimepicker();
        });
    </script>
}

@model Models.CalendarEntry
&时代；
编辑日历条目
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@模型名称

@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@Html.HiddenFor（model=>model.CalendarEntryId）
@Html.HiddenFor（model=>model.PostId）
@LabelFor（model=>model.Title，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Title，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Title，“，new{@class=“text danger”}）
@LabelFor（model=>model.EntryDateTime，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.EntryDateTime，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.EntryDateTime，“，new{@class=“text danger”}）
@LabelFor（model=>model.Length，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Length，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Length，“，new{@class=“text danger”}）
@LabelFor（model=>model.EntryStatus，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EnumDropDownListFor（model=>model.EntryStatus，htmlAttributes:new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.EntryStatus，“，new{@class=“text danger”}）
取消
$（文档）.ready（函数（）
{
$（“#datetimepicker”）.datetimepicker（）；
});
}

出于某种原因，有两件事正在发生，我不知道为什么

首先，

glyphicon日历

不位于输入旁边：

其次，当模态表单加载时，除了datetime字段之外的所有其他字段都会填充数据，直到我单击日历图标，datetime字段才会填充当前日期和时间。模型中的值永远不会显示

---

Web界面不是我的堡垒，希望您能给予帮助。

当您创建一个新的MVC项目时，它附带了一个默认的css文件（Site.css），其中包含一些预定义的css样式。默认情况下，它将输入字段的

max width

定义为

280px

。这就是您的输入组无法按预期工作的原因

---

如果您在

~/Content/Site.css

中删除/调整此css类，您的css问题将得到解决。

是否尝试放置一个属性：

[DataType(DataType.DateTime)]

public DateTime EntryDateTime {get; set;}

和评论JS脚本

---

事实证明，我需要为datetimepicker设置选项，更具体地说，是一个默认值，它看起来像：

 <script>
        $(document).ready(function ()
        {
            $("#datetimepicker").datetimepicker(
                {
                    defaultDate: '@Model.EntryDateTime',
                    showTodayButton: true,
                    format: 'YYYY-MM-DD HH:mm',
                    showClose: true,
                    showClear: true,
                    toolbarPlacement: 'top',
                    stepping: 15
                });
        });
    </script>

$（文档）.ready（函数（）
{
$（“#日期时间选择器”）。日期时间选择器(
{
defaultDate:“@Model.EntryDateTime”，
ShowToday按钮：正确，
格式：“YYYY-MM-DD HH:MM”，
showClose：没错，
真的,，
工具栏位置：“顶部”，
步进：15
});
});

另一个快速解决方案是在javascript中设置如下日期格式：

defaultDate: '@Model.EntryDateTime.ToString("yyyy-MM-dd HH:mm")'

使用[DisplayFormat]作为属性的解决方案即使不是更好的解决方案，也同样有效。

    <div class="container">
        <div class="row">
            <div class='col-md-12'>
                <div class="form-group">
                    <span col-sm-6> @Html.Label("Date of Birth", htmlAttributes: new { @class = "control-label col-md-2" })</span>
                    <div class='input-group date col-sm-3' id='datetimepicker1'>

                            @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>

                        @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
    </div>

@Label（“出生日期”，htmlAttributes:new{@class=“control Label col-md-2”}）
@EditorFor（model=>model.DateOfBirth，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.DateOfBirth，“，new{@class=“text danger”}）

不错！我会玩这个。我已经注释掉了max width属性，glyphicon现在位于输入旁边，尽管它们现在占据了整行。我会玩的。谢谢你的链接，有一个向上投票。我不得不将[DisplayFormat]属性添加到我的modelok中，现在由于某种原因它又停止了工作。你知道我还能尝试什么吗？只有当在Inputs上激活日期选择器时，才会发生这种情况。是否存在任何浏览器错误？；F12键来查看它们。不记得了，但它工作正常，谢谢。唯一令人烦恼的是，注释掉输入的css最大宽度会导致输入为100%（显然），并且日历图示符就在它旁边。一旦我为输入设置了一个大小，字形和输入之间就有一个空格。是的，这是一个不错的选择。最近，我一直在使用“.ToSortDateFormat（）”。让服务器来整理它吧。这对我来说非常有效，我花了相当长的时间来摆弄和搜索。