本文介绍了一种使用HTML、CSS和JavaScript实现的双日历插件，其中一个日历通过鼠标选择日期，另一个日历通过点击选择日期。该插件能够自定义显示当前日期和选择的日期，并提供了上一周、下一周、上一月、下一月等功能。
效果图如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@charset "UTF-8";
*{ margin:0; padding:0; }
::selection { background:#FFF; }
::-moz-selection { background:#FFF; }
::-webkit-selection { background:#FFF; }
li{ list-style: none; }
#wrap1{ width:960px; height:40px; overflow: hidden; padding-top:20px; font-size:12px; margin:0 auto; position: relative; border-bottom: 1px solid #2d82cb;}
#ul{ width:735px; height:40px; margin-left: 67px;}
#ul li{ width:11.9%; margin: 0 7px; height:40px; text-align: center; float:left; background:#107bcf; color:#fff; cursor:pointer; font-size: 13px; border-radius:7px 7px 0 0}
#ul li>p:first-child{ margin-top:4px; }
/*今天所对应的背景*/
#ul .today{ color:#666; background:#2d82cb; color: #fff;}
/*选择的日期对应的背景*/
#ul .active{ background:#cf0000; color:#fff; }
/* 鼠标移动上时背景 ;不想要可以去掉*/
#ul li:hover{ background:#cf0000; color:#fff; }
#prev,#next{ width: 67px; height:20px; font-size:14px; position: absolute; top:10px; cursor:pointer; }
#prev{left:0; padding-top:20px;}
#next{ right:96px; padding-top:20px;}
#next:hover, #prev:hover{ color:#2d82cb}
#showdate{position: absolute; top:40px; right: 0; width: 100px; font-size: 10px;
text-align: center; height: 20px;}
/* #input{ width:500px; margin:30px auto;}
#year,#mon,#day{ width:70px; text-align:center;} */
#btn{width:100px; height:20px; line-height: 18px; text-align: center; background:#2d82cb; color:#fff; margin:0 auto; cursor:pointer; display: inline-block;position: absolute; top:20px; right: 0;}
body {
font-family: 'arial';
}
#center{ width:785px; margin:0 auto; display: none; z-index:99999999999; position: relative; }
#center .title, #table, #center .btn{ position: absolute; right: 0; z-index: 99999999999;}
#center .title{top:0; background: #f1f1f1; width: 196px; text-align: center; border-top: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; }
#table{ top: 28px; left: 585px; background: #f1f1f1; width: 200px; height: 190px; text-align: center;
border-bottom: 6px solid #f1f1f1; border-left: 6px solid #f1f1f1; border-right: 6px solid #f1f1f1; }
#center .btn{top:100px;}
#center .title a{ height:20px; margin:4px; display: inline-block; cursor:pointer; }
#center .title input{ width:50px; height:20px; cursor:pointer; text-align: center; margin-right: 1px;}
#center .btn span{ width:40px; height:20px; display: inline-block; margin:4px; cursor:pointer;}
#talbe tbody{ border:5px solid #333; padding:0 40px;}
#talbe tr{ background: #333; }
#table td{ background: #fff;; color:#000; text-align: center; cursor:pointer; font-size: 10px; }
/*表格头部样式*/
#table .week{ background: red; }
#table .header th{ background:#2d82cb; cursor:text; color:#666; font-weight: normal; font-size: 10px; color:#fff; }
/* 日历中上个月和下个月的日期的样式 */
#table .gray{ color:#081aca; font-weight: normal; border:none; background: #fff; padding: 0;
margin-right: 0; }
/* 日历中当天日期样式 */
#table .active{ background:#2d82cb; color:#fff; }
/* 日历中当前选择的日期的样式 */
#table .current{ background:orange; color:#fff;}
/* 日历中鼠标移上时的样式 */
#table td:hover{ background:orange;}
</style>
</head>
<body>
<div id='wrap1' style="line-height:30px;">
<input id="banben" type="hidden" value="zh-cn">
<div id='prev'>上一周</div><!-- 上一周 -->
<ul id='ul'>
<!-- 日期列表 -->
</ul>
<div id='next'>下一周</div><!-- 下一周 -->
<input id = 'showdate' type = 'text' >
<div id='btn'>选择日期</div>
</div>
<div id='center' >
<div class='title' style="line-height:1;top: 2px;"><a title='上一年'><</a><a title='上一月'><</a><input type='text' style="border:1px solid #a9a9a9;"><input type='text' style="border:1px solid #a9a9a9;"><a title='下一月'>></a><a title='下一年'>></a></div>
<table id='table' border='0' cellspacing="0" cellpadding="0">
<!-- 日历 -->
</table>
<div class='btn'><!--<span class='today'>今天</span><span class='submit'>确定</span>--></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var newdate=new Date() ;
var banben = $("#banben").val();
$(document).ready(function(){
$("#goTop").hide();
$(window).scroll(function(){
if ($(window).scrollTop()>100){$("#goTop").fadeIn(500);
} else{$("#goTop").fadeOut(500);}});
$("#goTop").click(function(){
$('body,html').animate({scrollTop:0},1000);return false;});
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var li = '';
var D = new Date(newdate);
var today = D.getDate();
var tomon = D.getMonth()+1;
var toyear = D.getFullYear();
debugger
var ddd = null; //当前设置日期1-31；默认为当天
var mmm = null; //当前设置月份1-12；默认为当月
var yyy = null; //当前设置年份；默认为当年
load();
//初始化日期，不传日期显示为系统当前日期；传入日期则显示设置日期
function load(y,m,d){ //
//如果设置日期，则按设置日期显示；否则为系统当前日期
if(y>=0 & m>=0 & d>=0){
yyy = time(y,m,d,false)[0];
mmm = time(y,m,d,false)[1];
ddd = time(y,m,d,false)[2];
//........
}else{
yyy = toyear;
mmm = tomon;
ddd = today;
}
debugger
$('#showdate').val(yyy+'年'+mmm+'月'+ddd+'日');//前台页面上显示当前日期
//x、xx、xxx为生成日期li列表时操作的日期
var x =null;
var xx = mmm;
var xxx = yyy;
var DDay = new Date(yyy,mmm-1,ddd);
var wweek = DDay.getDay() == 0 ? 7: DDay.getDay();
var j = ddd-wweek+1;
x = j;
//alert(x);
for( j ;j<=ddd+7; j++){
if(x == time(xxx,xx,1,false)[3]+1){
xx++;
x = 1;
}
if(xx == 13){
xxx++;
xx = 1;
}
cc = time(xxx,xx,x,false);
w = week(xxx,xx,x);
x++;
li += "<li index="+cc[0]+','+cc[1]+','+cc[2]+"><p>"+w+"</p><p>"+cc[2]+"</p></li>";
}
oUl.innerHTML = li;
li = '';
for(var i=0; i<7; i++){
aLi[i].className = '';
if(aLi[i].getAttribute('index') == yyy+','+mmm+','+ddd){
aLi[i].className = 'active';
}
if(aLi[i].getAttribute('index') == (toyear+','+tomon+','+today)){
// aLi[i].className = 'today';
}
}
}
//上一周
oPrev.onclick = function(){
ddd-=7;
if(ddd <= 0){
mmm--;
ddd = time(yyy,mmm,1,false)[3]+ddd;
}
if(mmm == 0){
yyy--;
mmm = 12;
}
load(yyy,mmm,ddd);
}
//下一周
oNext.onclick = function(){
ddd+=7;
if(ddd >= time(yyy,mmm,1,false)[3]+1){
ddd = ddd-time(yyy,mmm,1,false)[3];
mmm++;
}
if(mmm == 13){
yyy++;
mmm = 1;
}
load(yyy,mmm,ddd);
}
//设置并获取某年某月某日，另外获取某月的总天数
function time(yy,mm,dd,auto){ //手动获取某月总天数时，auto写false；否则true；
d = new Date(); // 创建 Date 对象
if(yy!=undefined){
d.setYear(yy);
d.setMonth(mm-1,1);
d.setDate(dd);
}
var ddd = d.getDate();
var y = d.getFullYear();
var m = d.getMonth();
var all = new Date(d.getFullYear(), m+1, 0).getDate();
var m = m+1;
auto?false:true;
if(auto){
move(y,m,ddd,all);
}else{
return [y,m,ddd,all];
}
}
function move(y,m,d,all_day){
load(y,m,d);
}
//根据日期生成对应的周几
function week(y,m,d){
var m = m -1;
var D = (y>=0) ? new Date(y,m,d) : new Date();
var w = D.getDay();
switch (w){
case 0: w = '周日'; break;
case 1: w = '周一'; break;
case 2: w = '周二'; break;
case 3: w = '周三'; break;
case 4: w = '周四'; break;
case 5: w = '周五'; break;
case 6: w = '周六'; break;
}
return w;
}
//点击日期列表li，选择对应的日期
$('#ul').delegate('li','click',function(){
var arr = $(this).attr('index').split(',');
yyy = arr[0];
mmm = arr[1];
ddd = arr[2];
debugger
load(yyy,mmm,ddd);
});
//生成日历
function rili(y,m,d){
var Y = y != undefined?y:yyy; //临时变量，用于日历中选择时间时改变，但不改变当前设置时间
var M = m != undefined?m:mmm;
var D = d != undefined?d:ddd;
$('.title input').eq(0).val(Y);
$('.title input').eq(1).val(M);
var str = "<tr class='header'><th class='week'>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class='week'>六</th></tr>";
var day = time(Y,M,D,false)[3]; // 当前设置月的总天数
var date = new Date(Y,M-1,1); //创建当前设置月的日期对象
var week = date.getDay(); //当前设置月的1号是星期几
var d = 1; //填充日历的上一个月的日期
var dd = 1; //填充日历的本月及下月的日期
for(var i=0; i<6; i++){
str += "<tr>";
for(var j=0; j<7; j++){
if(d<=week){ //上一个月的日期，加.gray区别
str += "<td class='gray' index="+Y+","+(M-1)+","+(time(Y,M-1,D,false)[3]-week+d)+">"+(time(Y,M-1,D,false)[3]-week+d)+"</td>";
d++;
}else if(dd>day){ //下个月的日期，加.gray区别
str += "<td class='gray' index="+Y+","+(M+1)+","+(dd-day)+">"+(dd-day)+"</td>";
dd++;
}else if(week ==0 && d<=7){ //如果设置月的1号为星期日，当前月日期则下移一列，第一列填充上月日期
str += "<td class='gray' index="+Y+","+(M-1)+","+(time(Y,M-1,D,false)[3]+d-7)+">"+(time(Y,M-1,D,false)[3]+d-7)+"</td>";
d++;
}else{ //本月日期 ，默认样式
if(toyear+','+tomon+','+today == Y+","+M+","+dd){ //当前系统日期，加样式
str += "<td class='active' index="+Y+","+M+","+dd+">"+dd+"</td>";
}else if(yyy+','+mmm+','+ddd == Y+","+M+","+dd){ //当前设置日期，加样式
str += "<td class='current' index="+Y+","+M+","+dd+">"+dd+"</td>";
}else{
str += "<td index="+Y+","+M+","+dd+">"+dd+"</td>";
}
dd++;
}
}
str += "</tr>";
}
$('#table').html(str);
}
//点击日历，选择对应的日期
$('#table').delegate('td','click',function(){
var arr = $(this).attr('index').split(',');
yyy = arr[0];
mmm = arr[1];
ddd = arr[2];
load(yyy,mmm,ddd);
debugger
$('#center').css({display:'none'});
});
//临时变量，日历隐藏时，必须清空
var yyyy = yyy; //临时变量，改变日历年份时临时改变
var mmmm = mmm; //临时变量，改变日历月份时临时改变
var dddd = ddd;
//日历点击上一年
$('.title a').eq(0).click(function(){
yyyy--;
rili(yyyy,mmmm,dddd);
});
//日历点击上一月
$('.title a').eq(1).click(function(){
mmmm--;
if(mmmm == 0){
yyyy --;
mmmm = 12
}
rili(yyyy,mmmm,dddd);
});
//日历点击下一月
$('.title a').eq(2).click(function(){
mmmm++;
if(mmmm == 13){
yyyy ++;
mmmm = 1;
}
rili(yyyy,mmmm,dddd);
});
//日历点击上一年
$('.title a').eq(3).click(function(){
yyyy++;
rili(yyyy,mmmm,dddd);
});
//日历上点击今天
$('#center .today').click(function(){
yyy = toyear;
mmm = tomon;
ddd = today;
rili(yyy,mmm,ddd);
load(yyy,mmm,ddd);
$('#center').css({display:'none'});
});
//日历上点击确定
$('#center .submit').click(function(){
load(yyyy,mmmm,dddd);
$('#center').css({display:'none'});
});
//点击显示、隐藏日历
$('#btn').click(function(){
if($('#center').css('display')=='block'){
$('#center').css({display:'none'});
load(yyyy,mmmm,dddd);
yyyy = null;
mmmm = null;
}else{
$('#center').css({display:'block'});
rili();
}
});
//点击显示、隐藏日历
$('#showdate').click(function(){
if($('#center').css('display')=='block'){
$('#center').css({display:'none'});
load(yyyy,mmmm,dddd);
yyyy = null;
mmmm = null;
}else{
$('#center').css({display:'block'});
rili();
}
});
});
</script>
</body>
</html>第二个日历
<style type="text/css">
#week li{
float: left;
list-style: none;
background: #333;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
#week li.currToday{
color: red;
}
</style>
<ul id="week">
</ul>
<input type="text" name="" id='dateInput'>
<script type="text/javascript">
var DDay=new Date();
var tYear=DDay.getFullYear();
var tMonth=DDay.getMonth()+1;
var tToday=DDay.getDate();
var zYear=null,zMonth=null,zToday=null;
var wWeek=document.getElementById('week');
var dateInput=document.getElementById('dateInput');
function load(zYear,zMonth,zToday){
var Y=zYear||tYear;
var M=zMonth||tMonth;
var T=zYear||tToday;
var week = DDay.getDay() == 0 ? 7: DDay.getDay();
var all = new Date(Y, M, 0).getDate();
var prevall = new Date(Y, M-1, 0).getDate();
console.log(all);
for(var i=1;i<8;i++){
nLi=document.createElement('li');
wWeek.appendChild(nLi);
li=document.getElementsByTagName('li');
li[i-1].innerHTML=getWeek(i);
if(week==i){
li[i-1].className='currToday'
var currT=T>all?(T-all):T;
var currM=T>all?(M+1):M;
var currY=currM>12?(Y+1):Y;
li[i-1].setAttribute('date-init',currY+'-'+currM+'-'+currT);
dateInput.value= li[i-1].getAttribute('date-init')
}
if(i>week){
var currT=(T+(i-week))>all?(T+(i-week)-all):T+(i-week);
var currM=(T+(i-week))>all?(M+1):M;
var currY=currM>12?(Y+1):Y;
li[i-1].setAttribute('date-init',currY+'-'+currM+'-'+currT);
}
if(i<week){
var currT=T-(week-i)<=0?(T+prevall-(week-i)):T-(week-i)>all?(T-(week-i)-all):T-(week-i)
var currM=(T-(week-i))>0?((T-(week-i))>all?(M+1):M):M-1;
var currY=currM>12?(Y+1):Y;
li[i-1].setAttribute('date-init',currY+'-'+currM+'-'+currT);
}
}
for(var i=0;i<7;i++){
li[i].onclick=function(){
for(var i=0;i<7;i++){
li[i].className='';
}
dateInput.value= this.getAttribute('date-init')
this.className='currToday';
}
}
}
load();
function getWeek(m){
switch(m){
case m=1:
return '周一';
case m=2:
return '周二';
case m=3:
return '周三';
case m=4:
return '周四';
case m=5:
return '周五';
case m=6:
return '周六';
case m=7:
return '周日';
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
