<!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:0;
padding:0;
box-sizing:border-box;
}
table{
border-collapse: collapse;
table-layout: fixed;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:".";
display:block;
width:0;
height:0;
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: 999;
}
.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
时间： 2024-10-07 13:19:05