功能说明
基于jQuery UI Datepicker (V1.8.7)和 jquery-ui-timepicker-addon 插件构建,并提供了以下主要功能:
更多信息请参见:
自定义日期格式
仅限于使用“y”、“M”、“d”三种格式说明符
@Html.DateTimePicker("dateTimePickerDateFormat", new DateTimePicker() .SetSelectedDate(DateTime.Now) .SetDateFormat("yyyy年MM月dd日")) .MergeHtmlAttribute("style", "width:100px")
限制可选择的日期范围
通过设置minDate、maxDate来限制,可为其设置以下情况的数值:静态日期、整数、空、日期表达式
@Html.DatePicker("staticDatepicker", DateTime.Now, "2012-01-01", "2012-12-12") //静态日期 @Html.DatePicker("integerDatepicker", DateTime.Now, "0", "7") //整数 @Html.DatePicker("nullDatepicker", DateTime.Now, null, null) //空 @Html.DatePicker("dateExpressionPicker", DateTime.Now, "-1W", "+1M+10D") //日期表达式
选择时间
@Html.DateTimePicker("dateTimePicker1", DateTime.Now, "0", "7")
在表单中使用
需在EditModel中,为表单项设置数据标记DataType来使用日期选择器模板。若需要选择时间,可以设置[DataType(DataType.DateTime)],否则[DataType(DataType.Date)]。
允许在EditModel中,为表单项设置数据标记DateRange来控制用户选择日期的范围, 例如:[DateRange(MinDate = "0", MaxDate= "1W+2d")], 具体数值设置和限制可选择的日期范围相同
@Html.EditorFor(model => model.StartDate)
完整示例
Javascript代码
var beforeShow = function (input, inst) { $("#logs").empty().append("<p>beforeShow事件被触发了</p>"); } var onClose = function (dateText, inst) { $("#logs").empty().append("<p>onClose事件被触发了</p>"); } var onSelect = function (dateText, inst) { $("#logs").empty().append("<p>onSelect事件被触发了</p>"); }
C#代码
@Html.DateTimePicker("dateTimePicker2", new DateTimePicker() .SetSelectedDate(DateTime.Now) .SetChangeMonth(false) .SetChangeYear(false) .SetDateFormat("yyyy年MM月dd日") .SetMaxDate("1w") .SetMinDate("2") .SetShowTime(true) .SetTimeFormat("HH时mm分") .SetBeforeShowCallBack("beforeShow") .SetOnCloseCallBack("onClose") .SetOnSelectCallBack("onSelect") .MergeHtmlAttribute("style", "width:200px"))
日期表达式是什么?
是指基于当前日期进行计算的表达式,使用表达式我们可以很方便的控制日期范围。其有以下特点:
允许使用的日期单位说明如下: