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 ...
随机推荐
- Centos 7 python升级（2.7.5-》2.7.11）
1.安装升级GCC yum install gcc* openssl openssl-devel ncurses-devel.x86_64 bzip2-devel sqlite-devel pyth ...
- My way to Python - Day02
版权声明: 本文中的资料均来自于互联网.将各路内容摘抄于此,作为学习笔记,方便用作后面翻阅查看.如果原作者对文中内容的引用有任何版权方面的问题,请随时联系,我将尽快处理. 特别鸣谢:武沛齐 <P ...
- ado.net数据库操作（2）
5.1使用SQLDataReader进行数据库查询 <%@ Import Namespace="System.Data" %> <%@ Import NameSp ...
- 数据库对于null值的处理
对于null值的处理,不同的数据库的处理函数是不同的,这里列举了部分数据库对于null的处理函数以及使用: Oracle:是用函数nvl(), ----nvl(chinese,0);如果语文成绩为nu ...
- IOS 中关于自定义Cell 上的按钮 开关等点击事件的实现方法（代理）
1.在自定义的Cell .h文件中写出代理,写出代理方法. @protocol selectButtonDelegate <NSObject> -(void)selectModelID:( ...
- 用IBM WebSphere DataStage进行数据整合: 第 1 部分
转自:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0602zhoudp/ 引言 传统的数据整合方式需要大量的手工 ...
- set up size, title to tcl tk main window
#!/usr/bin/wish wm title . "this is main title" wm geometry . 500x300+30+200 500 --width 3 ...
- php 中const和 define的区别
在php中定义常量时,可用到const与define这两种方法,那他们到底有什么区别呢? 1.const用于类成员变量的定义,一经定义,不可修改.define不可用于类成员变量的定义,可用于全局常量. ...
- Method Resolution Order – Python类的方法解析顺序
在支持多重继承的编程语言中,查找方法具体来自那个类时的基类搜索顺序通常被称为方法解析顺序(Method Resolution Order),简称MRO.(Python中查找其它属性也遵循同一规则.)对 ...
- SQL Sever 各版本下载 SQL Server 2012下载SQL Server 2008下载SQL Server 2005
SQL Server 2012SQL Server 2012 开发版(DVD)(X64,X86)(中文简体)ed2k://|file|cn_sql_server_2012_developer_edit ...