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项目积累总结】优秀组件以及应用实例
1.手机端 图片预览组件 组件:sideshow 效果图:(预览图全屏 且可以左右移动) code: <div class="row ui-app-s ...
- Linux进程管理之“四大名捕”
一.四大名捕 四大名捕,最初出现于温瑞安创作的武侠小说,是朝廷中正义力量诸葛小花的四大徒弟,四人各怀绝技,分别是轻功暗器高手“无情”.内功卓越的高手“铁手”.腿功惊人的“追命”和剑法一流的“冷血”本文 ...
- jquery操作radio单选按钮，实现取值，动态选中，动态删除的各种方法
本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...
- Mybatis初始
1.Mybatis 的作用 完成基本的sql语句 和 存储过程 高级的对象关系映射(ORM) 框架 封装了几乎所有的 JDBC 代码 参数的手工设置 结果集的遍历 2.Mybatis 框架的主体构成 ...
- [javaSE] 数据结构（二叉树-遍历与查找）
前序遍历:中,左,右 中序遍历:左,中,右 后序遍历:左,右,中 二叉树查找 从根节点进行比较,目标比根节点小,指针移动到左边 从根节点进行比较,目标比根节点大,指针移动到右边 /** * 前序遍历 ...
- 二：SpringCloud-Eureka
五:Eureka服务注册与发现 1. 是什么 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现==服务注册和发现==(请对比Zookeeper). Eureka ...
- 【SSH网上商城项目实战15】线程、定时器同步首页数据（类似于博客定期更新排名）
转自:https://blog.csdn.net/eson_15/article/details/51387378 上一节我们做完了首页UI界面,但是有个问题:如果我在后台添加了一个商品,那么我必须重 ...
- C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
- qt5.6.3下使用firebird
有人把firebird比作数据库界的瑞士军刀,想学习一下其在QT5.6中的使用,于是便开始了一场自己挖坑,自己埋的旅程. 环境说明:win7 64位+QT5.6 mingw4.9 32位(好像官网上也 ...
- BZOJ4513: [Sdoi2016]储能表(数位dp)
题意 题目链接 Sol 一点思路都没有,只会暴力,没想到标算是数位dp??Orz 首先答案可以分成两部分来统计 设 \[ f_{i,j}= \begin{aligned} i\oplus j & ...