Jquery时间段选择器
效果(有给小bug, 在时间的大小比较上.):
HTML:
<html> <head> <title>测试DatePicker</title> <link href="timePicker.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="timePicker.js"></script> <script type="text/javascript"> $(function () { $(".TimeSelect").timePicker({ data: '{"items":[{"title":"上午","times":[{"time":"08:00"},{"time":"08:30"},{"time":"09:00"},{"time":"09:30"},{"time":"10:00"},{"time":"11:00"},{"time":"11:30"},{"time":"12:00"},{"time":"12:30"}]},{"title":"中午","times":[{"time":"12:30"},{"time":"13:00"},{"time":"13:30"},{"time":"14:00"}]},{"title":"下午","times":[{"time":"14:00"},{"time":"14:30"},{"time":"15:00"},{"time":"15:30"},{"time":"16:00"},{"time":"16:30"},{"time":"17:00"},{"time":"17:30"},{"time":"18:00"}]},{"title":"晚上","times":[{"time":"18:00"},{"time":"18:30"},{"time":"19:00"},{"time":"19:30"},{"time":"20:00"},{"time":"20:30"},{"time":"21:00"},{"time":"21:30"},{"time":"22:00"},{"time":"22:30"},{"time":"23:00"},{"time":"23:30"},{"time":"00:00"},{"time":"00:30"},{"time":"01:00"},{"time":"01:30"},{"time":"02:00"},{"time":"02:30"},{"time":"03:00"},{"time":"03:30"},{"time":"04:00"},{"time":"04:30"},{"time":"05:00"},{"time":"05:30"},{"time":"06:00"},{"time":"06:30"},{"time":"07:00"},{"time":"07:30"},{"time":"08:00"}]}]}', customerValidation: function (value) { return true; }, validationFail: function (result, obj) { alert(result); $(obj).val(''); } }); $("#testTime").val(new Date().getTime()); }); </script> </head> <body> <input type="text" id="testTime" /> <input id="startTime" smallerthan="endTime" type="text" class="TimeSelect" style="margin-left: 100px; margin-top: 100px;" /> <input id="endTime" largerthan="startTime" type="text" class="TimeSelect" style="margin-left: 10px; margin-top: 100px;" /> </body> </html>
CSS
div.timePicker, div.timeCell, div.timeTitle, div.timeCellEmpty {
border-style: solid;
border-color: #bbbbbb;
}
div.timePicker {
width: 408px;
width: 410px\9;
border-width: 0px 2px 2px 0px;
background-color: #eeeeee;
font-size: 12px;
}
div.timeCell, div.timeCellEmpty {
width: 45px;
width: 51px\9;
}
div.timeCell, div.timeTitle, div.timeCellEmpty {
border-width: 2px 0px 0px 2px;
padding: 2px;
line-height: 15px;
text-align: center;
}
div.timePicker div.timeCell, div.timeTitle, div.timeCellEmpty {
float: left;
display: inline;
}
div.timeTitle {
width: 402px;
width: 408px\9;
background-color: #eeeeee;
}
.pickerOn {
background-color: #b6ff00;
}
/*
.timeCell:hover {
background: none repeat scroll 0 0 #ffd800;
cursor: pointer;
}*/
.timeCell_hover {
background: none repeat scroll 0 0 #ffd800;
cursor: pointer;
}
Js
(function ($) { $.fn.timePicker = function (options) { var $this = $(this); var reg = new RegExp('^\\d{1,2}:\\d{1,2}$|^$'); var regHour = new RegExp('^\\d{1,2}'); var regMinite = new RegExp('\\d{1,2}$'); var timeTable = "<div class='timePickerArea' style='position: absolute;display: none;'><div class='timePicker'>"; $this.attr("maxlength", "5"); var defaults = { fadeInSpeed: 200, fadeOutSpeed: 100, data: '{}', customerValidation: function (value) { return true; }, validationFail: function (result) { }, afterConfirm: function () { } }; var opts = $.extend(defaults, options); var event = { validationFail: opts.validationFail, afterConfirm: opts.afterConfirm }; var data = eval('(' + opts.data + ')'); var rowCount = 0; var rowTemp = 0; $(data.items).each(function (i, item) { rowCount = rowCount + 1; timeTable = timeTable + '<div class="timeTitle">' + item.title + '</div>'; $(item.times).each(function (j, time) { rowTemp = rowTemp + 1; timeTable = timeTable + '<div class="timeCell">' + time.time + '</div>'; }); rowCount = rowCount + Math.floor(rowTemp / 8); if ((rowTemp % 8) != 0) { rowCount = rowCount + 1; } for (var r = 0; r < 8 - (rowTemp % 8) ; r++) { timeTable = timeTable + '<div class="timeCellEmpty"> </div>'; } rowTemp = 0; }); timeTable = timeTable + '</div></div>' $(timeTable).insertAfter($this[0]); $("div.timePickerArea div.timePicker").height(21 * rowCount); $("div.timePickerArea div.timePicker div.timeCell").mouseover(function () { $(this).addClass("timeCell_hover"); }).mouseout(function () { $(this).removeClass("timeCell_hover"); }); $this.bind("focus", function () { show(this); }); $this.bind("blur", function () { hide(this); }); var failCode = 0; var failItem = null; for (var i = 0; i < $this.length; i++) { var temp = validation($($this[i])); if (temp > failCode) { failCode = temp; failItem = $this[i]; } } if (failItem != null) { $(failItem).focus(); } //显示 function show(obj) { $("div.timePickerArea div.timePicker div.timeCell").unbind("click").click(function () { var v = $(this).html(); $(obj).val(v); event.afterConfirm(); hide(obj); }); $("div.timePickerArea").css({ top: $(obj).offset().top + $(obj).height() + 10, left: $(obj).offset().left }).stop(true, true).fadeIn(opts.fadeInSpeed); $("div.timePickerArea").mouseover(function () { $(obj).unbind("blur"); }).mouseout(function () { $(obj).bind("blur", function () { hide(this); }); }); $(obj).addClass("pickerOn"); } //隐藏 function hide(obj) { validation(obj); $("div.timePickerArea").stop(true, true).fadeOut(opts.fadeOutSpeed); $(obj).removeClass("pickerOn"); } //验证接口 function validation(obj) { var value = $(obj).val(); if (!formatValidation(value)) { callValidationFail("'" + value + "'格式错误", obj); return 3; } if (!baseValidation(value)) { callValidationFail("'" + value + "'数据错误", obj); return 2; } //大小范围验证 var smaller = $(obj).attr("smallerthan"); if (typeof (smaller) != "undefined") { if ($("#" + smaller).length > 0) { var pValue = $("#" + smaller).val(); if (!formatValidation(pValue)) { callValidationFail("'" + pValue + "'格式错误", obj); return 1; } if (!baseValidation(value)) { callValidationFail("'" + pValue + "'数据错误", obj); return 1; } if (value.length == 0 || pValue.length == 0) return 0; if (compare(value, pValue) != -1) { callValidationFail("'" + value + "'不能晚于'" + pValue + "'", obj); return 1; } } } var largerthan = $(obj).attr("largerthan"); if (typeof (largerthan) != "undefined") { if ($("#" + largerthan).length > 0) { var pValue = $("#" + largerthan).val(); if (!formatValidation(pValue)) { callValidationFail("'" + pValue + "'格式错误", obj); return 1; } if (!baseValidation(value)) { callValidationFail("'" + pValue + "'数据错误", obj); return 1; } if (value.length == 0 || pValue.length == 0) return 0; if (compare(value, pValue) != 1) { callValidationFail("'" + value + "'不能早于 " + pValue + "'", obj); return 1; } } } return 0; } //格式验证 function formatValidation(value) { return reg.test(value); } //时间验证 function baseValidation(value) { var result = true; var hour = 0; var minite = 0; if (result && value.length > 0) { hour = getHour(value); minite = getMinite(value); if (isNaN(hour) || isNaN(minite)) { result = false; } else { if (hour > 23 || hour < 0 || minite > 59 || minite < 0) { result = false; } } } return result; } //时间大小判断 function compare(v1, v2) { var hour = getHour(v1); var minite = getMinite(v1); var pHour = getHour(v2); var pMinite = getMinite(v2); if (hour > pHour) return 1; if (hour == pHour && minite > pMinite) return 1; if (hour == pHour && minite == pMinite) return 0; if (hour < pHour) return -1; if (hour == pHour && minite < pMinite) return -1; } //获取小时值 function getHour(value) { var hourStr = value.match(regHour); return parseInt(hourStr); } //获取分钟值 function getMinite(value) { var miniteStr = value.match(regMinite); return parseInt(miniteStr); } //触发事件 function callValidationFail(result, obj) { event.validationFail(result, obj); } } })(jQuery);
源码: http://yunpan.cn/cgsuDewUcaLMR（提取码：cdcb）
