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 等。