Question

jquery-ui-timepicker怎么用

Answer 1

设置好jQuery UI Datepicker后，去GitHub上搜索并下载jQuery Timepicker Addon。
添加时分秒插件所需样式（官方样式，根据需要添加到页面或样式文件中）
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.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; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

配置：
通过配置showHour、showMinute、showSecond设置是否显示时分秒通过配置stepHour、stepMinute、stepSecond设置时分秒步长
我的案例：
<link href="../CSS/jquery-ui.min.css" rel="stylesheet" type="text/css" /><link href="../CSS/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css" />
<!-- 注意：此处样式与官方样式不一至 -->
<style>
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }.ui-timepicker-div dl{ text-align: left; }.ui-timepicker-div dl dt{ height: 25px; }.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }.ui-timepicker-div td { font-size: 90%; }
</style>
<!-- 注意：此处因编辑器问题仅列出引用文件，请根据需要修改 -->
/JS/jquery.ui.core.min.js
/JS/jquery.ui.datepicker.min.js
/JS/jquery.ui.widget.min.js
/JS/jquery.ui.mouse.min.js
<script type="text/javascript">