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 。 这就是原因，您的输入组未按预期工作。

如果您在~/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脚本？

例

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>