如何使用Razor引擎在MVC 5项目中添加Date Picker Bootstrap 3？
我需要一些关于如何使用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>回答 6
Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 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
复制相似问题