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 ...
随机推荐
- oracle开启/关闭归档模式
1.改变非归档模式到归档模式: 1)SQL> conn / as sysdba (以DBA身份连接数据库) 2)SQL> shutdown immediate;(立即关闭数据库) 3)SQ ...
- [HeadFist-HTMLCSS学习笔记][第五章认识媒体]
图像格式 PNG 多种颜色透明 无损压缩 PNG-8,PNG-16,PNG-32 多用于logo GIF 动画 256色 无损 JPEG 不能透明 多用于照片 img URL能插入 alt属性 = 如 ...
- 一些基础的.net用法
一.using 用法 using 别名设置 using 别名 = System.web 当两个不同的namespace里有同名的class时.可以用 using aclass = namespace1 ...
- 鼠标滚轮(mousewheel)和DOMMouseScroll事件
IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...
- (转)swfobject.js 详细解说
一直想对这个应用做个总结,今天偶然百度到这个效果,为此做个笔记. 用这个js的好处: 1.IE中没有讨厌的虚框问题了.2.提供了完善的版本检测功能,如果版本不够则显示其他东西,比如图片或文字.3.易于 ...
- XML格式导出Excel
下面介绍一种导出Excel的方法: 此方法不需要在服务器上安装Excel,采用生成xml以excel方式输出到客户端,可能需要客户机安装excel,所以也不会有乱七八糟的权限设定,和莫名其妙的版本问题 ...
- 驱动编程思想之初体验 --------------- 嵌入式linux驱动开发之点亮LED
这节我们就开始开始进行实战啦!这里顺便说一下啊,出来做开发的基础很重要啊,基础不好,迟早是要恶补的.个人深刻觉得像这种嵌入式的开发对C语言和微机接口与原理是非常依赖的,必须要有深厚的基础才能hold的 ...
- 使用indent命令帮助排版源代码
在写代码时候,特别是在vim中编辑代码时候,你可能会不太注意代码风格问题,比如‘{’符号放在行末还是下一行行首等等, 这样你把自己代码与别人的代码merge时候,就会出现代码风格不一的问题,这里就推荐 ...
- 《javascript高级程序设计》笔记4.1.4：检测类型
javascript类型检测这节主要讲了typeof和instanceof操作符. 一.typeof操作符: 1.typeof在检测基本数据类型时十分方便,针对4种基本数据类型string.numbe ...
- 用php逐行读取文件
做个备份年纪大了,都不愿意自己思考了 $str = file_get_contents($tmpfilename);//获得内容 $arr = explode("\n",$str) ...