jq双日历--最终版(功能兼容IE5，样式兼容IE6)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>双日历选择</title>
<link rel="stylesheet" href="double-date.css"/>
<script src="jquery-1.11.3.min.js"></script>
<script src="double-date.js"></script> </head>
<body>
<div class="outer clearfix">
<div class="date date1 fl" id="from">
<input type="text" class="date-check"/>
</div>
<div class="date fr" id="to">
<input type="text" class="date-check"/>
</div>
</div>
</body>
</html>
html
*{
margin:;
padding:;
box-sizing:border-box;
}
table{
border-collapse: collapse;
table-layout: fixed;
}
.clearfix{
zoom:;
}
.clearfix:after{
content:".";
display:block;
width:;
height:;
visibility:hidden;
clear: both;
}
.fl{
float:left;
}
.fr{
float:right;
}
.date{
position:relative;
}
.date-check{
width:180px;
height:30px;
line-height:30px;
border:1px solid #ccc;
padding:0 5px;
}
.date-list{
display:none;
position:absolute;
top:30px;
padding-top:10px;
background: #FED;
border-radius:5px;
-webkit-border-radius:5px;
overflow:hidden;
border:1px solid;
border-color:#ccc #ccc transparent #ccc;
z-index:;
}
.header{
margin-bottom:4px;
padding: 0 5px;
}
.header .fl{
margin-right:5px;
}
.header .fl,.header .fr{
cursor:pointer;
}
.header select{
padding: 2px 0;
vertical-align:top;
}
.header-right{
margin-right:8px;
}
.header-left,.header-right{
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
border: 1px solid #ccc;
line-height: 18px;
}
.today{
padding:2px 5px;
border:1px solid #ccc;
border-radius:5px;
background:#ccc;
color:#fff;
font-size:12px;
*width:24px;
*height:16px;
*line-height:16px;
}
.date-list,.date-list table{
width:216px;
}
.date-list thead{
background:#00cdec;
}
.date-list th{
padding:2px;
color:#fff;
border:1px solid #ccc;
font-size: 14px;
font-weight: normal;
}
.date-list td{
border:1px solid #ccc;
padding:2px 0;
text-align:center;
font-size: 12px;
}
.date-list td:hover{
background:#ccc;
color:#fff;
}
.date-list td.current{
background:#00cdec;
color:#fff;
}
.outer{
width:400px;
margin:20px auto;
}
.date1{
margin-bottom:30px;
}
.date-error .date-check{
border:1px solid red;
}
double-date.css
$(function(){
var dateStr='<div class="date-list"><div class="header clearfix"><div class="header-left fl"><</div><div class="fl"><select class="year"></select></div><div class="fl"><select class="month"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select></div><div class="header-right fl">></div><div class="fr today">今日</div></div><table><thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div>'
$(dateStr).appendTo($(".date"));
var $y = $(".year"), $m = $(".month"),
$year = $y.val(),
$month = $m.val(),
current = new Date(),
current_year = current.getFullYear(),
current_month = current.getMonth() + 1,
current_date = current.getDate();
$m.val(current_month);
$y.val(current_year);
for(var i=1917;i<2118;i++){
var opt = '';
opt += "<option>" + i + "</option>";
$(opt).appendTo($y);
}
$y.val(current_year);
show();
function show() {
$(".date").each(function () {
var $y = $(this).find(".year"), $m = $(this).find(".month");
var year = $(this).find(".year").val(), month = $(this).find(".month").val();
var dates = new Date(year, month, 0).getDate();
//根据年份和月份获取当月第一天的日期
date = new Date(new Date(year, month - 1, 1));
//根据年份和月份获取当月第一天是星期几:
var firstDay = date.getDay();
if (firstDay == 0) {
firstDay = 7;
}
var num = 1;
$(this).find("td").each(function () {
$(this).removeClass("current");
var $eq = $(this).index() + 1;
//给td赋值
if ($eq < firstDay && $(this).parent("tr").index() === 0) {
$(this).html("");
} else {
if (num <= dates) {
$(this).html(num);
num++
} else {
$(this).html("")
}
}
//去掉内容为空的tr
if ($(this).html() == "" && $(this).siblings().html() == "") {
$(this).parents("tr").css("display", "none");
} else {
$(this).parents("tr").css("display", "table-row")
}
if ($y.val() == current_year && $m.val() == current_month && $(this).html() == current_date) {
$(this).addClass("current");
} else {
$(this).removeClass("current")
}
});
num = 1;
});
}
var date = new Date();
//点击今日跳转到今日列表
$(".today").on("click", function () {
$y.val(current_year);
$m.val(current_month);
show();
$(this).parents(".date-list").css("display", "none").siblings(".date-check").val(current_year + "-" + zero(current_month) + "-" + zero(current_date));
});
$(".header select").on("change", function () {
show();
});
var flag = 0;
$(".date-list").hover(function () {
flag = 0;
}, function () {
flag = 1;
});
//input框获得焦点，让日历显示。失去焦点后，让日历隐藏
$(".date-check").each(function () {
$(this).on("focus", function () {
var $outer = $(this).siblings(".date-list"),
$this_input = $(this);
$outer.css("display", "block");
$outer.find("td").each(function () {
var $this_td = $(this);
$this_td.on("click", function () {
var $input_year = $(this).parents(".date-list").find(".year").val(),
$input_month = $(this).parents(".date-list").find(".month").val(),
$input_val = $(this).html(),
date_str = "";
if ($this_td.html() != "") {
date_str += $input_year + "-" + zero($input_month) + "-" + zero($input_val);
$this_input.val(date_str);
$outer.css("display", "none");
}
})
})
});
$(this).on("blur", function () {
if (flag == 1) {
$(this).siblings(".date-list").css("display", "none");
flag = 0;
}
})
});
//月份和日期小于10的补0
function zero(num) {
return num >= 10 ? num : "0" + num;
}
$("#from td,#to td,#from .today,#to .today").on("click",function(){
var d_year=$(this).parents(".date-list").find(".year").val(),
d_month=$(this).parents(".date-list").find(".month").val(),
$td_val;
if($(this).prop("tagName").toLowerCase()=="td"){
$td_val =$(this).html();
if($td_val!=""){
var str=d_year+"-"+d_month+"-"+$td_val;
$(this).parents(".date-list").siblings(".date-check").val(str);
}
}
var $from=$("#from .date-check").val(),$to=$("#to .date-check").val();
var from_seconds=new Date($from.replace("-", "/").replace("-", "/")).getTime(),to_seconds=new Date($to.replace("-", "/").replace("-", "/")).getTime();
if($from!="" && $to !=""){
if(from_seconds>to_seconds){
alert("起始日期不能大于结束日期！");
$("#from,#to").addClass("date-error");
}else{
$("#from,#to").removeClass("date-error");
}
}
});
$(".header-left").on("click",function(){
var $year=parseInt($(this).parents(".header").find(".year").val());
var $mon=parseInt($(this).parents(".header").find(".month").val());
if($mon>=2){
$mon-=1;
}else{
$year-=1;
$mon=12;
$(this).parents(".header").find(".month").val($mon);
$(this).parents(".header").find(".year").val($year)
}
$(this).parents(".header").find(".month").val($mon);
show();
});
$(".header-right").on("click",function(){
var $year=parseInt($(this).parents(".header").find(".year").val());
var $mon=parseInt($(this).parents(".header").find(".month").val());
if($mon<12){
$mon+=1;
}else{
$year+=1;
$mon=1;
$(this).parents(".header").find(".month").val($mon);
$(this).parents(".header").find(".year").val($year)
}
$(this).parents(".header").find(".month").val($mon);
show();
});
document.body.onselectstart=document.body.ondrag=function(){
return false;
}
})
double-date.js
jq双日历--最终版(功能兼容IE5，样式兼容IE6)的更多相关文章
- 【原】迎接微信winphone 5.0 版本的IE10样式兼容
微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...
- jQuery 3.0最终版发布，十大新特性眼前一亮
jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终板 ...
- Angular 2 最终版正式发布
9月15日,Angular 2 的最终版正式发布了. 作为 Angular 1 的全平台继任者 -- Angular 2 的最终版,意味着什么? 意味着稳定性已经得到了大范围用例的验证: 意味着已经针 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- 最终版的Web（Python实现）
天啦,要考试了,要期末考试了,今天把最终版的Python搭建Web代码先写这里记下了.详细的过程先不写了. 这次是在前面的基础上重写 HTTPServer 与 BaseHTTPRequestHandl ...
- CSS hack样式兼容模式收藏
part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6 IE7 IE8 Firefox Opera Safari (Chrome) IE6 IE7 IE8 ...
- 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码
最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...
- Android 10开发者预览版功能介绍
Android P的开发者预览版最亮眼的功能莫过于支持“刘海屏”等屏幕显示.同样在适配可折叠设备方面,Android Q的第一个开发者预览版也很“接地气”,谷歌早在去年11月就发布了对可折叠设备的支持 ...
- RHEL 6.0服务器安装Oracle 11G R2 最终版
RHEL6安装Oracle 11g R2最终版 结合网上教程 服务器实战所得 1.使用DVD做yum源新建dvd挂载目录[root@fxq-dp ~]# mkdir /media/iso进入到DVD挂 ...
随机推荐
- 【angular5项目积累总结】列表多选样式框(2)
view code list.css :host { display: flex; width: 100%; border-left: 1px solid #ccc; font: normal 12p ...
- 你所需要的sql数据库资料
sql语法的特点 1.没有"",所有的字符串都使用''包含 2.它的逻辑相等与赋值运算符一样都是= 如 if 1=1 3.不区别大小写,但是习惯函数上使用大写.所有与数据库 ...
- [javaSE] IO流（RandomAccessFile）
随机访问文件,可以看作一个大型的byte[]数组,不算是IO体系中的一员,内部封装了字节输入输出流,可以设置权限,可以调整指针的位置 获取RandomAccessFile对象,构造参数:String文 ...
- veloctiy入门
什么是velocity? velocity是一个基于Java的模板引擎.你可以使用它来预定义模板,并且对模板进行数据渲染,从而动态生成相应的文本.它如同JSP一样经常被使用在MVC分层架构当中,充当V ...
- java多线程(一)-五种线程创建方式
简单使用示例 Java 提供了三种创建线程的方法: 通过实现 Runnable 接口: 通过继承 Thread 类本身: 通过 Callable 和 Future 创建线程. 还有 定时器 线程池 下 ...
- golang rpc 简单范例
RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. 它的工作流程如下图: go ...
- 《JavaWeb从入门到改行》多重外键关系在java中的处理方案
目录:(点击红色方框展开子目录) 问题描述 无 项目案例说明 业务描述 数据库说明 项目源码及下载 无 问题描述 如上两图,数据库中各个表之间有很多的外键关系,其中业务关系是一个用户下有该用户的订单, ...
- BZOJ3193: [JLOI2013]地形生成
传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...
- 51nod1538：一道难题(常系数线性递推/Cayley-Hamilton定理)
传送门 Sol 考虑要求的东西的组合意义,问题转化为: 有 \(n\) 种小球,每种的大小为 \(a_i\),求选出大小总和为 \(m\) 的小球排成一排的排列数 有递推 \(f_i=\sum_{j= ...
- BZOJ1103 [POI2007]大都市
Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了. 不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1.. ...