我需要一些关于如何使用Date Picker引擎在MVC5项目上安装RazorBootstrap3的指南。我找到了这个链接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>
发布于 2014-01-14 10:36:50
此答案使用jQuery UI Datepicker,它是一个单独的include。有其他方法可以在不包含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>
发布于 2015-11-25 03:14:30
[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }
像这样装饰你的模型。可以使用bootstrap日期时间选择器我用了这个。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>
发布于 2014-01-14 11:25:40
1.确保首先引用jquery.js
2.检查布局,确保调用"~/bundles/bootstrap“
3.检查布局,请参见渲染部分脚本位置,它必须在"~/bundles/bootstrap“之后
4.将"datepicker“类添加到文本框中
5.put $('.datepicker').datepicker();in $(function(){...});
https://stackoverflow.com/questions/21104633
复制相似问题