1.下载依赖的JS包(均可在Nuget中获取)
- jQuery
- Bootstrap
- moment
- Bootstrap-datetimepicker
2.添加BundleConfig绑定
安装完后所有JS文件会保存在项目Scripts文件夹中.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
//在以下地方添加绑定
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-datetimepicker.js"));//我把bootstrap-datetimepicker.js绑定到bootstrap中了
bundles.Add(new ScriptBundle("~/bundles/moment").Include(
"~/Scripts/moment-with-*"));//这里是添加moment.js,我用的是moment-with-locales.js
}
}
3.在视图中使用控件
- 在页面中引入JS:
moment要在bootstrap前面引入
@section Scripts {
@Scripts.Render("~/bundles/moment")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
}
- 给input标签加id属性
<div class="form-group">
@Html.LabelFor(model => model.LeaveDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LeaveDate, new { htmlAttributes = new { @class = "form-control", id= "LeaveDate" } })
@Html.ValidationMessageFor(model => model.LeaveDate, "", new { @class = "text-danger" })
</div>
</div>
- 使用JS代码为元素添加控件 datetimepicker()
<script>
$(window).ready(function () {
$('#LeaveDate').datetimepicker({
locale: moment().locale('zh-cn')
});
});
</script>
4.datetimepicker()参数对象
$('#LeaveDate').datetimepicker({
showClose:true //是否显示关闭 按钮
viewMode: 'days',//天数模块展示,months则为以月展示
daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开
calendarWeeks: false, //显示 周 是 今年第几周
toolbarPlacement:'default', //工具摆放的位置,top 则为上,默认为底
showTodayButton:false, //是否工具栏 显示 直达今天天数的 按钮,默认false
showClear:false, //是否 工具栏显示 清空 输入框 的按钮。默认false
});
5.效果展示
6.后续补充
不用C#Html类的话input标签的父元素要加定位属性position:relative
<td style="position:relative"><input type="text" name="FormsRegistrations[@i].ReturnDate" class="form-control ReturnDate" /></td>