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不会坐在输入框旁边： 其次，当模态表单加载时，除了日期时间字段之外的所有其他字段都会填充数据，直到我点击日历glyphicon，然后日期时间字段才会填充当前日期和时间。模型中的值从未显示过。

网络界面不是我的强项，我将感激任何帮助。

- pjdupreez

Answer 1

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

如果您在~/Content/Site.css中删除/调整此CSS类，则您的CSS问题将得到解决。

- Shyju

---

不错！我会试着调整一下。我已经注释掉了max-width属性，glyphicon现在在输入框旁边，尽管它们现在占据了整个行。我会继续调整的。 - pjdupreez

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>

- pjdupreez

Answer 3

你是否尝试设置一个属性：

[DataType(DataType.DateTime)]

public DateTime EntryDateTime {get; set;}

如何在JS脚本中添加注释？

示例

- MarwaAhmad

---

谢谢分享链接，有点赞。我必须在我的模型中添加[DisplayFormat]属性。 - pjdupreez

好的，现在它又出了问题。你有什么其他尝试的想法吗？这种情况只会在输入框激活日期选择器时发生。 - pjdupreez

有没有浏览器错误？按F12键查看。 - MarwaAhmad

不记得了，但是已经解决了，谢谢。唯一的烦恼是注释掉输入框的 CSS 最大宽度会导致输入框变成 100%（显然），并且日历图标就在旁边。只要我为输入框设置大小，图标和输入框之间就有一个空格。 - pjdupreez

Answer 4

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

- Shirley Barker

---

在我摸索和搜索了相当长一段时间之后，这对我非常有效。 - Shirley Barker

Answer 5

另一个快速解决方案是在JavaScript中也以这种方式格式化日期：

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

使用[DisplayFormat]作为属性的解决方案同样有效，甚至更好。

- Andy A.

---

是的，那不是一个坏选择。最近，我一直在使用'.ToShortDateFormat()'。让服务器来处理它。 - pjdupreez