在MVC中使用BootStrap DateTimepicker

 

在MVC中使用BootStrap DateTimepicker编辑日期字段

1    说明

对原文所有舍弃，所有操作在VS 2015进行，针对MVC5项目。

2    获取文件

在包管理控制台执行:

Install-Package Boostrap.v3.Datetimepicker (为 LESS版)或Install-Package Bootstrap.v3.Datetimepicker.css (为CSS版)。

或使用NuGet图形界面，搜索出自 Eonasdan的 Bootstrap.v3.Datetimepicker并安装。

 

3    设置BundleConfig.cs文件

 

打开 App_Start 目录下的BundleConfig.cs，增加以下代码:

  bundles.Add(new ScriptBundle("~/bundles/datetime").Include("~/Scripts/moment*","~/Scripts/bootstrap-datetimepicker*"));

4    修改布局页

 

打开 _Layout.cshtml.  根据所列修改底部的代码：

  @Scripts.Render("~/bundles/jquery")

  @Scripts.Render("~/bundles/bootstrap")

  @Scripts.Render("~/bundles/datetime")

  @RenderSection("scripts", required: false)

</body>

</html>

 

 

 

 

5    在Razor视图中使用DateTime Picker 

要增加代码到MVC视图，我们必须使用@section Razor指令以封装代码。在视图的底部，增加类似下面列出的代码:

@section scripts {

    <script type="text/javascript">

  $(function () {

    $('#AnnualMeetingDate').datetimepicker({

      defaultDate: '@Model.AnnualMeetingDate',

      format: 'L',

      showClose: true,

      showClear: true,

      toolbarPlacement: 'top'

    });

    $('#AnnualMeetingStartTime').datetimepicker({

      defaultDate: '@Model.AnnualMeetingStartTime',

      format: 'LT',

      showClose: true,

      showClear: true,

      toolbarPlacement: 'top',

      stepping: 15

    });

  });

 

   </script>

 

}

 

 

 

 

  

 

6    修改Html.EditorFor调用

 

我们需要设置文本框的初始值，并确保当执行JavaScript时不会有生硬的改变，我们想要确保被显示出来的值的格式与在DataTime Picker代码中指定的格式相同。增加初始值是容易的。在EditorFor行增加 @Value = Model.DateTimeProperty.CorrectFormat到htmlAttributes代码:

<div class="form-group">

    @Html.LabelFor(model => model.AnnualMeetingDate,

        htmlAttributes: new { @class = "control-label col-md-3" })

    <div class="col-md-8">

        @Html.EditorFor(model => model.AnnualMeetingDate,

           new { htmlAttributes = new {

             @Value = Model.AnnualMeetingDate.ToString("MM/dd/yyyy"),

             @class = "form-control" }, })

           @Html.ValidationMessageFor(model => model.AnnualMeetingDate, "", new { @class = "text-danger" })

  </div>

</div>

 

<div class="form-group">

    @Html.LabelFor(model => model.AnnualMeetingStartTime, htmlAttributes: new { @class = "control-label col-md-3" })

    <div class="col-md-8">

        @Html.EditorFor(model => model.AnnualMeetingStartTime,

      new { htmlAttributes = new {

               @Value = Model.AnnualMeetingStartTime.ToShortTimeString(),

               @class = "form-control" } })

               @Html.ValidationMessageFor(model => model.AnnualMeetingStartTime, "", new { @class = "text-danger" })

  </div>

</div>