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）
Jquery时间段选择器的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery（选择器）
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
随机推荐
- IoC容器Autofac正篇之解析获取(五)
解析获取的方式有如下几种: Resolve class Program { static void Main(string[] args) { var builder = new ContainerB ...
- C#遍历获取枚举的值,名和属性
获取: Type type = typeof(ParamServiceType); var values = Enum.GetValues(type); ; i < values.Length; ...
- 仿QQ好友列表界面的实现
TableView有2种style:UITableViewStylePlain 和 UITableViewStyleGrouped. 但是QQ好友列表的tableView给人的感觉似乎是2个style ...
- iOS之本地推送（前台模式与后台模式）
#import "AppDelegate.h" #import "GlobalDefine.h" @interface AppDelegate () @end ...
- EL表达式在JS中取出来打印[object HTMLDivElement]的问题
今天做项目的时候,要在JS中获取请求参数中的 值,想直接用 ${param.tabName}获取,结果console.debug()打印出来,居然是 [object HTMLDivElement] ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- 关于 jQuery中 function( window, undefined ) 写法的原因
今天在读 jQuery 源码的时候,发现下面的写法: (function(window,undefined){ ...// code goes here })(window); window 作为参数 ...
- [转]mac下Python升级到指定的版本
以2.7升级到3.3为例1.删除原版本a)删除系统库中的版本sudo rm -R /System/Library/Frameworks/Python.framework/Versions/2.7 b) ...
- python笔记之常用模块用法分析
python笔记之常用模块用法分析 内置模块(不用import就可以直接使用) 常用内置函数 help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像 ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...