$(function () {
    //选择时间的文本框中加class="timeSelectSingle";
    $('.timeSelectSingle').click(function () {
        $('#timeSelectSingle_div').remove();

        var hourOpts = '';
        for (i = 0; i < 24; i++) hourOpts += '<option>' + i + '</option>';
        var minuteOpts = '<option>00</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option>';

        var html = $('<div id="timeSelectSingle_div"><select id="timeSelectSingle_a">' + hourOpts +
			'</select>:<select id="timeSelectSingle_b">' + minuteOpts +
			'</select>&nbsp;<input type="button" value="确定" id="timeSelectSingle_btn" />&nbsp;<input type="button" value="清除" id="timeSelectSingle_btnclear" /></div>')
			.css({
			    "position": "absolute",
			    "z-index": "999",
			    "padding": "5px",
			    "border": "1px solid #AAA",
			    "background-color": "#FFF",
			    "box-shadow": "1px 1px 3px rgba(0,0,0,.4)"
			})
			.css({ "left": $(this).offset().left })
			.css({ "top": $(this).offset().top + $(this).get(0).offsetHeight })
			.click(function () { return false });

        // 如果文本框有值
        var v = $(this).val();
        if (v) {
            v = v.split(/:|-/);
            html.find('#timeSelectSingle_a').val(v[0]);
            html.find('#timeSelectSingle_b').val(v[1]);
        }
        // 点击确定的时候
        var pObj = $(this);
        html.find('#timeSelectSingle_btn').click(function () {
            var str = html.find('#timeSelectSingle_a').val() + ':'
				+ html.find('#timeSelectSingle_b').val();
            pObj.val(str);
            $('#timeSelectSingle_div').remove();
        });
        html.find('#timeSelectSingle_btnclear').click(function () {
            var str = "";
            pObj.val(str);
            $('#timeSelectSingle_div').remove();
        });
        $(this).after(html);
        return false;
    });
    //
    $(document).click(function () {
        $('#timeSelectSingle_div').remove();
    });
    //
});