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

【问题标题】：How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?如何使用 Razor 引擎在 MVC 5 项目中添加 Date Picker Bootstrap 3？
【发布时间】：2014-02-01 23:40:36
【问题描述】：

我需要一些关于如何使用 Razor 引擎在 MVC 5 项目上安装 Date Picker Bootstrap 3 的指南。我找到了这个链接here，但无法让它在 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>

【问题讨论】：

请向我们展示您正在使用但不起作用的 cshtml/Razor 代码。谢谢
感谢您的回复。我已经相应地更新了我的帖子
我会启动 VS 看看能不能搞定！
您是使用 NuGet 添加文件还是手动添加？
waqar ahmed 是迄今为止最简单的解决方案。

标签： asp.net-mvc twitter-bootstrap razor

【解决方案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 就绪函数中：

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

【讨论】：

是的，这正是我现在拥有我的代码的方式，但它不工作
这就是我使用Foundation的原因！我和你做的一样，我试过'@class= "form-control datepicker"' & '@class= "datepicker form-control"' 没有骰子
如果你在局部视图中调用它，脚本必须在索引页面中，否则如果它是局部视图，它将无法工作。这也是解决的问题之一
我可以自动化 Razor，以便如果在字段上定义了 [DataType(DataType.Date)]，它应该自动添加 datepicker css 类并运行 js？
我在 Visual Studio 2015 中拥有的 MVC 5 模板不包含 JQuery UI，因此我很确定您必须先安装并引用它才能正常工作。这里有一个不错的讨论，带有相关教程的链接：forums.asp.net/t/…

【解决方案2】：

此答案只是将type=date attribute 应用于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。

【讨论】：

这是最好的答案！有什么方法可以选择时间和日期吗？ [DataType(DataType.DateTime)] public DateTime BirthDate { get; set; } 对我不起作用。
最简单的解决方案在这里
这不是正确的答案！该解决方案只会使浏览器特定的日历出现在浏览器的日期字段中。这与 Bootstrap 日期时间插件无关。
这不适用于 IE 11 和 FF 38。只有 Chrome 会选择它。
此解决方案的另一个问题是，在编辑日期字段时，我只看到“mm/dd/yyyy”而不是已经存在的日期值。

【解决方案3】：

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

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

结果将是：

【讨论】：

但是你会在视图中使用吗？我试过 TextBoxFor 但它仍然是一个文本框
此方法仅适用于某些浏览器，如 chrome。
IE 将使您的解决方案失败！
如果有人遇到此错误：无法读取未定义的属性“msie”。这解决了它

【解决方案4】：

我希望这可以帮助遇到我同样问题的人。

这个答案使用 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"}})

然后瞧

【讨论】：

P.S. - 在 App_Start 文件夹的 BundleConfig.cs 文件中设置捆绑包。
在哪里更新读取 Public Property DOB As DateTime 的部分？ = 没有
这似乎是 VB.NET，对于那些撕扯头发的人来说。尝试将其转换为 c#，但无论我尝试什么，它什么也没做。
这似乎是个好主意，但复制您的解决方案的细节太多。例如，我没有 Scripts 文件夹，也没有 Bundles 文件夹，您的代码显然希望在其中填充某些脚本？

【解决方案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" })
```

【讨论】：

您好，您如何将其设为日期范围，即用户需要从 & to 中选择两个日期
我很想应用这个，但我没有 BundleConfig.cs。 Razor Pages .net core 2 MVVM 架构。

【解决方案6】：

[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

像这样装饰你的模型。可以使用引导日期时间选择器，我使用了这个。 https://github.com/Eonasdan/bootstrap-datetimepicker/

我想你已经有用于引导 css 和 js 的包

您的日期选择器捆绑条目

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

在布局视图上渲染包

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

您的 HTML 视图

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

在你的视图末尾添加这个。

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>

【讨论】：

请考虑输入类型“日期”（由 Datatype.Date 设置）目前仅受 Chrome、Safari 和 Opera 支持（如您在此处看到的：w3schools.com/html/html_form_input_types.asp）。
@leiseliesel 我已经使用引导日期时间选择器更新了答案。

【解决方案7】：

1.请确保您首先引用 jquery.js
2.检查布局，确保调用“~/bundles/bootstrap”
3.检查布局，查看渲染部分脚本位置，它必须在“~/bundles/bootstrap”之后
4.将类“datepicker”添加到文本框
5.put $('.datepicker').datepicker();在 $(function(){...});

【讨论】：

【解决方案8】：

在您的代码中添加@type = "date"：

{ @class = "form-control", placeholder = "Enter Drop-off date here...", @type = "date" }

【讨论】：

【解决方案9】：

Checkout Shield UI 的 Date Picker for MVC。一个强大的组件，您可以通过以下几行代码集成：

@(Html.ShieldDatePicker()
    .Name("datepicker"))

【讨论】：

【解决方案10】：

简单：

[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}

【讨论】：