废话少说，直接上代码
一、HTML代码
<body> <input class="text" type="text" placeholder="出发时间" id="txt" value=""/> <br /><br /><br /> <input class="text2" type="text" placeholder="返回时间" id="txt1" value=""/> <div id="calendar" style="display: none;"> <h4>2020年10月</h4> <a href="##" class="a1">上月</a> <a href="##" class="a2">下月</a> <ul class="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul class="dateList"></ul> </div> </body>
二、CSS代码
* {
margin: 0;
padding: 0
}
.text,.text2{
position: relative;
left: 500px;
top:100px;
}
#calendar {
210px;
margin: 100px auto;
overflow: hidden;
border: 1px solid #000;
padding: 20px;
position: absolute;
cursor: pointer;
left:475px;
background-color: green;
}
#calendar h4 {
text-align: center;
margin-bottom: 10px
}
#calendar .a1 {
position: absolute;
top: 20px;
left: 20px;
}
#calendar .a2 {
position: absolute;
top: 20px;
right: 20px;
}
#calendar .week {
height: 30px;
line-height: 20px;
border-bottom: 1px solid #000;
margin-bottom: 10px
}
#calendar .week li {
float: left;
30px;
height: 30px;
text-align: center;
list-style: none;
}
#calendar .dateList {
overflow: hidden;
clear: both
}
#calendar .dateList li {
float: left;
30px;
height: 30px;
text-align: center;
line-height: 30px;
list-style: none;
}
#calendar .dateList .ccc {
color: #ccc;
}
#calendar .dateList .red {
background: #F90;
color: #fff;
}
#calendar .dateList .sun {
color: #f00;
}
三、JS代码
<script type="text/javascript"> $(function() { var flag="";//设置参数，确定是出发时间还是返回时间 $("#txt").click(function(){ $("#calendar").css("top","35px"); $("#calendar").show(); flag="txt"; }); $("#txt1").click(function(){ $("#calendar").css("top","100px"); $("#calendar").show(); flag="txt1"; }); //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？ var iNow=0; var oDate = new Date(); //定义时间 var Nummonth=oDate.getMonth(); function run(n) { oDate.setMonth(Nummonth+n);//设置月份 var year = oDate.getFullYear(); //年 var month = oDate.getMonth(); //月 var today = oDate.getDate(); //日 //计算本月有多少天 var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; //判断闰年 if(month == 1) { if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { allDay = 29; } } //判断本月第一天是星期几 oDate.setDate(1); //时间调整到本月第一天 var week = oDate.getDay(); //读取本月第一天是星期几 $(".dateList").empty();//每次清空 //插入空白 for(var i = 0; i < week; i++) { $(".dateList").append("<li></li>"); } //日期插入到dateList for(var i = 1; i <= allDay; i++) { $(".dateList").append("<li class='check'>" + i + "</li>") } $(".check").click(function(){ if(flag=="txt") var t=document.getElementById("txt"); else var t=document.getElementById("txt1"); t.value=year+"-"+month+"-"+this.innerHTML; $("#calendar").css("display","none"); }); //标记颜色===================== $(".dateList li").each(function(i, elm){ var val = $(this).text(); if (n==0) { if(val<today){ $(this).addClass('ccc') }else if(val==today){ $(this).addClass('red') }else if(i%7==0 || i%7==6 ){ $(this).addClass('sun') } }else if(n<0){ $(this).addClass('ccc') }if(i%7==0 || i%7==6 ){ $(this).addClass('sun') } }); //定义标题日期 $("#calendar h4").text(year + "年" + (month + 1) + "月"); }; run(0); $(".a1").click(function(){ iNow--; run(iNow); }); $(".a2").click(function(){ iNow++; run(iNow); }) }); </script>
希望能对您有所帮助！