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 codethis.regional[''] = { // Default regional settingscurrentText: '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设置。