一个jQuery实现的简单的时分秒插件

最近需要用到一个时分秒的插件，搜索了一下，没有找到合适的。就自己动手写了一个。
实现的原理就是点击输入框的时候，会弹出动态生成的选择时分秒的div，点击确定按钮会读取选择的时分秒写入输入框中，然后动态移除div。代码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时分秒</title>
        <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .time-label{
                position: relative;
            }
            .contents{
                position: absolute;
                left: 0;
                top: 30px;
                z-index: 10;
                background-color: red;
            }
            .time-ipt{
                width: 200px;
                height: 20px;
                border-radius: 3px;
            }
        </style>
    </head>
    <body>
        <label class="time-label">
            <input class='time-ipt' type="text"  readonly data-len=3 />
        </label>
    </body>
    <script type="text/javascript">
        $('.time-label').on('click','.time-ipt',function(len){
            //参数lenth为时间长度，如果时分秒则len==3，如果时分则len==2
            var len = $(this).attr('data-len')
            var height = $(this).height() + 10;
            var width = $(this).width() + 30;
            //动态生成选择器
            var _str = ''
            _str += "<div class='contents'><select class='hour' name='hour'>";
            for (h = 0; h <= 9; h++) {
                _str += '<option value=0' + h + '>0' + h + '</option>';
            }
            for (h = 10; h <= 23; h++) {
                _str += '<option value=' + h + '>' + h + '</option>';
            }
            _str += "</select>时<select class='minute' name='minute'>";
            for (m = 0; m <= 9; m++) {
                _str += '<option value=0'+ m + '>0' + m + '</option>';
            }
            for (m = 10; m <= 59; m++) {
                _str += '<option value='+ m + '>' + m + '</option>';
            }
            //
            if(len == 3){
                _str += "</select>分<select class='second' name='second'>";
                for (s = 0; s <= 9; s++) {
                _str += '<option value=0'+ s + '>0' + s + '</option>';
                }
                for (s = 10; s <= 59; s++) {
                    _str += '<option value='+ s + '>' + s + '</option>';
                }
                _str += "</select>秒 <button class='time-btn'>确定</button></div>";
            }else if(len == 2){
                _str += "</select>秒<button class='time-btn'>确定</button></div>";
            }
            $(_str).insertAfter($(this));
            $(this).siblings('.contents').css('top',height + 'px').css('width',width + 'px');
            $(this).attr('disabled',true);
        })
        
            $(document).ready(function(){
            //点击确定按钮给时间框赋值，然后删除动态生成的div
                $('.time-label').on('click','.time-btn',function(event,len){
                    var len = $(this).parent().siblings('.time-ipt').attr('data-len');
                    if(len == 3){
                        var h = $(this).siblings('.hour').val();
                        var m = $(this).siblings('.minute').val();
                        var s = $(this).siblings('.second').val();
                        var nowtime = h + ':' + m + ':' + s 
                        $(this).parent().siblings('.time-ipt').val(nowtime);
                    }else if(len == 2){
                        var h = $(this).siblings('.hour').val();
                        var m = $(this).siblings('.minute').val();
                        var nowtime = h + ':' + m 
                        $(this).parent().siblings('.time-ipt').val(nowtime);
                    }
                    $(this).attr('disabled',true);
                    $(this).parent().siblings('.time-ipt').attr('disabled',false);
                    $(this).parent().remove();
                    return false;
                })
            
            });
    </script>
</html>
经测试，兼容各大主流浏览器。