ASP.Net MVC 5中的Bootstrap DateTimePicker

Question

我在ASP.Net中有一个带有MVC 5的Bootstrap模式,我用它来编辑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>
}

出于某种原因,有两件事情发生,我无法弄清楚为什么.

首先,glyphicon-calendar它不在输入旁边:

其次,当模态窗体加载时,除了日期时间字段之外的所有其他字段都会填充数据,直到我单击日历字形,然后日期时间字段将填充当前日期和时间.模型中的值永远不会显示.

Web界面不是我的强项,我将不胜感激.

Answer 1

当您创建一个新的MVC项目时,它带有一个默认的css文件(Site.css),其中包含一些预定义的CSS样式.默认情况下,它将输入字段max-width定义为280px.这就是原因,您的输入组未按预期工作.

如果你删除/调整你的css类~/Content/Site.css,你的css问题将得到解决.

Answer 2

事实证明，我需要为 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>