时间选择器，结合jquery使用

fsrTip.js

</pre><pre code_snippet_id="1695564" snippet_file_name="blog_20160524_2_5454085" name="code" class="javascript">$(function () {
    $.fn.fsrTip = function (options) {
        var defaults = {
            Event: 'mouseover',
            Type: '24',
            SZ: {
                h: ["1", "2", "3"],
                m: ["0", "30"]
            }
        };

        var options = $.extend(defaults, options); //合并  将defaults 与 options合并
        var h = "";
        var mi = ""
        //默认24小时制
        if (options.Type == "24") {
            for (var i = 1; i <= options.Type; i++) {
                if (i < 10) {
                    h += "<option>0" + i + "</option>";
                }
                else {
                    h += "<option>" + i + "</option>";
                }
            }
            for (var i = 0; i < 60; i++) {
                if (i < 10) {
                    mi += "<option>0" + i + "</option>";
                }
                else {
                    mi += "<option>" + i + "</option>";
                }
            }
        }
        //默认12小时制
        else if (options.Type == "12") {
            for (var i = 1; i <= options.Type; i++) {
                if (i < 10) {
                    h += "<option>0" + i + "</option>";
                }
                else {
                    h += "<option>" + i + "</option>";
                }
            }
            for (var i = 0; i < 60; i++) {
                if (i < 10) {
                    mi += "<option>0" + i + "</option>";
                }
                else {
                    mi += "<option>" + i + "</option>";
                }
            }
        }
        //自定义
        else if (options.Type == "false") {
            for (var i = 0; i < options.SZ.h.length; i++) {
                if (options.SZ.h[i] < 10) {
                    h += "<option>0" + options.SZ.h[i] + "</option>";
                }
                else {
                    h += "<option>" + options.SZ.h[i] + "</option>";
                }
            }
            for (var i = 0; i < options.SZ.m.length; i++) {
                if (options.SZ.m[i] < 10) {
                    mi += "<option>0" + options.SZ.m[i] + "</option>";
                }
                else {
                    mi += "<option>" + options.SZ.m[i] + "</option>";
                }
            }
        }


        var $this = $(this);
        var id = $this.attr("id");
        var qd = "<input id='" + id + "_qd' type='button' value='确定' />"
        $('body').prepend("<div class='user' style='width:165px;height:54px;border:0;margin:0;padding:0;font-size:12px;font-weight:normal;text-align:left;color:#000;position:absolute;left:0;top:0; background:#abc; display:none;'><center>小时:<select id='h'>" + h + "</select>分钟:<select id='mi'>" + mi + "</select>:00</br>  " + qd + "  <input id='back' type='button' value='取消' /></center></div>");

        var $btip = $(".user");
        if ($btip.length > 1) {
            $($btip[1]).remove();
        }
        var timer = null;
        $("#" + id + "_qd").live("click", function () {
            $this.val($("#h").val() + ":" + $("#mi").val() + ":00")
        })
        $("#back").live("click", function () {
            $btip.remove();
        })
        $this.die().live(options.Event, function () {
            var offset = $(this).offset();
            var h = $this.height();
            var w = $this.width();
            $btip.css({
                "left": offset.left,
                "top": offset.top + h + 5
            }).show();
        }).live('mouseout', function () {
            timer = setTimeout(function () {
                $btip.remove();
                clearTimeout(timer);
            }, 2000)
        });
        $btip.die().live('mousemove', function () {
            clearTimeout(timer);
            $(this).show();
        }).live('mouseout', function () {
            timer = setTimeout(function () {
                $btip.remove();
                clearTimeout(timer);
            }, 2000)
        });
    }
});

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>时间选择器</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="fsrTip.js" type="text/javascript"></script>
</head>
<body>

<center>
   <table width="100%">
    <tr>
        <td align="right"></td>
        <td align="left">用到服务器控件的text的时候  加上  AutoPostBack="true"
        </td>
        <td></td>
    </tr>
    <tr>
        <td align="right">开始时间</td>
        <td align="left"><input id="txt_morning_date_start" type="text"/>
        </td>
        <td></td>
    </tr>
    <tr>
        <td align="right">结束时间</td>
        <td align="left"><input id="txt_morning_date_end" type="text" /></td>
        <td></td>
    </tr>
</table>
</center>

</body>
<script type="text/javascript">
     $(document).ready(function () {
 $("#txt_morning_date_start").click(function () {
                    $("#txt_morning_date_start").fsrTip({
                        Event: 'click',   //事件
                        Type: "24", //小时制 24 12 false 当为false的时候自定义 如果写的是12 24 则SZ:{}即可
                        SZ: {
                           
                        }            
                    });
                })
                $("#txt_morning_date_end").click(function () {
                    $("#txt_morning_date_end").fsrTip({
                        Event: 'click',
                        Type: "24",
                        SZ: {
                            
                        }   
                    });
                })
        });
    </script>
</html>