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 ...
随机推荐
- Swift学习之类和结构体的创建
随着一步步的学习,学习到的新知识越来越多了,不管是新的还是旧的,都禁不住时间的堆积,再熟悉的知识点时间久了都会渐渐的忘记,也许这就是人们生活中一种潜在的惰性吧,看似非常熟悉的东西,等到真正要用的时候, ...
- java 中打印调用栈
source-code: public class A { public A() {} private static void printStackTrace() { StackTra ...
- HTML与CSS入门——第三章 理解HTML和XHTML的关系
知识点: 1.以HTML创建一个简单网页的方法 2.包含每个网页必须有的所有HTML标签的方法 3.用段落和换行组织页面的方法 4.用标题组织内容的方法 5.HTML.XML.XHTML和HTML5之 ...
- 8.0 BOM对象
主要的掌握的知识结构图 1 Window 2 控制窗口.框架.弹出窗口 3 利用location对象中的页面信息 4 使用 navigator 对象了解浏览器 1.1 BOM的核心对象是window, ...
- CSS---------------之文本颜色
CSS2支持如下名字的颜色 注意点: 你的浏览器有可能支持更多名字,但是在实际用的过程中尽量少使用名字的,因为各个浏览器对颜色的会存在差异:查看颜色可以参考 对于更多地颜色,你可以使用代表红,绿,蓝三 ...
- html进阶css（1）
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- ios 异步多线程 获取数据
简介 iOS有三种多线程编程的技术,分别是: (一)NSThread (二)Cocoa NSOperation (三)GCD(全称:Grand Central Dispatch) 这三种编程方式 ...
- java菜鸟篇<一> 对JsonObject 和JsonArray知识点理解
今天遇到从前台拿值(json数组格式),从request里边取值,然后经过一系列的处理方式,在用request返回去 1.先把request里的值赋值给String string类型的变量 2.因为前 ...
- MYSQL数据去重与外表填充
经常要对数据库中的数据进行去重,有时还需要使用外部表填冲数据,本文档记录数据去重与外表填充数据. date:2016/8/17 author:wangxl 1 需求 对user_info1表去重,并添 ...
- (原)在ubuntu 中安装 swi prolog 和 简单的使用
参考网址:http://www0.cs.ucl.ac.uk/staff/mahmed/teaching/intro.html 参考网址:http://www.swi-prolog.org/build/ ...