如何使用Razor引擎在MVC 5项目上添加Date Picker Bootstrap 3？

Question

我需要一些关于如何使用Razor引擎在MVC 5项目上安装Date Picker Bootstrap 3的指导方针.我在这里找到了这个链接但是无法在VS2013中使用它.

从上面后面的链接中的示例复制,我已经完成了以下操作:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

然后我将脚本添加到索引视图中,如下所示

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

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

现在,如何在这里调用日期选择器？

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Answer 1

这个答案使用jQuery UI Datepicker,它是一个单独的包含.如果不包含jQuery UI,还有其他方法可以做到这一点.

首先,datepicker除了以下内容之外,您只需将类添加到文本框中form-control:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

然后,为了确保在呈现文本框之后触发javascript,您必须将datepicker调用放在jQuery ready函数中:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

Answer 2

此答案只是将type=date属性应用于HTML input元素,并依赖浏览器提供日期选择器.请注意,即使在2017年,并非所有浏览器都提供自己的日期选择器,因此您可能希望提供退款.

您所要做的就是在视图模型中向属性添加属性.变量示例Ldate:

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

假设您正在使用MVC 5和Visual Studio 2013.

Answer 3

我希望这可以帮助那些面临同样问题的人.

这个答案使用Bootstrap DatePicker插件,它不是bootstrap本机的.

确保通过NuGet安装Bootstrap DatePicker

创建一小段JavaScript并将其命名为DatePickerReady.js将其保存在Scripts目录中.这将确保它甚至可以在非HTML5浏览器中运行,尽管现在这些浏览器很少.

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

设置捆绑包

bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

现在设置数据类型,以便在使用EditorFor时,MVC将识别要使用的内容.

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

您的视图代码应该是

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

瞧

Answer 4

在模型中的datetime属性之前添加这两行

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

结果将是:

Answer 5

尝试根据Enzero的答案提供简明的更新。

• 安装Bootstrap.Datepicker软件包。

  PM> install-package Bootstrap.Datepicker
  ...
  Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...
  

• 在AppStart / BundleConfig.cs中，将相关的脚本和样式添加到包中。

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        //...,
        "~/Scripts/bootstrap-datepicker.js",
        "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));
  
  bundles.Add(new StyleBundle("~/Content/css").Include(
        ...,
        "~/Content/bootstrap-datepicker3.css"));
  

• 在相关视图中的脚本部分中，启用和自定义日期选择器。

  @section scripts{
      <script type="text/javascript">
          //...
          $('.datepicker').datepicker({
              format: 'dd/mm/yyyy', //choose the date format you prefer
              language: "YOUR-LOCALE-CODE-HERE",
              orientation: 'left bottom'
          });
      </script>
  

• 最终在相关控件中添加datepicker类。例如，在TextBox中，对于“ 31/12/2018”之类的日期格式，这将是：

  @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })