index.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Date Select</title>
<script language="javascript" src="jquery-2.1.3.min.js"></script>
<script language="javascript" src="jquery.timeSelect.js"></script>
<script language="javascript">
//调用部分
$.timeSelect("#date");
</script>
</head>
<body>
<input type="text" id="date" value="00 : 00" style="width: 50px; text-align: center;" /><br />
</body>
</html>
js
–
//插件部分
$.timeSelect = function (ele) {
$(function () {
//工具函数
var fix = function (num, length) {
return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
}
//控件定义
var win = $('<div style="width: 100%; height: 100%; opacity: 0; position: absolute; z-index: 10; left: 0px; top: 0px; display: none;"></div>');
var can = $('<div style="width: 105px; padding: 20px; opacity: 0.8; background-color: #aaa; border-radius: 10px; position: absolute; z-index: 11; display:none;"></div>');
var str = '<select>';
for (var i=0;i<24;++i)
str += '<option value="' + i + '">' + fix(i, 2) + '</option>';
str += '</select>';
var hour = $(str);
str = '<select id="liuyulong" disabled>';
for (var i=0;i<60;++i)
str += '<option value="' + i + '">' + fix(i, 2) + '</option>';
str += '</select>';
var minute = $(str);
var e = $(ele);
//事件定义
win.on("click", function (event) {
win.hide();
can.hide();
});
can.on("click", function (event) {
event.stopPropagation();
});
hour.on("change", function (event) {
event.stopPropagation();
e.val(fix(hour.val(), 2) + " : " + fix(minute.val(), 2));
});
minute.on("change", function (event) {
event.stopPropagation();
e.val(fix(hour.val(), 2) + " : " + fix(minute.val(), 2));
});
e.on("click", function () {
can.css({
left : e.offset().left + "px",
top : (e.offset().top + 20) + "px"
});
win.show();
can.show();
});
//控件绑定
$(document.body).append(win)
.append(can.append(hour)
.append($("<font> : </font>"))
.append(minute));
//$("#liuyulong").attr("disabled", "disabled");
});
};