DateTimePicker 文档:http://demos.telerik.com/kendo-ui/datetimepicker/template
基础使用:
1、引入jQuery 与 KendoUI JS;
2、定义要渲染的 html:
时间:<input class="time"/>
3、js 生成日期时间选择器:
$("#time").kendoDateTimePicker({value:new Date()});
注:有多个可选配置,具体查看文档。
问题:
默认的 DateTimePicker 显示的为英文格式的,如何换成中文格式?
这涉及到语言的问题,KendoUI 提供了各种语言包,下载完整的KendoUI ,则 /js/culture 文件夹下面的js 则为所有与语言相关的定义。
解决:
1、页面引入语言包,如:
<script type="text/javascript" src="resource/kendo/js/culture/...ch-ZN.min.js">
2、使用引入的语言包(必需步骤):
<script>
kendo.culture("ch-ZN");//注意参数只是语言部分ch-ZN
</script>
3、重新生成时间日期采集器,采集器将显示为中文形式。
4、更进一步设置采集器显示格式:
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
weekNumber: true,
format:"yyyy年MM月dd日 hh:mm tt",
month: {
// template for dates in month view
content: '# if (isInArray(data.date, data.dates)) { #' +
'<div class="birthday"></div>' +
'# } #' +
'#= data.value #',
weekNumber: ' <a class="italic">#= data.weekNumber #</a>'
},
footer: "今日 - #=kendo.toString(data, 'd') #",//设置格式类型为d,即显示形如:11/8/2017
open: function () {
var dateViewCalendar = this.dateView.calendar;
if (dateViewCalendar) {
dateViewCalendar.element.width(300);
}
}
});
以下是日期时间的格式类型:
"d" - short date pattern:kendo.toString(new Date(2000, 10, 6), "d") -> 11/6/2000
"D" - long date pattern:kendo.toString(new Date(2000, 10, 6), "D") -> Monday, November 06, 2000
"F" - Full date/time pattern:kendo.toString(new Date(2000, 10, 6), "D") -> Monday, November 06, 2000 12:00:00 AM
"g" - General date/time pattern (short time):kendo.toString(new Date(2000, 10, 6), "g") -> 11/6/2000 12:00 AM
"G" - General date/time pattern (long time):kendo.toString(new Date(2000, 10, 6), "G") -> 11/6/2000 12:00:00 AM
"M/m" - Month/day pattern:kendo.toString(new Date(2000, 10, 6), "m") -> November 06
"u" - Universal sortable date/time pattern:kendo.toString(new Date(2000, 10, 6), "u") -> 2000-11-06 00:00:00
"Y/y" - Year/month pattern:kendo.toString(new Date(2000, 10, 6), "y") -> November, 2000
以上设置为中文的方法同样适用于KendoUI 的其它采集器,如:
DatePicker:日期采集器;
TimePicker:时间采集器
Calendar:日历;
NumericTextBox 等。