如何使用 Razor 引擎在 MVC 5 项目上添加日期选择器 Bootstrap 3? [英] How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

问题描述

我需要一些关于如何使用 Razor 在 MVC 5 项目上安装 Date Picker Bootstrap 3 的指南引擎.我在此处找到了此链接，但无法在 VS2013 中使用.

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

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js","~/Scripts/bootstrap-datepicker.js",//** Bootstrap Datepicker 的新功能"~/Scripts/respond.js"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/bootstrap-datepicker.css",//** Bootstrap Datepicker 的新功能"~/Content/site.css"));

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

@section 脚本 {@Scripts.Render("~/bundles/jqueryval")<script type="text/javascript">$('.datepicker').datepicker();//初始化任何日期选择器}

现在，如何在这里调用日期选择器?

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

解决方案

这个答案使用了 jQuery UI Datepicker，这是一个单独的包含.在不包含 jQuery UI 的情况下，还有其他方法可以做到这一点.

首先，除了form-control之外，您只需要将datepicker类添加到文本框:

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

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

I need some guide lines on how to install a Date Picker Bootstrap 3 on a MVC 5 project using the Razor engine. I found this link here but couldn't make it work in VS2013.

Copying from the example in the later link above I've already done the following:

            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"));

Then I've added the script to the index view as follow

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

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

Now, how to call the date picker here?

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

解决方案

This answer uses the jQuery UI Datepicker, which is a separate include. There are other ways to do this without including jQuery UI.

First, you simply need to add the datepicker class to the textbox, in addition to 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>

Then, to be sure the javascript is triggered after the textbox is rendered, you have to put the datepicker call in the jQuery ready function:

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

这篇关于如何使用 Razor 引擎在 MVC 5 项目上添加日期选择器 Bootstrap 3?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！