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 ...
随机推荐
- 8. 冒泡法排序和快速排序（基于openCV）
一.前言 主要讲述冒泡法排序和快速排序的基本流程,并给出代码实现,亲测可用. 二.冒泡法排序 冒泡法排序主要是将相邻两个值比较,把小的向前冒泡,大的向后沉淀,时间复杂度为O(n2).主要思想如下: 分 ...
- [IDEA学习笔记][keymap]
一个总站: http://www.youmeek.com/ 常用的快捷键keymap 提示: ctrl+N:快速打开一个类 Ctrl+P 方法参数提示显示 Ctrl+J 提示自定义模板 Ctrl+O ...
- CentOS6.5 --安装orale 11g(下)
(7) 建立Oracle系统用户和安装目录 创建一个主组oinstall和一个副组dba.命令如下: groupadd oinstall groupadd dba 创建oracle安装文件 m ...
- 调试Linq的时候获得相对应的SQL
(query as System.Data.Objects.ObjectQuery).ToTraceString()
- Asp.net文件缓存依赖
Asp.net文件缓存依赖 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- Eclipse error：Access restriction
报错:Access restriction: The method decodeBuffer(String) from the type CharacterDecoder is not accessi ...
- js渲染的3d玫瑰
参看下面链接: 程序员最美情人节礼物:JS渲染的3D玫瑰
- Web框架-Django基础
一.django简介 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
- Logging in Java
Common logging: Log4j1仅仅作为一个实际的日志框架,commons-logging作为门面,统一各种日志框架的混乱格局 基本的commons logging Dependency: ...
- JSTL: empty 可以减少很多繁冗的判空(转)
${empty student.name }Empty是判空为空返回的真不为空返回的是假 ${(empty student.name)? '空' : '非空'} <c:if test=" ...