日期时间选择控件配置使用方法

一、需要的资源：

1、从: http://jqueryui.com/download/下载 jQuery-UI plugin

解压并复制文件夹到webapp根目录下。

2、Download jquery-ui-timepicker-addon.js

使用方法：解压并复制文件夹到webapp根目录下。

二、引入方法

顺序引入jQuery-UI中的CSS文件和js文件,接着引入jquery-ui-timepicker-addon.js。

三、本地化显示组件内容

官方默认的国际化显示方式需要覆盖掉，以完成本地化（自己想要显示的格式）。所以需要自行编写本地化资源文件，并在以上文件引入后引入页面。

格式大致如下：

 

//Localizethe regional format and display name fragment

$.timepicker.regional['zh-CN'] = {

    timeOnlyTitle: '选择时间',

    timeText: '时间',

    hourText: '小时',

    minuteText: '分钟',

    secondText: '秒',

    millisecText: '毫秒',

    currentText: '当前时间',

    closeText: '关闭',

    ampm: false

};

// make it intoeffect

 

$.timepicker.setDefaults($.timepicker.regional['zh-CN']);

 

$.datepicker.regional['zh-CN'] = {

    // Display text for close link

    closeText: "Done",

    // Display text for previous monthlink

    prevText: "前一月", 

// Display text for next month link

nextText: "后一月",

// Display text for current month link

    currentText: "Today",

    // Names of months for drop-down andformatting

    monthNames: ["一月","二月","三月","四月","五月","六月",

"七月","八月","九月","十月","十一月","十二月"],

    // For formatting

    monthNamesShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],

    // For formatting

    dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],

// Forformatting

dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

// Column headings for days startingat Sunday

dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],

// Column header for week of the year

weekHeader: "周",

// See format options on parseDate

    dateFormat: "yy-mm-dd",

// The first day of the week, Sun = 0, Mon = 1, ...

    firstDay: 1,

    // True if right-to-left language,false if left-to-right

    isRTL: false,

// True if the year select precedes month, false for month thenyear

    showMonthAfterYear: true,

// Additional text to append to theyear in the month headers

    yearSuffix: "年"

};

// make it intoeffect

$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

四、使用方法：

假设页面中包含ID为datePicker的文本输入框，以下便是使用日期时间控件的代码：

$(function(){

    $("#datePicker").datetimepicker({

        timeFormat:"hh:mm:ss",

         dateFormat: "yy-mm-dd"

    });

});