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挂 ...
随机推荐
- 远程服务通讯Service(Remote--AIDL)
服务端代码:https://github.com/maogefff/AndroidTest/tree/develop-ServiceLocal2 客户端代码:https://github.com/ma ...
- 【angular5项目积累总结】一些正则积累
/^[1-9][0-9]{0,4}$/ /^[1-9][0-9]{0,4}(,[1-9][0-9]{0,4})*$/ /^([a-zA-Z0-9_\-])+\@(([a-zA-Z0-9\-])+\.) ...
- SpringBoot MockMvc的单元测试
对于类的测试,可以有很多的方式进行实现,比如可以使用PostMan,使用HttpClient请求等,这里主要讲的是MockMcv的测试 一:引入依赖 <dependency> <gr ...
- Mavean多工程依赖项目
前言 本篇文章基于Java开发小技巧(二):自定义Maven依赖中创建的父工程project-monitor实现,运用我们自定义的依赖包进行多工程依赖项目的开发. 下面以多可执行Jar包项目的开发为例 ...
- JAVA工具系列之——Postman
1 概述 Postman是一款测试rest接口的工具,可以实现前端未实施的情况下,后端同步开发.本文从部署到运用进行展开描写. 2 部署 第一步:进入Postman官网下载最新版本,下载链接 第二步: ...
- groovy函数、字符串、循环
三重单引号字符串 '''a triple single quoted string''' 三重单引号字符串是普通的java.lang.String 三重单引号字符串是多行的.您可以跨越行边界跨越字符串 ...
- sql语句优化总结
sql语句优化总结 数据库优化的几个原则: 1.尽量避免在列上做运算,这样会导致索引失败: 2.使用join是应该用小结果集驱动大结果集,同时把复杂的join查询拆分成多个query.不然join的越 ...
- 分布式时序数据库InfluxDB
我们内部的监控系统用到分布式时序数据库InfluxDB http://www.ttlsa.com/monitor-safe/monitor/distributed-time-series-databa ...
- Python Django ORM创建基本类以及生成数据结构
#在项目目录下的modules.py中创建一个类,来自动生成一张表UserInfo class UserInfo(models.Model): username = models.CharField( ...
- Redis实现分布式锁1
Jedis结合setNX方法实现分布式锁 public boolean lock(String key, int exprie) { try { exprie = exprie <= 0 ? 6 ...