KendoUI —— DateTimePicker 组件设置为中文

最新推荐文章于 2020-12-18 20:05:28 发布

Liekkas_BX

最新推荐文章于 2020-12-18 20:05:28 发布

阅读量5.8k

点赞数

分类专栏：前端框架文章标签： KendoUI DateTimePicker 中文

前端框架专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何将KendoUI的DateTimePicker组件从英文格式转换为中文格式，并提供了详细的步骤说明及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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：时间采集器