timepicker时间选择控件1.0
结构：
<!--html 部分--><div class="timepicker-box" style="width:120px;"><input type="text" class="time-ipt" style="width:120px;" value="10:00"></div><script src="js/jquery-1.12.3.min.js"></script><script src="js/sfs-timepicker.js"></script>使用方法：
//javascript:
$(function () {$('.timepicker-box').timepicker({'format': 'h:mm',afterChange: function (time) {console.log(time);}});});
插件主要代码:
//插件主要代码:
/*** Created by Kevin on 2020/5/27.*/
/*** * html 部分结构为 * <div class="timepicker-box">* <input type="text" class="time-ipt">* </div>* * css 部分单独引入* * 使用方法 $.fn.timePicker(option);* * @param afterChange(arg) function 确认后回调 arg 为回传的 time* * 时间选择控件对象曝露 在 $(ele) 下的data属性对象的 _timepicker 属性中*$(ele).data('_timerpicker').update();可以更新 时间选择控件的 默认时间 ** v1.0,后续再扩展。*/
; (function (factory) {if (typeof define === 'function' && define.amd) {define([], factory);}else if (typeof exports === 'object') {module.exports = factory();}else {factory();}
}(function () {function plugin(ele, options) {var _default = {format: 'hh',afterChange: function (time) {console.log('afterChange!!:' + time);}}this.settings = $.extend({}, options);this.ishh = !!/^h{1,2}$/i.exec(this.settings.format) || !this.settings.format;this.ishh_mm = !!/^h{1,2}:m{1,2}$/i.exec(this.settings.format)this.ishh_mm_ss = !!/^h{1,2}:m{1,2}:s{1,2}$/i.exec(this.settings.format);this.ele = ele;this.init();}plugin.prototype.init = function () {this.rendPickBox();this.timerpickEvent();}plugin.prototype.rendPickBox = function () {var ele = this.ele;var time_box_con = '<span class="time-h">00</span>', picker_box_con = '<div class="picker-item item-h"></div>';if (this.ishh_mm) {time_box_con = '<span class="time-h">00</span> :\<span class="time-m">00</span>';picker_box_con = '<div class="picker-item item-h"></div>\<div class="picker-item item-m"></div>';} else if (this.ishh_mm_ss) {time_box_con = '<span class="time-h">00</span> :\<span class="time-m">00</span>\<span class="time-s">00</span>';picker_box_con = '<div class="picker-item item-h"></div>\<div class="picker-item item-m"></div>\<div class="picker-item item-s"></div>';}this.timePicker = $('<div class="time-picker">\<div class="picker-title">\<span class="picker-txt">时间选择</span>\<a class="picker-entrue-btn" href="javascript:;">确定</a>\</div>\<div class="picker-content">\<div class="time-box">\'+ time_box_con + '\</div>\<div class="picker-box">\'+ picker_box_con + '\</div>\</div>\</div>');this.timeBox = this.timePicker.find('.time-box');this.pickerBox = this.timePicker.find('.picker-box');var hHtml = msHtml = '';for (var i = 0; i < 24; i++) {hHtml += '<span>' + (i > 9 ? i : '0' + i) + '</span>'}for (var i = 0; i < 60; i++) {msHtml += '<span>' + (i > 9 ? i : '0' + i) + '</span>'}$(ele).append(this.timePicker).css({'position': 'relative',});this.timePicker.find('.item-h').append(hHtml);this.timePicker.find('.item-m,.item-s').append(msHtml);this.update();}plugin.prototype.update = function () {var ele = this.ele;this.hh = this.mm = this.ss = '00';var timeiptArr = [];var timeiptVal = $(ele).find('.time-ipt').val();if (!!timeiptVal) {timeiptArr = $(ele).find('.time-ipt').val().split(':');this.hh = timeiptArr[0];this.timeBox.find('.time-h').text(this.hh)} else {return;}if (this.ishh_mm || this.ishh_mm_ss) {this.mm = timeiptArr[1];this.timeBox.find('.time-m').text(this.mm)}if (this.ishh_mm_ss) {this.ss = timeiptArr[2];this.timeBox.find('.time-s').text(this.ss)}}plugin.prototype.timerpickEvent = function () {var _self = this;var ele = _self.ele;_self.timePicker.on('click', '.time-box span', function (e) {var e = e || window.event;var index = $(this).index();var txt = $(this).text();_self.pickerBox.find('.picker-item').eq(index).toggleClass('item-current').siblings().removeClass('item-current');_self.pickerBox.find('.picker-item').eq(index).find('span').each(function () {if (this.innerText == txt) {$(this).addClass('cur').siblings().removeClass('cur');}})}).on('click', '.picker-box span', function (e) {var e = e || window.event;var txt = $(this).text();var index = $(this).parent().index();$(this).addClass('cur').siblings().removeClass('cur');$(this).parent().removeClass('item-current');_self.timeBox.find('span').eq(index).text(txt);});$(ele).on('click focus', '.time-ipt', function () {$(this).siblings('.time-picker').show();}).on('click', '.picker-entrue-btn', function (e) {var e = e || window.event;e.stopPropagation()_self.time = _self.timeBox.find('.time-h').text();if (_self.ishh_mm || _self.ishh_mm_ss) {_self.time += ':' + _self.timeBox.find('.time-m').text();}if (_self.ishh_mm_ss) {_self.time += ':' + _self.timeBox.find('.time-s').text();}_self.timePicker.siblings('.time-ipt').val(_self.time).text(_self.time);_self.timePicker.hide();_self.settings.afterChange(_self.time);});$('body').on('click', function (e) {var e = e || window.event;var tag = e.target;var overPickerBox = $(tag).closest('.picker-box,.time-box').length == 1;var overTimePickerBox = $(tag).closest('.timepicker-box').length == 1;$('.time-picker').hide();if (overTimePickerBox) {$(tag).closest('.timepicker-box').find('.time-picker').show();}if (!overPickerBox) {$(ele).find('.picker-box .item').removeClass('item-current');}});}$.fn.timepicker = function (options) {var ele = this;var timepick = options;$(ele).each(function () {if (!$(this).data('time-picker')) {$(this).data('time-picker', timepick);}if (!$(this).data('_time-picker')) {$(this).data('_time-picker', new plugin(this, options));}});}}))
css 代码：
.time-picker {position: absolute;background: #fff;box-shadow: 0 0 5px 0px #ccc;padding: 10px 20px;border-radius: 5px;border: 1px solid #ddd;color: #333;top: 100%;margin-top: 2px;z-index: 99;display: none; }
.time-picker .picker-title {border-bottom: 1px solid #ccc;position: relative;width: 150px; }
.time-picker .picker-title .picker-txt {line-height: 2em;font-weight: bold;font-size: 16px; }
.time-picker .picker-title .picker-entrue-btn {line-height: 24px;background-color: #09f;width: 60px;font-size: 12px;color: #fff;text-decoration: none;text-align: center;border-radius: 3px;display: inline-block;position: absolute;right: 0;top: 3px; }
.time-picker .picker-title .picker-entrue-btn:active {background-color: #06f; }
.time-picker .picker-content {padding: 10px 0;width: 150px; }
.time-picker .time-box {text-align: center; }
.time-picker .time-box span {display: inline-block;background-color: #f1f2f3;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 16px;cursor: pointer;color: #09f;font-weight: bold; }
.time-picker .picker-box {position: absolute;left: 0;top: 90px;width: 100%; }
.time-picker .picker-box .picker-item {padding: 5px;border: 1px solid #ccc;height: 100%;display: none;overflow: hidden;transition-duration: 1s;opacity: .5;margin: 0 auto;background: #fff;box-sizing: content-box; }
.time-picker .picker-box .picker-item.item-current {display: block;opacity: 1;margin-top: 0; }
.time-picker .picker-box .picker-item.item-h {width: 144px; }
.time-picker .picker-box .picker-item.item-m, .time-picker .picker-box .picker-item.item-s {width: 288px; }
.time-picker .picker-box span {width: 22px;height: 22px;display: block;float: left;text-align: center;line-height: 22px;font-size: 12px;background-color: #f1f2f3;margin: 1px;cursor: pointer; }
.time-picker .picker-box span:hover, .time-picker .picker-box span.cur {background-color: #09f;color: #fff; }/*# sourceMappingURL=sfs-timepicker.css.map */
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
