Jquery DateTimePicker Config and Code Annalyze

设置location为中文。

// set the cn-zh location
        this.regional['cn'] = { // Default regional settings
            closeText: '关闭', // Display text for close link
            prevText: '上一个', // Display text for previous month link
            nextText: '下一个', // Display text for next month link
            currentText: '现在', // Display text for current month link
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'], // Names of months for drop-down and formatting
            monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
            dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // For formatting
            dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], // Column headings for days starting at Sunday
            weekHeader: 'Wk', // Column header for week of the year

dateFormat: 'yyyy/MM/dd HH:mm', // See format options on parseDate

            /*  format options.
            dd     - Day of the month as digits; leading zero for single-digit days. 
            ddd    - Day of the week as a three-letter abbreviation. 
            dddd   - Day of the week as its full name. 
            m      - Month as digits; no leading zero for single-digit months. 
            mm     - Month as digits; leading zero for single-digit months. 
            mmm    - Month as a three-letter abbreviation. 
            mmmm   - Month as its full name. 
            yy     - Year as last two digits; leading zero for years less than 10. 
            yyyy   - Year represented by four digits. 
            h      - Hours; no leading zero for single-digit hours (12-hour clock). 
            hh     - Hours; leading zero for single-digit hours (12-hour clock). 
            H      - Hours; no leading zero for single-digit hours (24-hour clock). 
            HH     - Hours; leading zero for single-digit hours (24-hour clock). 
            M      - Minutes; no leading zero for single-digit minutes.
            Uppercase M unlike CF timeFormat's m to avoid conflict with months. 
            MM     - Minutes; leading zero for single-digit minutes.
            Uppercase MM unlike CF timeFormat's mm to avoid conflict with months. 
            s      - Seconds; no leading zero for single-digit seconds. 
            ss     - Seconds; leading zero for single-digit seconds. 
            l or L - Milliseconds. l gives 3 digits. L gives 2 digits. 
            t      - Lowercase, single-character time marker string: a or p.
            No equivalent in CF. 
            tt     - Lowercase, two-character time marker string: am or pm.
            No equivalent in CF. 
            T      - Uppercase, single-character time marker string: A or P.
            Uppercase T unlike CF's t to allow for user-specified casing. 
            TT     - Uppercase, two-character time marker string: AM or PM.
            Uppercase TT unlike CF's tt to allow for user-specified casing. 
            Z      - US timezone abbreviation, e.g. EST or MDT. With non-US timezones or in the Opera browser, the GMT/UTC offset is returned, e.g. GMT-0500
            No equivalent in CF. 
            o      - GMT/UTC timezone offset, e.g. -0500 or +0230.
            No equivalent in CF. 
            S      - The date's ordinal suffix (st, nd, rd, or th). Works well with d.
            No equivalent in CF. 
            '…' or "…" - Literal character sequence. Surrounding quotes are removed.
            No equivalent in CF. 
            UTC:   - Must be the first four characters of the mask. Converts the date from local time to UTC/GMT/Zulu time before applying the mask. The "UTC:" prefix is removed.
            No equivalent in CF. 
         
            "default": "ddd mmm dd yyyy HH:MM:ss",
            shortDate: "m/d/yy",
            mediumDate: "mmm d, yyyy",
            longDate: "mmmm d, yyyy",
            fullDate: "dddd, mmmm d, yyyy",
            shortTime: "h:MM TT",
            mediumTime: "h:MM:ss TT",
            longTime: "h:MM:ss TT Z",
            isoDate: "yyyy-mm-dd",
            isoTime: "HH:MM:ss",
            isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
            isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
            */
            firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
            isRTL: false, // True if right-to-left language, false if left-to-right
            showMonthAfterYear: false, // True if the year select precedes month, false for month then year
            yearSuffix: '' // Additional text to append to the year in the month headers
        };

dateFormat: 'yyyy/MM/dd HH:mm', // See format options on parseDate

这段代码配置，dateTimePicker获取的时间格式。最终datetimepicker会使用Date.formate(dateFormate)来格式化输出日期。

DateTimePicker日期设置方法

如图选择4月13号

查看该元素html，发现整个日历是一个表格，没一个td元素标示一个日期，并且绑定了datetimepicker._selectDay(“#SubmitTime”,3,2012,this)这个函数

其中”#SubmitTime”是input的id，而2012是年，3是月（月的索引是从0开始的）。

        /* Action for selecting a day. */
        _selectDay: function(id, month, year, td, hh, mm, am) {
            var target = $(id);
            if ($(td).hasClass(this._unselectableClass) || this._isDisabledDatepicker(target[0])) {
                return;
            }
            var inst = this._getInst(target[0]);
            inst.selectedDay = inst.currentDay = $('a', td).html();
            inst.selectedMonth = inst.currentMonth = month;
            inst.selectedYear = inst.currentYear = year;
            inst.selectedHour = inst.currentHour = $("#DP_jQuery_Hour_" + dpuuid).val()
            inst.selectedMinute = inst.currentMinute = $("#DP_jQuery_Minute_" + dpuuid).val();
            inst.selectedAMPM = inst.currentAMPM = $("#DP_jQuery_AMPM_" + dpuuid).val();
            this._selectDate(id, this._formatDate(inst,
			inst.currentDay, inst.currentMonth, inst.currentYear));
        },

通过这个函数将选中的日期格式化到指定input中，并且隐藏datatimepicker table

 

Jquery.ui.datetimepicker.js