基于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表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
随机推荐
- 自己动手实现html去标签和文本提取
随意观看 [TOC] 工具 python3.6 正则表达式(别的语言思路一样,容易借鉴) python正则表达式:flags的应用 这里主要介绍一下re.compile(pattern[, flags ...
- Python教程(2.6)——list和tuple简介
Python中内置的类型有list和tuple. List list类似于C/C++的数组,可以存储多个数字.例如你可能会需要存储一个班里所有人的名字.这时就可以用到list.list中存储的数据叫做 ...
- 一天搞定CSS：BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...
- Java之进程与线程练习
1.设计一个线程类:创建3个子线程,每个线程分别打印数字,分别睡眠100,200,300ms ->每个执行都是20次 代码: package Homework; //1.设计一个线程类:创建3个 ...
- css中那些容易被我们程序猿所忽略的选择器
css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...
- SDWebImage源码阅读-第一篇
一 题外话 之前写过一篇最新版SDWebImage的使用,也简单的介绍了一下原理.这两天正梳理自己的知识网络,觉得有必要再阅读一下源码,一是看具体实现,二是学习一下优秀开源代码的代码风格,比如接口设计 ...
- java基础(五章)
一. 调试 步骤1:设置断点(不能在空白处设置断点) 步骤2:启动调试 步骤3:调试代码(F6单步跳过)笔记本Fn+F6(F5) 步骤4:结束调试 掌握调试的好处? l 很清晰的看到, ...
- Nmap脚本文件分析（AMQP协议为例）
Nmap脚本文件分析(AMQP协议为例) 一.介绍 上两篇文章 Nmap脚本引擎原理 编写自己的Nmap(NSE)脚本,分析了Nmap脚本引擎的执行过程,以及脚本文件的编写,这篇文章将以解析AMQ ...
- 前端学习数据库MYSQL
这篇文章主要写了 1.数据库MYSQL 2.基本上会遇到的所有SQL语句 数据库可视化软件------Navicat 数据库里边存放的是表,表与表之间是有关联的,而且可以对表进行相关操作(增,删,改, ...
- AngularJS高级程序设计读书笔记 -- 控制器篇
作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...