html时间选择器设置最小值,时间选择器(timepicker)

可以使用Slider拖动选择，也可以使用timespinner改变时间，或者手工填写。

自动判断位置

效果：

源码：

$('.time').timepicker();

//时间选择器，依赖于jquery.easyui

(function ($) {

$.fn.extend({

timepicker: function () {

$(this).each(function () {

var $this = $(this);

$(this).click(function () {

if (!document.getElementById("time_container")) {

$("body").append(createDiv($this.val()));

$('#timeSlider_Hour,#timeSlider_Minute').slider();

$('#time_timespinner').timespinner({ onSpinUp: $.fn.timepicker.timepicker_showTime2, onSpinDown: $.fn.timepicker.timepicker_showTime2 });

$("#time_container table,#time_container table tr,#time_container table td").css({

"background-color": "transparent",

margin: '0px'

})

} else {

var HHmm = $this.val();

if (HHmm == '') HHmm = '00:00';

var HH = HHmm.split(':')[0] * 1;

var mm = HHmm.split(':')[1] * 1;

$('#time_timespinner').timespinner('setValue', HHmm);

$.fn.timepicker.timepicker_showTime2();

}

$('body').bind("mousedown", $.fn.timepicker.timepicker_onMousedown);

$("input#time_btnOK").unbind('click').click(function () {

$this.val($('#time_timespinner').timespinner('getValue')).change();

$("#time_container").hide();

});

var pos = getPosition($this);

$("#time_container").css({

position: "absolute",

"background-color": "#E3E3E3",

border: "1px solid #777777",

top: pos.top, // $this.offset().top + $this.outerHeight(),

left: pos.left //$this.offset().left

}).show();

})

});

//私有函数,返回元素距离窗口各边距离

function getDistance(obj) {

if (!obj instanceof jQuery) {

obj = $(obj);

}

var distance = {};

distance.top = (obj.offset().top - $(document).scrollTop());

distance.bottom = ($(window).height() - distance.top - obj.outerHeight());

distance.left = (obj.offset().left - $(document).scrollLeft());

distance.right = ($(window).width() - distance.left - obj.outerWidth());

return distance;

}

function getPosition(obj) {

if (!obj instanceof jQuery) {

obj = $(obj);

}

var pos = {};

var containerH = $('#time_container').outerHeight();

var containerW = $('#time_container').outerWidth();

var distance = getDistance(obj);

if (distance.bottom < containerH && distance.top > containerH) {

pos.top = obj.offset().top - containerH;

} else {

pos.top = obj.offset().top + obj.outerHeight();

}

if (distance.right < containerW && distance.left > containerW) {

pos.left = obj.offset().left - containerW + obj.outerWidth();

} else {

pos.left = obj.offset().left;

}

return pos;

}

//私有函数，用于创建选择器html

function createDiv(HHmm) {

if (HHmm == '') HHmm = '00:00'; //如果当前时间为空则取00:00

var HH = HHmm.split(':')[0] * 1;

var mm = HHmm.split(':')[1] * 1;

var sb = "

";

sb = sb + " ";

sb = sb + "

";

sb = sb + "

sb = sb + "

";

sb = sb + "

小时:";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

分钟:";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

sb = sb + " ";

sb = sb + " ";

sb = sb + "

";

sb = sb + "

";

sb = sb + "

";

return sb;

}

//公开函数，当小时或者分钟的Slider改变时更新timspinner

$.fn.timepicker.timepicker_showTime = function () {

var h = parseInt($('#timeSlider_Hour').slider('getValue'));

var m = parseInt($('#timeSlider_Minute').slider('getValue'));

if (h < 10) h = '0' + h;

if (m < 10) m = '0' + m;

$('#time_timespinner').timespinner('setValue', h + ":" + m);

}

//公开函数，当单击文档时检测是否隐藏当前选择框

$.fn.timepicker.timepicker_onMousedown = function (event) {

var target = event.target || event.srcElement;

if (!(target.id == "time_container" || $(target).parents("#time_container").length > 0)) {

$("#time_container").hide();

$('body').unbind("mousedown", $.fn.timepicker.timepicker_onMousedown);

}

}

//公开函数，当timespinner改变时设置小时和分钟Slider

$.fn.timepicker.timepicker_showTime2 = function () {

var HHmm = $('#time_timespinner').timespinner('getValue');

var HH = HHmm.split(':')[0] * 1;

var mm = HHmm.split(':')[1] * 1;

$('#timeSlider_Hour').slider('setValue', HH);

$('#timeSlider_Minute').slider('setValue', mm);

}

}

})

})(jQuery);