KendoUI —— DateTimePicker 元件設定為中文

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

轉載自部落格： https://my.oschina.net/zh119893/blog/122367