首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery简单实现日历的方法

Posted in Javascript onMay 04, 2015

本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下：

原理挺简单的，首先算出一个月有多少天，再算出这个月的第一天是星期几，接着顺序排下来就可以了.

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<title>tryMyOwnCalendar</title>
<script src="js/jquery.min.js" language="javascript"></script>
<style>
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% auto; overflow:hidden;}
.ccaltop{ width:100%; border-radius:5px; }
.caltline1,.caltline2{ width:94%; background-color:#F90; overflow:hidden; padding:2% 3%;}
.caltline1 p,.caltline2 p{ float:left; width:10%; font-weight:700; text-align:right;}
.caltline1 .bookdate{ width:90%; text-align:left;}
.caltline2{ background-color:#FFF; display:none;}
.caltline2 p{ width:20%;}
.caltline2 .datetext{ width:35%; border:1px solid #000; 
background-color:#FFF; font-weight:700;}
.inputdate{ color:#F60;}
.calender{ width:100%; margin-top:3%; overflow:hidden; display:none;}
.selectmouth{ background-color:#F30; width:94%; 
overflow:hidden;padding:2% 3%;border-radius:5px 5px 0 0;}
.selectmouth p{ float:left; width:33%; color:#FFF;
font-weight:700; cursor:pointer;}
.selectmouth .selectdate{ width:100%; background-color:#F30; 
border:none; color:#FFF; font-weight:700; text-align:center;} 
.data_table{ width:100%;border:1px solid #cccccc;
border-collapse:collapse; }
.data_table thead{ background-color:#333;}
.data_table thead td{ color:#FFF; text-align:center;
border:1px solid #333;border-collapse:collapse; padding:1% 0;
}
.data_table tbody td{border:1px solid #cccccc;
border-collapse:collapse;
text-align:center;color:#0C6;padding:1% 0;
}
.data_table tbody td.orderdate{ color:#000;}
.data_table tbody td.tdselect{ color:#fff;background-color:#999}
</style>
</head>
<body>
 <div class="choosecal">
 <div class="ccaltop">
  <div class="caltline1">
  <p class="bookdate">选择入住日期……</p>
  <p><img src="images/next.png" /></p>
  </div>
  <div class="caltline2">
  <p style=" width:80%; text-align:left;">
   <input type="text" value=""
 class="datetext datetoday inputdate" readonly=readonly />
   至
   <input type="text" value="" class="datetext dateendday"
 readonly=readonly />
  </p>
  <p><input type="button" value="确定" class="btsure" /></p>
  </div>
 </div>
 <div class="calender">
  <div class="selectmouth">
  <p style="text-align:right" class="lastmonth"><</p>
  <p><input type="text" class="selectdate" value="2014年2月" readonly=readonly /></p>
  <p class="nextmonth">></p>
  </div>
  <table class="data_table" cellspacing="0px">
  <thead>
   <tr>
   <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   <tr>
   <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
   </tbody>
  </table>
 </div>
 </div>
 <script>
 window.onload=function(){
 var mydate=new Date();
 var thisyear=mydate.getFullYear();
 var thismonth=mydate.getMonth()+1;
 var thisday=mydate.getDate();
 var mydate1=new Date();
 var thisyear1=mydate1.getFullYear();
 var thismonth1=mydate1.getMonth()+1;
 var thisday1=mydate1.getDate();
 var selectday=thisday; 
 //标记日期
 var indate=thisday; 
 //入住日期
 var inmonth=thismonth; 
 //入住月份
 var outdate=thisday+1; 
 //退房日期
 var outmonth=thismonth; 
 //退房月份
 var datetxt="datetoday";  
 var datefirst;
 var datesecond;
 function initdata(){ 
 //日期初始填充
 var tdheight=jQuery(".data_table tbody tr").eq(0).find("td").height();
 jQuery(".data_table tbody td").css("height",tdheight);
 jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");
 var days=getdaysinonemonth(thisyear,thismonth);
 var weekday=getfirstday(thisyear,thismonth);
 setcalender(days,weekday); 
 markdate(thisyear,thismonth,selectday);
 orderabledate(thisyear,thismonth,thisday);
 }
 initdata();
 jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+thisday);
 jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+(thisday+1));
 function orderabledate(thisyear,thismonth,thisday){   
 //能预订的日期
 if(thisyear<thisyear1){
 jQuery(".data_table tbody td").addClass("orderdate");
 jQuery(".data_table tbody td").removeClass("usedate");
 }else if(thisyear==thisyear1){
 if(thismonth<thismonth1){
 jQuery(".data_table tbody td").addClass("orderdate");
 jQuery(".data_table tbody td").removeClass("usedate");
 }else if(thismonth==thismonth1){
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
 if(tdhtml<thisday){
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("orderdate");
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
 }else{
  jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("orderdate");
 }
 }
 }
 }else{
 jQuery(".data_table tbody td").removeClass("orderdate");
 }
 }else{
 jQuery(".data_table tbody td").removeClass("orderdate");
 }
 }
 function markdate(thisyear,thismonth,thisday){   
 //标记日期
 var datetxt=thisyear+"年"+thismonth+"月";
 var thisdatetxt=thisyear1+"年"+thismonth1+"月";
 jQuery(".data_table td").removeClass("tdselect");
 if(datetxt==thisdatetxt){
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
 if(tdhtml==thisday){
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("tdselect");
 }
 }
 }
 }
 }
 function getdaysinonemonth(year,month){ 
 //算某个月的总天数
 month=parseInt(month,10);
 var d=new Date(year,month,0);
 return d.getDate();
 }
 function getfirstday(year,month){ 
 //算某个月的第一天是星期几
 month=month-1;
 var d=new Date(year,month,1);
 return d.getDay();
 }
 function setcalender(days,weekday){ 
 //往日历中填入日期
 var a=1;
 for(var j=0;j<6;j++){
 for(var i=0;i<7;i++){
 if(j==0&&i<weekday){
 jQuery(".data_table tbody tr").eq(0).find("td").eq(i).html("");
 jQuery(".data_table tbody tr").eq(0).find("td").eq(i).removeClass("usedate");
 }else{
 if(a<=days){
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html(a);
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("usedate");
 a++;
 }else{
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html("");
 jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
 a=days+1;
 }
 }
 }
 }
 }
 function errorreset(){ 
 //日期报错后，数据重置
 thisyear=thisyear1;
 thismonth=thismonth1;
 thisday=thisday1;
 selectday=thisday1;
 indate=thisday1;
 inmonth=thismonth1;
 outdate=thisday1+1;
 outmonth=thismonth1;
 initdata();
 }
 jQuery(".data_table tbody td.usedate").live("click",function(){ //点击日期的效果
 var thishtml=parseInt(jQuery(this).html());
 jQuery(".data_table td").removeClass("tdselect");
 jQuery(this).addClass("tdselect");
 selectday=thishtml;
 if(datetxt=="datetoday"){
 jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+selectday);
 indate=selectday;
 inmonth=thismonth;
 }else{
 jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+selectday);
 outdate=selectday;
 outmonth=thismonth;
 if(outmonth<inmonth){
 alert("日期填写错误");
 jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
 jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
 errorreset();
 }else if(outmonth==inmonth){
 if(outdate<=indate){
 alert("日期填写错误");
 jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
 jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
 errorreset();
 }
 }
 }
 });
 jQuery(".datetoday").click(function(){ 
 //选择入住日期
 datetxt="datetoday";
 jQuery(".datetext").removeClass("inputdate");
 jQuery(this).addClass("inputdate");
 });
 jQuery(".dateendday").click(function(){ 
 //选择退房日期
 datetxt="dateendday";
 jQuery(".datetext").removeClass("inputdate");
 jQuery(this).addClass("inputdate");
 });
 jQuery(".lastmonth").click(function(){ 
 //上一个月
 thismonth--;
 if(thismonth==0){
 thismonth=12;
 thisyear--;
 }
 initdata();
 });
 jQuery(".nextmonth").click(function(){ 
 //上一个月
 thismonth++;
 if(thismonth==13){
 thismonth=1;
 thisyear++;
 }
 initdata();
 });
 jQuery(".btsure").click(function(){ 
 //确定日期
 var start = new Date($(".datetoday").val()); 
 var end = new Date($(".dateendday").val()); 
 var diff = parseInt((end - start) / (1000*3600*24)); 
 jQuery(".bookdate").html(inmonth+"月"+indate+"日至"+outmonth+"月"+outdate+"日("+diff+")晚")
 });
 jQuery(".caltline1").toggle(
 function(){
 jQuery(".caltline2").slideDown(500);
 jQuery(".calender").fadeIn(500);
 errorreset();
 jQuery(".caltline1").find("img").attr("src","images/iconpointup.png");
 },
 function(){
 jQuery(".caltline2").slideUp(500);
 jQuery(".calender").fadeOut(500);
 jQuery(".caltline1").find("img").attr("src","images/iconpoint.png");
 }
 );
 }
</script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery简单实现日历的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
xmlplus组件设计系列之选项卡（Tabbar)（5）
May 03 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
JSON是什么？有哪些优点？JSON和XML的区别？
Apr 29 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
jQuery实现表格展开与折叠的方法
May 04 #Javascript
JS数字抽奖游戏实现方法
May 04 #Javascript
BOSE(2) MOTOROLA(1) 耳机(1) ICF-2010(1) 单管机(1) 77A(2) 晶体管(2) 音箱(1) 收信机(3) 春雷3P7(1)
You might like
Zend 输出产生XML解析错误
2009/03/03 PHP
JS array 数组详解
2009/03/22 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）
2011/09/28 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python中查看文件名和文件路径
2017/03/31 Python
python aiohttp的使用详解
2019/06/20 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python文件路径名的操作方法
2019/10/30 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
HearthSong官网：儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
.net软件工程师面试题
2015/03/31 面试题
自荐信怎么写好
2013/11/11 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
紧急通知
2015/04/17 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
廉洁自律证明
2015/06/24 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android