基于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表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
随机推荐
- laravel实现多数据库连接配置
只需三步,便可实现. 第一步,在.env文件中配置 DB_HOST=localhost DB_DATABASE=test DB_USERNAME=root DB_PASSWORD=root DB_HO ...
- Java虚拟机原理
1.编译机制 分析和输入到符号表: 词法分析:将代码转化为token序列 语法分析:由token序列生成抽象语法树 输入到符号表:将类中出现的符号输入到类的符号表 注解处理: 处理用户自定义注解,之后 ...
- EIGRP负载均衡、手工汇总、泄露明细、安全认证
基于6.6.6.6/24访问13.1.1.1/24进行负载均衡实例图 一.等价负载均衡 等价负载均衡前,R5路由器背后的6.6.6.6/24访问R1的13.1.1.1/24, 从15.1.1.0/24 ...
- opencv基础到进阶（2）
本文为系列文章的第2篇,主要讲解对图像的像素的操作方法. 2.1存取像素值 为了存取矩阵元素,需要指定元素所在的行和列,程序会返回相应的元素.单通道图像返回单个数值,多通道图像,返回的则是一组向量(V ...
- 探讨SQL Server并发处理存在就更新七种解决方案
前言 本节我们来讲讲并发中最常见的情况存在即更新,在并发中若未存在行记录则插入,此时未处理好极容易出现插入重复键情况,本文我们来介绍对并发中存在就更新行记录的七种方案并且我们来综合分析最合适的解决方案 ...
- 部署项目到weblogic时提示文件被锁，导致报错
部署项目到weblogic中出现一个“黄叹号!”.报错如下: (1) Deployment is out of date due to changes in the underlying projec ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- Bash内置命令exec和重定向
Bash内置命令exec可以替换当前程序而不需要启动一个新的进程,可以改变标准输入和输出而不需要启动一个新的子进程.如果文件用exec打开,read命令就会把文件指针每次指向下一行直到文件的末尾,如果 ...
- java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleExcept问题解决方案
在部署Dynamic Web Project时,如果正确配置web.xml或者标注时,仍然出现以上异常的话,可以尝试以下内容讲解的方法: 首先,双击eclipse中的servers,位置如下图&quo ...
- [0] 自定义特性AttributeUsage
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Fxframe ...