jQuery UI Datepicker添加时分秒

在应用程序对时间控件的应用中，很多时候都需要时间能精确到时分秒，比如电子商务网站的一些产品促销功能，以及限时抢购功能等等，jQuery UI为我们提供了很好的时间控件，但默认的jQuery UI Datepicker没有添加时分秒，我们需要补充一点东西和设置就可以实现如下图的功能了。

在设置好jQuery UI Datepicker以后需要添加的内容如下：

一、下载Timepicker Addon文件包含到页面中

二、添加所需样式（可以直接添加到jQuery UI Datepicker所需的样式文件末尾）

<style type='text/css'>
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

 

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
</style>

三、在页面中使用，用法如下:

$(‘#example1′).datetimepicker();

或

$(‘#example2′).datetimepicker({
showSecond: true, //显示秒
timeFormat: ‘hh:mm:ss’,//格式化时间
stepHour: 2,//设置步长
stepMinute: 10,
stepSecond: 10
});

说明：

//设置是否显示时分秒
Show Seconds, Minutes, or Hours

showHour     Show the hour, default=true
showMinute   Show the minute, default=true
showSecond   Show the second, default=false

//设置时分秒步长
stepHour     hour steps, default=1
stepMinute   minute steps, default=1
stepSecond   second steps, default=1