jTimepicker是一款另类的jquery时间拾取插件，为什么说起另类呢？因为它采用jquery的滑动条UI来实现时间拾取，请看下图：
此款插件基于jquery的UI组件包。
使用教程
1、引入如下js、css
- <link rel="stylesheet" type="text/css" href="css/ui/base/ui.core.css" />
- <link rel="stylesheet" type="text/css" href="css/ui/base/ui.theme.css" />
- <link rel="stylesheet" type="text/css" href="css/ui/base/ui.slider.css" />
- <link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />
- <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="lib/ui.core.js"></script>
- <script type="text/javascript" src="lib/ui.slider.js"></script>
- <script type="text/javascript" src="lib/jquery.jtimepicker.js"></script>
引入的文件比较多，主要是jquery的UI文件。
2、初始化插件
- $(document).ready(function() {
- $('#timepicker').jtimepicker({
- // 配置写在这里
- });
- });
- <div id="timepicker"></div>
3、参数说明
| 参数名 | 数据类型 | 默认参数 | 说明 |
| clockIcon | string | "images/icon_clock_2.gif" | 显示在输入款旁的时钟图标路径 |
| orientation | string | "horizontal" | 修改滑动条的显示模式是竖还是横 |
| hourCombo | string | "hourcombo" | 小时选择框样式名 |
| hourMode | integer | 24 | 小时格式化 |
| hourInterval | integer | 1 | 小时滑动条的步进 |
| hourDefaultValue | integer | 0 | 设置小时选择框默认值 |
| hourSlider | string | "hourSlider" | 小时滑动条的样式名 |
| hourLabel | string | "hour" | 小时滑动条前的文本 |
| minCombo | string | "mincombo" | 分钟选择框样式名 |
| minLength | integer | 60 | 分钟最大长度 |
| minInterval | integer | 5 | 分钟的步进 |
| minDefaultValue | integer | 0 | 设置分钟选择框默认值 |
| minSlider | string | "minSlider" | 分钟滑动条的样式名 |
| minLabel | string | "min" | 分钟滑动条前的文本 |
| secView | boolean | true | 是否显示秒 |
| secCombo | string | "seccombo" | 秒选择框样式名 |
| secLength | integer | 60 | 秒最大长度 |
| secInterval | integer | 5 | 秒的步进 |
| secDefaultValue | integer | 0 | 设置秒选择框默认值 |
| secSlider | string | "secSlider" | 秒滑动条的样式名 |
| secLabel | string | "sec" | 秒滑动条前的文本 |
