KendoUI —— DateTimePicker 组件设置为中文

悠悠 2022-06-06 12:29 508阅读 0赞

DateTimePicker 文档：[http://demos.telerik.com/kendo-ui/datetimepicker/template][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、页面引入语言包，如：

2、使用引入的语言包（必需步骤）：

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][https_my.oschina.net_zh119893_blog_122367]

[http_demos.telerik.com_kendo-ui_datetimepicker_template]: http://demos.telerik.com/kendo-ui/datetimepicker/template
[https_my.oschina.net_zh119893_blog_122367]: https://my.oschina.net/zh119893/blog/122367