//自定义一个DatePicker.cshtml文件
@helper Init()
{
<link href="~/Content/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" />
<script src="~/Scripts/mobiscroll.custom-2.5.0.min.js"></script>
//日期字体颜色
<style>
.dw-i {
color: #fff;
}
</style>
}
@helper Render(params string[] controlIds)
{
if (controlIds != null)
{
<script type="text/javascript">
$(function () {
@foreach (var item in controlIds)
{
@:$("#@item").mobiscroll().date();
}
var currYear = (new Date()).getFullYear();
//初始化日期控件
var opt = {
preset: 'date', //日期,可选:date\datetime\time\tree_list\image_text\select
theme: 'default', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
display: 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottom
mode: 'scroller', //日期选择模式,可选:scroller\clickpick\mixed
lang: 'zh',
dateFormat: 'yyyy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yyyymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
showNow: false,
nowText: "今",
startYear: currYear - 5, //开始年份
endYear: currYear //结束年份
};
@foreach (var item in controlIds)
{
@:$("#@item").mobiscroll(opt);
}
});
</script>
}
}
使用
//view页面中
@DatePicker.Init()
@DatePicker.Render("date1", "date2")
<div> <input type="text" placeholder="发布开始时间" id="date1" value="@ViewBag.SDate" /> <input type="text" placeholder="发布结束时间" id="date2" value="@ViewBag.EDate" /> </div>