如何在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> 

8 Solutions collect form web for “如何在MVC 5项目中使用Razor引擎添加Date Picker Bootstrap 3?”

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

这个答案简单地将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。

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

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

和瞧

在这里输入图像说明

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

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

结果将是: MVC应用程序中的日期选择器

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

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

简单:

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

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

 @(Html.ShieldDatePicker() .Name("datepicker")) 
  • Bootstrap 3下拉菜单丢失
  • 如何在MVC 5项目中从bootswatch或wrapbootstrap实现主题?
  • 未捕获的错误:没有这样的方法“显示”工具提示小部件实例
  • 在页面重新加载之后,如何使用twitter引导保持当前选项卡处于活动状态?
  • 如何使Twitter引导模式全屏
  • 使用Bootstrap的响应式iframe
  • 如何为引导标签内容提供边框
  • 当我点击表单中的button时,表单被提交。 如何避免这一点?
  • 如何在bootstrap中使用selectpicker插件在select上设置选定的值
  • Twitter引导 - 关注单击模式内的textarea
  • z-index与twitter引导下拉菜单的问题