首页 > 代码库 > Jquery时间段选择器
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 = http://www.mamicode.com/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 =http://www.mamicode.com/ $(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 = http://www.mamicode.com/$("#" + 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 = http://www.mamicode.com/$("#" + 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）
Jquery时间段选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。