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

最新推荐文章于 2024-04-16 19:54:31 发布

kevin.浩

最新推荐文章于 2024-04-16 19:54:31 发布

阅读量1.8k

点赞数

分类专栏：控件 JavaScript 文章标签： jquery html css javascript

本文链接：https://blog.csdn.net/freewings1/article/details/106351470

版权

这篇博客介绍了如何创建一个timepicker时间选择控件，包括控件的结构、使用方法，并展示了主要的jQuery插件代码和CSS样式。

摘要由CSDN通过智能技术生成

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.rendPickB