基于JQ的单双日历，本人自己写的哈，还没封装，但是也能用
<!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>
基于JQ的单双日历，本人自己写的哈，还没封装，但是也能用的更多相关文章
- 基于jq图片居中插件 [center]
最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...
- 基于jq插件开发及弹窗实例
基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属 ...
- 基于AngularJs的单页面程序
基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...
- 基于 Struts2 的单文件和多文件上传
文件的上传下载是 Web 开发中老生常谈的功能,基于 Struts2 框架对于实现这一功能,更是能够给我们带来很多的便利.Struts2 已经有默认的 upload 拦截器.我们只需要写参数,它就会自 ...
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- kaldi基于GMM的单音素模型 训练部分
目录 1. gmm-init-mono 模型初始化 2. compile-train-graghs 训练图初始化 3. align-equal-compiled 特征文件均匀分割 4. gmm-acc ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- 基于div表单模拟右对齐
基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
随机推荐
- 侯捷STL学习(一)
开始跟着<STL源码剖析>的作者侯捷真人视频,学习STL,了解STL背后的真实故事! 视频链接:侯捷STL 还有很大其他视频需要的留言 第一节:STL版本和重要资源 STL和标准库的区别 ...
- MySQL定时逻辑备份
当项目数据量不大时,备份可以采用逻辑备份. 数据库可以搭建一主一从,从库每天凌晨三点全量逻辑备份. 然后同时记录二进制文件,用来进行基于时间点的数据恢复. 其他备份方案详见我的思维导图:MySQL备份 ...
- itmacy_我的博客
开通博客的第一天,并不希望自己以后像写流水账一样来写自己的博客,而是希望每一篇博客,无论是转载还是原创,都是经过深思熟虑,并且有意义的...
- PHP基础入门（一）---世界上最好用的编程语言
作为一名程序员,我们应该都听过这样一个梗:PHP编程语言,是世界上最好用的编程语言~~~下面来和大家看一下,什么是PHP↓↓↓ PHP PHP又名超文本预处理器,是一种通用开源脚本语言.PHP主要适用 ...
- 点评阿里JAVA手册之异常日志（异常处理 日志规约 ）
下载原版阿里JAVA开发手册 [阿里巴巴Java开发手册v1.2.0] 本文主要是对照阿里开发手册,注释自己在工作中运用情况. 本文内容:异常处理 日志规约 本文难度系数为一星(★) 本文为第三篇 ...
- ThinkPHP5.0更改框架的验证方法对象->validate(true)->save();
我们更希望看到: // 新增对象至数据表 $result = $Teacher->validate(true)->save(); 而不是: // 新增对象至数据表 $result = $T ...
- hdu5803
hdu5803 题意 给出四个整数 A B C D,问有多少个四元组 (a, b, c, d) 使 a + c > b + d 且 a + d >= b + c ,0 <= a &l ...
- Java之【线程通信】--标志位练习
* 写两个线程,一个线程打印1-52,另一个线程答应字母A-Z. * 打印顺序为12A34B56C--5152Z.通过使用线程之间的通信协调关系. 注:分别给两个对象构造一个对象o,数字每打印两个或字 ...
- linux中的重要目录
1./boot 引导程序,内核的存放的目录. 此目录,包含了在引导过程中所必须的文件,引导程序的相关文件(如:grub,lilo以及相应的配置文件及linux操作系统内核相关文件). 2./sbin/ ...
- 如何编写Spring-Boot自动配置
摘要 本文主要介绍如何把一个spring的项目(特别是一些公共工具类项目),基于spring boot的自动配置的思想封装起来,使其他Spring-Boot项目引入后能够进行快速配置. AutoCon ...