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

我需要一些关于如何在使用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> } 

现在，如何在这里调用dateselect器？

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

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

 <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元素，并依靠浏览器提供dateselect器。 请注意，即使在2017年，并非所有浏览器都提供了自己的dateselect器，因此您可能希望提供一个回退。

您只需将属性添加到视图模型中的属性即可。 variablesLdate ：

 [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插件 ，它不是原生的引导程序。

确保你通过NuGet安装了Bootstrap DatePicker

创build一小段JavaScript并将其命名为DatePickerReady.js将其保存在Scripts目录中。 这将确保它即使在非HTML5浏览器中也能正常工作，尽pipe现在很less。

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

现在设置数据types，以便在使用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

1.确保你首先参考jquery.js
2.检查布局，确保你调用“〜/ bundles / bootstrap”
3.检查布局，看渲染部分脚本的位置，它必须在“〜/ bundles / bootstrap”
4.添加类“datepicker”到文本框
5.put $（'。datepicker'）。datepicker（）; 在$（function（）{…}）;

Answer 6

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

像这样装饰你的模型。 可以使用一个引导date时间select器我用这个。 https://github.com/Eonasdan/bootstrap-datetimepicker/

我想你已经有引导CSS和JS的捆绑

您的dateselect器包条目

  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> 

Answer 7

简单：

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

Answer 8

Checkout Shield UI的MVCdateselect器 。 一个强大的组件，你可以像几行一样整合：

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