我的模型中的日期时间选择器不起作用

时间:2015-09-30 13:42:05

标签: asp.net-mvc-5

日期时间选择器没有显示在视图中供我选择ReturnDate的日期。它不会给我一个小箭头从日历(日期时间选择器)中选择并且它已经填充了值。它只显示一个文本框,其中包含:'0001/01/01 12:00:00 AM'

在我的模型中,这是我的Returnndate字段:

[DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime? ReturnedDate { get; set; }

我的观点是:

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

使用jquery ui这是我的新观点:

@model FCproject.Models.Purchase

@{
    ViewBag.Title = "Create";
}

<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

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


        <h4>Purchase</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.ReturnedDate, new { @class = "control-label col-md-2", @id = "datepicker" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ReturnedDate)
                @Html.ValidationMessageFor(model => model.ReturnedDate)
            </div>
        </div>

        <script>
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>

}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

但它仍然显示没有日期时间选择器的文本框。

1 个答案:

答案 0 :(得分:1)

如果你在IE上运行该功能不起作用,那么chrome在ui上效果最好。

但如果仍然给你问题,我建议你使用jquery datepicker:

您的观点(已修改):

    <div class="form-group">
                @Html.LabelFor(model => model.ReturnedDate, new { @class ="control-label col-md-2", @id = "datepicker" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.ReturnedDate)
                    @Html.ValidationMessageFor(model => model.ReturnedDate)
                </div>
            </div>

   <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
    </script>

或访问

http://api.jqueryui.com/datepicker/

别忘了引用你的ui脚本,例如:(取决于你的脚本版本)

<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>