timepicker 支持中文

先看效果图：



timepicker是一个jquery ui date的插件，可以支持选择时间和分钟。本文讨论如何支持中文，通过检查代码可以看到：
/*
* Timepicker manager.
* Use the singleton instance of this class, $.timepicker, to interact with the time picker.
* Settings for (groups of) time pickers are maintained in an instance object,
* allowing multiple different settings on the same page.
*/
var Timepicker = function () {
this.regional = []; // Available regional settings, indexed by language code
this.regional[''] = { // Default regional settings
currentText: 'Now',
closeText: 'Done',
amNames: ['AM', 'A'],
pmNames: ['PM', 'P'],
timeFormat: 'HH:mm',
timeSuffix: '',
timeOnlyTitle: 'Choose Time',
timeText: 'Time',
hourText: 'Hour',
minuteText: 'Minute',
secondText: 'Second',
millisecText: 'Millisecond',
microsecText: 'Microsecond',
timezoneText: 'Time Zone',
isRTL: false
};得到以下信息：
1. $.timepicker 是一个singleton方法获取全局的对象
2. 可以设置一些regional的属性

解决思路是：
1. 通过AMD加载控制顺序，先加载jquery ui，然后加载timepicker插件，最后加载一个自己写的js文件timepickerConfig.js
2. 调用timepickerConfig.js提供的init方法完成支持中文的设置
下面是例子：
cpuPage.js控制加载顺序，并负责初始化：
/*global window, document */
require.config({
paths: {
"jquery": "../thirdParty/jquery-ui-1.10.3.custom/js/jquery-1.9.1",
"ajaxUtility": "./ajaxUtility",
"jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog",
"validate": "../../plugin/jquery-validation-1.9.0/jquery.validate.min",
"select": "./select",
"jquery.bootstrap": "../thirdParty/bootstrap.min",
"raphael": "../thirdParty/raphael-min",
"jpicker": "../thirdParty/jpicker-1.1.6/jpicker-1.1.6.min",
"jquery.ui": "../thirdParty/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min",
"timepicker": "../thirdParty/timepicker/jquery-ui-timepicker-addon"
},

shim: {
"jquery.artDialog": {
deps: ["jquery"],
exports: "artDialog"
},

"jquery.bootstrap": {
deps: ["jquery"]
},

"jpicker": {
deps: ["jquery"]
},

"validate": {
deps: ["jquery"],
exports: "Validate"
},

"jquery.ui": {
deps: ["jquery"]
},

"timepicker": {
deps: ["jquery.ui"]
},

"timepickerConfig": {
deps: ["timepicker"]
}
}

});

define(["jquery",
"ajaxUtility",
"dialog",
"jqueryTool",
"validate",
"select",
"lineChart",
"raphael",
"timepickerConfig",
"cpu",
"jpicker"],
function ($, ajaxUtility, dialog, jqueryTool, validate, select, lineChart, raphael, timepickerConfig, cpu) {
'use strict';

$(document).ready(function () {
var locale = window.locale;
ajaxUtility.init(locale);
dialog.init(locale);
timepickerConfig.init(locale);
cpu.init(ajaxUtility, dialog, jqueryTool, locale, validate, select, lineChart);
});
});

注意timepickerConfig.init这里被调用，timepickerConfig.js文件内容：
define(["jquery", "jquery.ui"], function ($) {
'use strict';
return {
init: function (locale) {
if (locale === "cn") {
var j = {
clearText: '清除',
clearStatus: '清除已选日期',
closeText: '关闭',
closeStatus: '不改变当前选择',
prevText: '<上月',
prevStatus: '显示上月',
prevBigText: '<<',
prevBigStatus: '显示上一年',
nextText: '下月>',
nextStatus: '显示下月',
nextBigText: '>>',
nextBigStatus: '显示下一年',
currentStatus: '显示本月',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
monthStatus: '选择月份',
yearStatus: '选择年份',
weekHeader: '周',
weekStatus: '年内周次',
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dayStatus: '设置 DD 为一周起始',
dateStatus: '选择 m月 d日, DD',
dateFormat: 'yy-mm-dd',
firstDay: 1,
initStatus: '请选择日期',
currentText: '现在',
isRTL: false,
timeText: '时间',
hourText: '小时',
minuteText: '分钟'
};

$.timepicker.setDefaults(j);
}
}
};
});

说白了就是准备一个json对象，然后调用setDefaults设置。