<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小日历</title>
</head>
<style rel="stylesheet" type="text/css">
*{
padding:0;
margin:0;
}
/*---日历样式---*/
.mycalendar{
width:600px;
overflow: hidden;
position: absolute;
}
.mycalendar_wrap{
width: 600px;
}
.oneshow{
width:300px;
float: left;
}
.date_wrap{
position: relative;
float: left;
margin-left: 50px;
}
.date_wrap label{
float: left;
}
.date_wrap>span{
width: 280px;
height: 34px;
padding-left: 5px;
background: none;
border: 1px solid #ebe8e2;
border-radius: 4px;
display: inline-block;
float: left;
cursor: pointer;
line-height: 28px;
color: #666;
}
.mycalendar{
position: absolute;
left: 79px;
top: 38px;
}
.mycalendar header {
text-align: center;
font-size: 12px;
line-height: 24px;
height: 28px;
font-weight: bold;
background: #2cbafa;
color: #fff;
}
.mycalendar header i{
cursor: pointer;
margin-top: 7px;
}
.mycalendar header i.click_prev{
float: left;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 7px solid #fff;
border-bottom: 6px solid transparent;
margin-left: 5px;
}
.mycalendar header i.click_next{
float: right;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 7px solid #fff;
border-bottom: 6px solid transparent;
margin-right: 5px;
}
.mycalendar header i.click_nexttwo{
float: right;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 7px solid #fff;
border-bottom: 6px solid transparent;
margin-right: 5px;
}
.table_wrap thead tr td{
border-bottom: 1px solid #ebebeb;
height: 35px;
}
.table_wrap tbody tr td.td_hao{
color: #333;
}
.table_wrap tbody tr td.td_hao:hover{
background: #f47400;
color: #fff;
}
.table_wrap tbody tr td.td_hao:hover{
background: #f47400;
color: #fff;
}
.table_wrap tbody tr td.alread:hover{
background: none;
color: #999;
}
.table_wrap tbody tr td.td_hao.fwn{
background: #f47400;
color: #fff;
}
.table_wrap tbody tr td.alread{
cursor: default;
color: #999;
}
.table_wrap tbody tr td.xz{
cursor: default;
color: red;
}
.mycalendar tbody td{
cursor: pointer;
border:1px solid #ebebeb;
border-top:0;
}
.table_wrap{
border-left: 1px solid #cacaca;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca;
font-size: 12px;
padding:0px 10px 10px 10px;
box-sizing: border-box;
height: 248px;
}
.table_wrap table,.table_wrap thead,.table_wrap tbody,.table_wrap tr{
width: 100%;
}
.table_wrap table td{
text-align: center;
height: 34px;
box-sizing: border-box;
}
.table_wrap .zm{
color: #f47400;
}
.mycalendar.even{
width:600px;
height: 235px;
}
.mycalendar header {
text-align: center;
font-size: 12px;
line-height: 24px;
height: 28px;
font-weight: bold;
background: #2cbafa;
color: #fff;
}
.mycalendar header i{
cursor: pointer;
margin-top: 7px;
}
.mycalendar header i.click_prev{
float: left;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 7px solid #fff;
border-bottom: 6px solid transparent;
margin-left: 5px;
}
.mycalendar header i.click_next{
float: right;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 7px solid #fff;
border-bottom: 6px solid transparent;
margin-right: 5px;
}
.price{
display: block;
}
/*------按钮样式----*/
.Single,.Double{
border:1px solid #ebe8e2;
padding: 4px;
font-size: 14px;
cursor: pointer;
float: left;
}
.Single.cur,.Double.cur{
background: #0065CB;
color: #fff;
}
</style>
<body>
<span class="Single" id="Single">单日历</span>
<span class="Double" id="Double">双日历</span>
<div class="date_wrap star">
<label>开始入住：</label>
<span id="startime">请选择开始入住时间</span>
</div>
<div class="date_wrap end">
<label>离店日期：</label>
<span id="endtime">请选择离店时间</span>
</div>
<!--日历外框-->
<div class="mycalendar" id="mycalendar" style="display: none;">
<div class="mycalendar_wrap">
<div class="oneshow">
<header><i class="click_prev" id="click_prev"></i><span id='dates_y'></span><i class="click_next" style="display: none;" id="one_next"></i></header>
<div class="table_wrap">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<td class="zm">日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td class="zm">六</td>
</thead>
<tbody id="each_data">
</tbody>
</table>
</div>
</div>
<div class="oneshow">
<header><span id='dates_ys'></span><i id="click_next" class="click_next"></i> </header>
<div class="table_wrap">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<td class="zm">日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td class="zm">六</td>
</thead>
<tbody id="each_data_two">
</tbody>
</table>
</div>
</div>
</div>
</div><!--日历外框-->
<body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
//获取今日时间
var todayTime ={};
todayTime.d_Date = new Date();
todayTime.d_y = todayTime.d_Date.getFullYear(); // 获取当年
todayTime.d_m = todayTime.d_Date.getMonth()+1; //获取当月
todayTime.d_d = todayTime.d_Date.getDate(); //获取当日
// 定义 今天的零时零分零秒
todayTime.todayDate = todayTime.d_Date.setHours(0,0,0,0);
$(function(){
$('#Single').unbind('click').bind('click',function(){
$('.cur').removeClass('cur')
$(this).addClass('cur');
$('#one_next').show();
$('#mycalendar').css('width','300px')
})
$('#Double').unbind('click').bind('click',function(){
$('.cur').removeClass('cur')
$(this).addClass('cur');
$('#one_next').hide();
$('#mycalendar').css('width','600px')
})
// 日历内部点击事件 prev
$('#click_prev').unbind('click').bind('click',function(){
var starTime,endtime;
if($('#startime').attr('data')){
var dates = getgong_year_month($('#startime').attr('data'));
starTime = sizeDate(dates.year,dates.month,dates.dates);
}else{
starTime =null;
};
if($('#endtime').attr('data')){
var dates = getgong_year_month($('#endtime').attr('data'));
endtime = sizeDate(dates.year,dates.month,dates.dates);
}else{
endtime =null;
};
// 判断是否是第一个dom 点击
var flag = $('#mycalendar').hasClass('twomycalendar')?false:true;
var dom;
if(flag){
dom ='doms';
}else{
dom=null;
}
// 以 left 日历标题为基准点
var messageold = getgong_year_month($('#dates_y').attr('data')); // 获取年月
var messagePre = prevMoth(messageold.year,messageold.month) // 获取上一个年月
each_table(messagePre.year,messagePre.month,todayTime.todayDate,starTime,endtime,'left',dom);
var nextYearMonth = nextMoth(messagePre.year,messagePre.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endtime,'right',dom);
})
// 日历内部点击事件 next
$('#click_next,#one_next').unbind('click').bind('click',function(){
var starTime,endtime;
if($('#startime').attr('data')){
var dates = getgong_year_month($('#startime').attr('data'));
starTime = sizeDate(dates.year,dates.month,dates.dates);
}else{
starTime =null;
};
if($('#endtime').attr('data')){
var dates = getgong_year_month($('#endtime').attr('data'));
endtime = sizeDate(dates.year,dates.month,dates.dates);
}else{
endtime =null;
};
// 判断是否是第一个dom 点击
var flag = $('#mycalendar').hasClass('twomycalendar')?false:true;
var dom;
if(flag){
dom ='doms';
}else{
dom=null;
}
// 以 left 日历标题为基准点
var messageold = getgong_year_month($('#dates_y').attr('data')); // 获取年月
var messagePre = nextMoth(messageold.year,messageold.month) // 获取上一个年月
each_table(messagePre.year,messagePre.month,todayTime.todayDate,starTime,endtime,'left',dom);
var nextYearMonth = nextMoth(messagePre.year,messagePre.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endtime,'right',dom);
})
// 点击开始时间框
$('#startime').unbind('click').bind('click',function(){
// 移除标记
$('#mycalendar').removeClass('twomycalendar');
var $this = $(this);
if(!$this.attr('data')){
//1.为空
// 遍历日历data
each_table(todayTime.d_y,todayTime.d_m,todayTime.todayDate,null,null,'left');
var nextYearMonth = nextMoth(todayTime.d_y,todayTime.d_m);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,null,null,'right');
}else{
// 2.不为空的情况
//var datesTwo = $this.attr('data');
var dates = getgong_year_month($('#startime').attr('data'));
starTime = sizeDate(dates.year,dates.month,dates.dates);
if($('#endtime').attr('data')){
var datesTwo = getgong_year_month($('#endtime').attr('data'));
endTime = sizeDate(datesTwo.year,datesTwo.month,datesTwo.dates);
// 遍历日历data
each_table(dates.year,dates.month,todayTime.todayDate,starTime,endTime,'left','doms');
var nextYearMonth = nextMoth(dates.year,dates.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endTime,'right','doms');
}
}
$this.parent().append($('#mycalendar'))
$('#mycalendar').show();
});
// 点击结束时间框
$('#endtime').unbind('click').bind('click',function(){
// 标记
$('#mycalendar').addClass('twomycalendar')
var $this = $(this);
$this.parent().append($('#mycalendar'))
$('#mycalendar').show();
if($this.attr('data')){
var dates = getgong_year_month($('#startime').attr('data'));
starTime = sizeDate(dates.year,dates.month,dates.dates);
var datesTwo = getgong_year_month($('#endtime').attr('data'));
endTime = sizeDate(datesTwo.year,datesTwo.month,datesTwo.dates);
// 遍历日历data
each_table(datesTwo.year,datesTwo.month,todayTime.todayDate,starTime,endTime,'left');
var nextYearMonth = nextMoth(datesTwo.year,datesTwo.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endTime,'right');
}else{
if(!$('#startime').attr('data')){
alert('请先输入起始日期');
return;
}
}
});
});
// 点击日历内部data
function show(obj){
var $this = $(obj);
var flag = $('#mycalendar').hasClass('twomycalendar')?false:true;
if(flag){
$('#startime').html($this.attr('data')).attr('data',$this.attr('data'));
$('#mycalendar').addClass('twomycalendar');
$('#endtime').parent().append($('#mycalendar'));
// 第一框选择时间 点击之后，第二个框的时间就由第一个框为基准点
// 这里进行第二个框的遍历 保留第一个time 并且第二个不能超过第一个time
// 以 left 日历标题为基准点
//var saveStartTime =sizeDate(messageold.year,messageold.month,messageold.dates);
var starTime,endtime;
if($('#startime').attr('data')){
var dates = getgong_year_month($('#startime').attr('data'));
starTime = sizeDate(dates.year,dates.month,dates.dates);
}else{
starTime =null;
};
if($('#endtime').attr('data')){
var dates = getgong_year_month($('#endtime').attr('data'));
endtime = sizeDate(dates.year,dates.month,dates.dates);
}else{
endtime =null;
};
if(!$('#endtime').attr('data')){
var messageold = getgong_year_month($this.attr('data')); // 获取年月
each_table(messageold.year,messageold.month,todayTime.todayDate,starTime,endtime,'left');
var nextYearMonth = nextMoth(messageold.year,messageold.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endtime,'right');
}else{
var messageold = getgong_year_month($('#endtime').attr('data')); // 获取年月
each_table(messageold.year,messageold.month,todayTime.todayDate,starTime,endtime,'left');
var nextYearMonth = nextMoth(messageold.year,messageold.month);
// 当第二个框有值的时候判断
if(starTime<endtime){
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endtime,'right');
}else{
// 当选中的第一个框里面的值 大于第二个里面的值 就获取第一个框里面的值 的后一天
var nextDay = GetDateStr(new Date($this.attr('data')),1);
$('#endtime').html(nextDay.year+'-'+nextDay.month+'-'+nextDay.dates).attr('data',nextDay.year+'-'+nextDay.month+'-'+nextDay.dates);
if($('#endtime').attr('data')){
var dates = getgong_year_month($('#endtime').attr('data'));
endtime = sizeDate(dates.year,dates.month,dates.dates);
}else{
endtime =null;
};
each_table(nextDay.year,nextDay.month,todayTime.todayDate,starTime,endtime,'left');
var nextYearMonth = nextMoth(nextDay.year,nextDay.month);
each_table(nextYearMonth.year,nextYearMonth.month,todayTime.todayDate,starTime,endtime,'right');
}
}
}else{
$('#endtime').html($this.attr('data')).attr('data',$this.attr('data'));
$('#mycalendar').hide();
}
};
// 传入 年 月 今天之前的时间 范围时间
function each_table(thisYear,thisMonth,beforeTodayTime,starTime,endTime,pos,dom){
var temp_d = new Date(thisYear,thisMonth-1,1);
var first_d = temp_d.getDay(); //返回本月1号是星期几
temp_d = new Date(thisYear, thisMonth, 0);
var all_d = temp_d.getDate();//返回本月共有多少天,同时避免复杂的判断润年不润年
var html="",i_d;
for(var i=1;i<=42;i++){
if(first_d<i&&i<=(all_d+first_d)){
// 在范围内
i_d=i-first_d; //显示出几号
if(sizeDate(thisYear,thisMonth,i_d)<beforeTodayTime){
// 判断今天之前
html+="<td class='td_hao alread' data='"+thisYear+"-"+thisMonth+"-"+i_d+"' ";
}else if(starTime&&endTime&&sizeDate(thisYear,thisMonth,i_d)>=starTime&&sizeDate(thisYear,thisMonth,i_d)<=endTime){
// 开始时间与结束时间范围内
html+="<td class='td_hao fwn' onclick='show(this)' data='"+thisYear+"-"+thisMonth+"-"+i_d+"' ";
}else if(starTime&&(sizeDate(thisYear,thisMonth,i_d)<starTime)&&dom){
//判断dom为1 dom1 中所有小于 所有小于dom1 时间 但是又大于昨天 可选
html+="<td class='td_hao' onclick='show(this)' data='"+thisYear+"-"+thisMonth+"-"+i_d+"' ";
}else if(starTime&&(sizeDate(thisYear,thisMonth,i_d)<starTime)&&!dom){
// 判断 dom为 2 所有小于dom1 时间 但是大于昨天的 不可选
html+="<td class='td_hao alread' data='"+thisYear+"-"+thisMonth+"-"+i_d+"' ";
}else{
html+="<td class='td_hao' data='"+thisYear+"-"+thisMonth+"-"+i_d+"' onclick='show(this)'";
}
if (thisYear==todayTime.d_y&&thisMonth==todayTime.d_m&&todayTime.d_d==i_d){ //日历中为当天
html+=" style='color:red'>今天</td>";
}else{
html+="><span class='dates'>"+i_d+"</span><span class='price'>￥155</span></td>";
}
}else{
// 不在范围内
html+="<td> </td>";
}
if(i%7==0&&i<42){
html+="</tr><tr>";
}
}
html+="</tr></table>";
if(pos=='left'){
$('#dates_y').html(thisYear+'年'+thisMonth+'月').attr('data',thisYear+'-'+thisMonth);
document.getElementById("each_data").innerHTML=html;
}else{
$('#dates_ys').html(thisYear+'年'+thisMonth+'月').attr('data',thisYear+'-'+thisMonth);
document.getElementById("each_data_two").innerHTML=html;
};
};
// 比较日期大小
function sizeDate(year,month,date){
return new Date(year,month-1,date).setHours(0,0,0,0);
}
//双日历 下一月
function nextMoth(year,month){
var year =+year;
var month = +month;
if (month==12) {
month=1;
year+=1;
} else {
month+=1;
}
return {
year:year,
month:month,
}
};
//双日历 上一月
function prevMoth(year,month){
var year =+year;
var month = +month;
if (month==1) {
month=12;
year-=1;
} else {
month-=1;
}
return {
year:year,
month:month,
}
};
//通过横杠来获取 年月信息
function getgong_year_month(dataMessage){
var Obj = dataMessage.split('-');
return {
year:Obj[0],
month:Obj[1],
dates:Obj[2],
}
}
// 获取后一天的数据
function GetDateStr(time,AddDayCount) {
var dd =time;
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1; //获取当前月份的日期
var d = dd.getDate();
return {
year:y,
month:m,
dates:d
}
}
</script>