基于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表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
随机推荐
- Java经典编程题50道之十二
企业发放的奖金根据利润提成:利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分 ,可提成7.5%:20万到40万之间 ...
- 翻译Algorithms Unlocked
写在前面 本书是由<算法导论>(Introduction to Algorithms)的作者之一Thomas H. Cormen编写的适合对算法感兴趣但自身基础又不好的同学阅读.很多人评价 ...
- JVM-6.即时编译器
一.即时编译器 二.运行模式 三.基本原理 四.编译优化技术 五.Java与C/C++的编译器对比 六.参考 一.即时编译器 1.在部分虚拟机(如Hotspot.IBM J9)中,Java ...
- OpenGL ES 2.0 渲染管线 学习笔记
图中展示整个OpenGL ES 2.0可编程管线 图中Vertex Shader和Fragment Shader 是可编程管线: Vertex Array/Buffer objects 顶点数据来源, ...
- Markdown软件推荐--Typora
非常适合记录笔记. ▌ 所见即所得+所写即所得 Ctrl+/快捷键,转换成纯代码界面. ▌ CSS自设置样式 1.Theme下自带样式系列 2.File- Preference中选择Open Them ...
- 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...
- 利用浏览器查找font-family的css编码
提供一种利用Chrome快速查找字体编码的小技巧 打开浏览器,按下键盘F12 点击Console控制台 输入escape("要查询的字体中文名称")(注意:括号与引号都是英文输入法 ...
- eclipse 更改官方配色
打开Eclipse,help->Install new software, 输入 http://eclipse-color-theme.github.com/update,等待就OK了. 然后w ...
- 实现最简单PHP MVC实例
关于网上大多MVC的简介我就不再多说,就是Model(模型)View(视图) C(控制器)这里作为一个刚入门PHP MVC框架的我,这里我搭建一个最简易的mvc项目,从而理解MVC 1在apache服 ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...