轻量级好用的jQuery时间插件

演示  website 下载

插件介绍

轻量级、用户体验好的jQuery时间选择插件，用户通过单击向上/向下箭头，选择所需的小时和分钟。

使用方法

1. 在页面中加载jQuery库和时间选择插件文件。

<script src="jquery.slim.min.js"></script>
<link rel="stylesheet" href="timepicker.min.css" />
<script src="timepicker.min.js"></script>

2.创建一个时间选择字段。

<input type="text" class="bs-timepicker" />

3. 初始化时间选择插件。

$(function () {
  $('.bs-timepicker').timepicker();
});

4. 自定义默认样式。

.timepicker {
  position: absolute;
  z-index: 1000;
  float: left;
  width: 160px;
  padding-bottom: 5px;
  margin: 2px 0 0 0;
  list-style: none;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}