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






评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值