一個簡易的選擇小時（時分秒）的外掛

CSS · 發表 2018-10-21 17:52:40

摘要：老規矩，先上圖，效果如下所示：圖片.png 圖片.png 首先引入boostrap和juqery相關 <link rel="stylesheet" href="htt...

老規矩，先上圖，效果如下所示：

圖片.png

首先引入boostrap和juqery相關

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>、

再引入timepicker外掛

<!-- 時間外掛 -->
<link rel="stylesheet" type="text/css" href="css/timePicker.css">
<script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>

簡潔的js程式碼

//時間選擇
$("#beginTime").hunterTimePicker();
$("#endTime").hunterTimePicker();

程式碼示例：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 小時 -->
<link rel="stylesheet" type="text/css" href="css/timePicker.css">
</head>

<body>
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label" for="" id="">開始時間</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="beginTime"></input>
<font color="red" id="validateBeginTime"></font>
</div>
</div>
</div>

<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label" for="" id="">結束時間</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="endTime" ></input>
<font color="red" id="validateEndTime"></font>
</div>
</div>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 時間外掛 -->
<script type="text/javascript" src="js/jquery-timepicker.js"/>"></script>
<script>
//時間選擇
$("#beginTime").hunterTimePicker();
$("#endTime").hunterTimePicker();
</script>

</html>

附上：

timePicker.css

.Hunter-time-picker{
position: absolute;
border: 2px solid #c9cbce;
width: 390px;
background: #ffffff;
z-index: 999999;
font-size: 0;
}
.Hunter-time-picker:before, .Hunter-time-picker:after{
content: '';
display: block;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
position: absolute;
left: 20px;
z-index: 999999;
}
.Hunter-time-picker:before{
border-color: transparent transparent #ffffff;
top: -17px;
z-index: 9999999;
}
.Hunter-time-picker:after{
border-color: transparent transparent #c9cbce;
top: -20px;
}
.Hunter-time-picker *{
box-sizing: border-box;
margin: 0 auto;
padding: 0;
color: #666666;
font-family: "Microsoft YaHei";
font-size: 14px;
}
.Hunter-time-picker ul{
list-style: none;
}
.Hunter-time-picker ul li{
display: inline-block;
position: relative;
margin: 4px;
cursor: pointer;
}
.Hunter-time-picker p{
font-weight: bold;
padding: 0 4px;
margin-top: 4px;
margin-bottom: 10px;
}
.Hunter-time-picker .line{
width: 340px;
margin: 0 auto;
margin-top: 4px;
border-bottom: 1px solid #d8d8d8;
}

/*選擇小時*/
.Hunter-time-picker .Hunter-wrap{
position: relative;
width: 100%;
background: #ffffff;
padding: 9px;
}
.Hunter-time-picker .Hunter-hour-name{
display: inline-block;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
position: relative;
background-color: #f5f5f5;
}
.Hunter-time-picker .Hunter-hour-name:hover{
color: #002DFF;
}

.Hunter-time-picker .Hunter-hour.active{
z-index: 999999999;
}
.Hunter-time-picker .active .Hunter-hour-name{
color: #ffffff;
background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-minute-wrap{
display: none;
border: 1px solid #D8D8D8;
background: #ffffff;
position: absolute;
top: 29px;
width: 370px;
padding: 10px 10px 5px 10px;
}
.Hunter-time-picker .Hunter-minute{
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
color: #999999;
background-color: #f5f5f5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.Hunter-time-picker .Hunter-minute:hover{
color: #002DFF;
}
.Hunter-time-picker .Hunter-minute.active {
color: #ffffff;
background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-clean-btn{
width: 108px;
height: 30px;
background-color: #3A7ADB!important;
color: #ffffff;
background-image: none !important;
border: 5px solid #3A7ADB;
border-radius: 0;
}
.Hunter-time-picker .Hunter-clean-btn:hover{
background-color: #0B4B94 !important;
border-color: #3A7ADB;
}

附上：

jquery-timepicker.js

/**
 *
 * @author李凱飛
 *
 * 描述：選擇時間元件，先選擇小時再選擇分鐘，只支援00-23小時、00-05-10...50-55分鐘。回撥函式的e為源物件。
 *
 * 示例如下：
 *
 * $("#timePicker").hunterTimePicker();
 *
 * $('.time-picker').hunterTimePicker({
 *callback: function(e){
 *....
 *}
 * });
 *
 */

(function ($) {
$.hunterTimePicker = function (box, options) {
var dates = {
hour: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
minute: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
};

var box = $(box);

var template = $('<div class="Hunter-time-picker" id="Hunter_time_picker"><div class="Hunter-wrap"><ul class="Hunter-wrap" id="Hunter_time_wrap"></ul></div></div>');

var time_wrap = $('#Hunter_time_wrap', template);

$(document).click(function() {
template.remove();
});

box.click(function(event){
event.preventDefault();
event.stopPropagation();
$('.Hunter-time-picker').remove();
var _this = $(this);
var offset = _this.offset();
var top = offset.top + _this.outerHeight() + 15;
template.css({
'left': offset.left,
'top': top
});
buildTimePicker();
$('body').append(template);

$('.Hunter-time-picker').click(function(event){
event.preventDefault();
event.stopPropagation();
});
});

function buildTimePicker(){
buildHourTpl();
hourEvent();
minuteEvent();
cleanBtnEvent();
};

function buildHourTpl(){
var hour_html = '<p>小時</p>';
for(var i = 0; i < dates.hour.length; i++){
var temp = box.val().split(":")[0];
if(dates.hour[i]==temp){
hour_html += '<li class="Hunter-hour active" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
}else{
hour_html += '<li class="Hunter-hour" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
}
}

hour_html += '<li class="Hunter-clean"><input type="button" class="Hunter-clean-btn" id="Hunter_clean_btn" value="清 空"></li>'

time_wrap.html(hour_html);
};

function buildMinuteTpl(cur_time){
var poi = cur_time.position();
var minute_html = '<p>分鐘</p>';
var temp = box.val().split(":")[1];
for(var j = 0; j < dates.minute.length;j++){
if(dates.minute[j]==temp){
minute_html += '<li class="Hunter-minute active" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
}else{
minute_html += '<li class="Hunter-minute" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
}
}
cur_time.find('.Hunter-minute-wrap').html(minute_html).css('left', '-' + (poi.left - 37) + 'px').show();
};

function hourEvent(){
time_wrap.on('click', '.Hunter-hour', function(event){
event.preventDefault();
event.stopPropagation();
var _this = $(this);

time_wrap.find('.Hunter-hour').removeClass('active');
time_wrap.find('.Hunter-hour-name').removeClass('active');
time_wrap.find('.Hunter-minute-wrap').hide().children().remove();

_this.addClass('active');
_this.find('.Hunter-hour').addClass('active');

var hourValue = _this.data('hour');
var temp = box.val().split(":");
if(temp.length > 1){
box.val(hourValue+":"+temp[1]);
}else{
box.val(hourValue+":00");
}
buildMinuteTpl(_this);

if(options.callback) options.callback(box);

return false;
});
};

function minuteEvent(){
time_wrap.on('click', '.Hunter-minute', function(event) {
event.preventDefault();
event.stopPropagation();
var _this = $(this);

var minuteValue = _this.data('minute');
var temp = box.val().split(":")[0]+":"+minuteValue;
box.val(temp);
template.remove();

if(options.callback) options.callback(box);

return false;
});
};

function cleanBtnEvent(){
time_wrap.on('click', '#Hunter_clean_btn', function(event){
event.preventDefault();
event.stopPropagation();

box.val('');
template.remove();
if(options.callback) options.callback(box);
return false;
});
};
};

$.fn.extend({
hunterTimePicker: function (options) {
options = $.extend({}, options);
this.each(function () {
new $.hunterTimePicker(this, options);
});
return this;
}
});
})(jQuery);

原文作者：祈澈姑娘

原文連結： ofollow,noindex">https://www.jianshu.com/u/05f416aefbe1 創作不易，轉載請告知

90後前端妹子，愛程式設計，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

一個簡易的選擇小時（時分秒）的外掛

您可能也會喜歡…