ASP.Net MVC 5 中的引导 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 不在输入旁边：

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

Web 界面不是我的强项，如果有任何帮助，我将不胜感激。

Answer 1

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

如果您在~/Content/Site.css 中删除/调整此 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>

Answer 3

你会尝试把一个属性：

[DataType(DataType.DateTime)]

public DateTime EntryDateTime {get; set;}

并评论 JS 脚本？

Example

Answer 4

另一个快速的解决方案是在你的 javascript 中像这样格式化日期：

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

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

Answer 5

    <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>