timepicker时间选择控件 时:分:秒

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 */

最后

以上就是自觉宝贝为你收集整理的timepicker时间选择控件 时:分:秒的全部内容，希望文章能够帮你解决timepicker时间选择控件 时:分:秒所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。