原生JS实现相邻月份日历_javascript技巧

来源:脚本之家  责任编辑:小易  

日期控件,主要2113使用js的Date对象。下面5261是简单是日期控件,仅供参考4102:<style>    * { margin:0; padding:0; }    .calander { position:relative; width:210px; border:1px solid red; margin:50px auto; }    .calander a { position:absolute; top:0; height:40px; line-height:40px; }    .calander .prev { left:0; padding-left:10px; }    .calander .next { right:0; padding-right:10px; }    .calander span { display:block; height:40px; line-height:40px; text-align:center; font-weight:bold; }    .calander ul, .calander ol { overflow:hidden; }    .calander li { float:left; width:30px; height:30px; line-height:30px; text-align:center; list-style:none; }    .calander .week { color:#f40; }    .calander .today { color:blue; }    .calander .past { color:#ccc; }    </style>    <script>    window.onload=function (){    var oDiv=document.getElementById('calander');    var oSpan=oDiv.getElementsByTagName('span')[0];    var oUl=oDiv.getElementsByTagName('ul')[0];    var oPrev=oDiv.getElementsByTagName('a')[0];    var oNext=oDiv.getElementsByTagName('a')[1];        var now=0;    create();        oNext.onclick=function (){    1653now++;    create();    };     function create()    {    oUl.innerHTML='';    // span    var oDate=new Date(); // ?    oDate.setMonth(oDate.getMonth()+now, 1);    var y=oDate.getFullYear();    var m=oDate.getMonth();    oSpan.innerHTML=y+'年'+(m+1)+'月';        // 创建空格    var oDate=new Date(); // ?    oDate.setMonth(oDate.getMonth()+now, 1);    oDate.setDate(1);    var week=oDate.getDay(); // 0-6    (week==0) && (week=7);        for (var i=0; i<week-1; i++)    {    var oLi=document.createElement('li');        oUl.appendChild(oLi);    }        // 创建真正日期    var oDate=new Date();//?    oDate.setMonth(oDate.getMonth()+now, 1);    oDate.setMonth(oDate.getMonth()+1, 0);    var total=oDate.getDate();    for (var i=0; i<total; i++)    {    var oLi=document.createElement('li');        oLi.innerHTML=i+1;    oUl.appendChild(oLi);    }        // 处理周末    var aLi=oUl.children;        for (var i=0; i<aLi.length; i++)    {    if (i%7==5 || i%7==6)    {    aLi[i].className='week';    }    }        // 今天    if (now == 0)    {    var oDate=new Date();        for (var i=0; i<aLi.length; i++)    {    if (aLi[i].innerHTML == oDate.getDate())    {    aLi[i].className='today';    }    else if (aLi[i].innerHTML < oDate.getDate())    {    aLi[i].className='past';    }    }    }        }    };    </script>    </head>    <body>    <div class="calander" id="calander">    <a href="javascript:;" class="prev">←</a>    <a href="javascript:;" class="next">→</a>        <span>2015年04月</span>    <ol>    <li>一</li>    <li>二</li>    <li>三</li>    <li>四</li>    <li>五</li>    <li class="week">六</li>    <li class="week">日</li>    </ol>    <ul>        </ul>    </div>    </body>,你好!!2113出现这个现象,是你的jQuery与jQuery UI版本5261不匹配4102造成的!你使用的jquery-latest.min.js的版本是1.10.2,而jQuery UI的版本是1.8.17,由于1653jQuery 1.10较之前本版本改动不少,因此很多方法在jQuery UI中已经无法使用。解决的方法很简单:1.    要么降低jQuery的版本,使用1.8版本的;2.    要么升高jQuery UI的版本,使用1.10版本的;本回答被提问者和网友采纳,报什么错啊?2113还有看5261你引入的js只有4102jquery和ui,是不是少1653了jquery.ui.datepicker.min.jsjquery.ui.datepicker-zh-CN.min.jsjquery.ui.datepicker-fr.min.js这三个啊,可能是你的jquery-latest.min.js和你2113的jquery-ui.min.js不兼容造成的,你可以5261换个jquery-ui.js的版本,用官4102网给出的那个http://code.jquery.com/ui/1.10.3/jquery-ui.js 就可1653以显示日历的插件,没有问题的,我都已经替你测过啦直接用你给的源代码,在浏览器调试会报TypeError: $.browser is undefined的错误,你也没必要追本溯源,直接换个jquery-ui的版本就行啦,www.zgxue.com防采集请勿采集本网。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS写的日历月历 - demo by js.alixixi.com</title><style type="text/css"><!--body {font-size: 14px;line-height: 20px;margin: 0px;padding: 0px;text-align:center;font-family: Arial;}#overlay{position:absolute;z-index:999;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.3;filter:alpha(opacity=30);display:none;}#win{position:absolute;z-index:999;top:50%;left:50%;width:400px;height:200px;background:rgba(00, 00, 00, 0.5);margin:-100px 0 0 -200px;display:none;}#win #otitle{color:#fff;height:33px;padding-left:10px;text-align:left;background:rgba(00, 00, 00, 0.7);}#win #otitle #otitlestr {float:left;width:200px;height:30px;line-height:30px;}#win #otitle #close {font-size:24px;width:33px;height:33px;line-height:33px;text-align:center;font-weight:bold;float:right;cursor:pointer;}#win #showstr {color:#fff;margin:10px;text-align:left;}.clear{clear: both;}em{font-style: normal;}ul,li{list-style-type: none;margin:0px;padding:0px;}#newDate{width:1230px;height:auto;margin:35px auto 0 auto;}#newDate #nowDate{width:600px;height:600px;float:left;cursor:pointer;}#newDate #nextDate{width:600px;height:600px;float:right;cursor:pointer;}#newDate .Header{width:594px;height:50px;background:#e6dcda;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #FFF;position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none; }#newDate .c{font-size:24px;font-weight:bold;height:50px;line-height:50px;text-align:center;}#newDate .l{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; left:14px;}#newDate .r{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; right:14px;}#newDate .Weeks{width:595px;height:30px;}#newDate span{font-weight:bold;width:84px;height:30px;line-height:30px;text-align:center;background:#e6dcda;margin-right:1px;float:left;}#newDate ul li{color:#999;font-size:24px;width:84px;height:70px;line-height:70px;text-align:center;margin-top:1px;margin-right:1px;background:#f5f5f5;float:left;}--></style><!--[IF lt IE 9]><style>#win,#win #otitle{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);}</style><![endif]--><script type="text/javascript">window.onload = function(){ function $(id){return typeof id === "string" ? document.getElementById(id) : id;} function lightBoxShow(title,str) { var oWin = $("win"); var oLay = $("overlay"); $("otitlestr").innerHTML = title; $("showstr").innerHTML = str; oLay.style.display = "block"; oWin.style.display = "block"; $("close").onclick = function () { oLay.style.display = "none"; oWin.style.display = "none" } } var newDate = document.getElementById("newDate"); var nowDate = document.getElementById("nowDate"); var nextDate = document.getElementById("nextDate"); var nDate = new Date(); if(nDate.getMonth()+1==12){ viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true); viewDate(nextDate,nDate.getFullYear()+1,1); }else{ viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true); viewDate(nextDate,nDate.getFullYear(),nDate.getMonth()+2); } showBtn(); function viewDate(obj,year,month,bBtn){ var nDate = new Date(); var dayNum = 0; if(!obj.bBtn){ obj.Header = document.createElement("div"); obj.Header.className = "Header"; obj.appendChild(obj.Header); var Weeks = document.createElement("div"); Weeks.className = "Weeks"; obj.appendChild(Weeks); var weeksArr = ['SUN','MON','TUE','WEB','THU','FRI','SAT']; for(var i=0;i<7;i++){ var nSpan = document.createElement("span"); nSpan.innerHTML = weeksArr[i]; if(i==0 || i==6){ nSpan.style.color = "red"; } Weeks.appendChild(nSpan); } var nUl = document.createElement("ul"); for(var i=0;i<42;i++){ var nLi = document.createElement("li"); nUl.appendChild(nLi); } obj.appendChild(nUl); obj.bBtn = true; } obj.Header.innerHTML = ( bBtn ? '<div class="l">< <em>'+(month-1)+'</em></div>' : '<div class="r"><em>'+(month+1)+'</em> ></div>')+'<div class="c"><em>'+year+'</em>-<em>'+month+'</em></div>'; var aLi = obj.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].innerHTML = ""; aLi[i].style.background = "#f5f5f5"; aLi[i].style.color = "#999"; } if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){ dayNum = 31; } else if(month==4 || month==6 || month==9 || month==11){ dayNum = 30; } else if(month==2 && isLeapYear(year)){ dayNum = 29; } else{ dayNum = 28; } nDate.setFullYear(year); nDate.setMonth(month-1); nDate.setDate(1); function Today(){ var tDate = new Date(); var tEm = aLi[i].parentNode.parentNode.getElementsByTagName("em"); var tMonth = parseInt(tEm[2].innerHTML); var tYear = parseInt(tEm[1].innerHTML); if(aLi[i].innerHTML == tDate.getDate() && tYear == tDate.getFullYear() && tMonth == tDate.getMonth()+1){ aLi[i].style.color = "#000"; aLi[i].style.background = "#e6dcda"; } } switch(nDate.getDay()){ case 0: for(var i=0;i<dayNum;i++){ aLi[i].innerHTML = i+1; Today(); } break; case 1: for(var i=0;i<dayNum;i++){ aLi[i+1].innerHTML = i+1; Today(); } break; case 2: for(var i=0;i<dayNum;i++){ aLi[i+2].innerHTML = i+1; Today(); } break; case 3: for(var i=0;i<dayNum;i++){ aLi[i+3].innerHTML = i+1; Today(); } break; case 4: for(var i=0;i<dayNum;i++){ aLi[i+4].innerHTML = i+1; Today(); } break; case 5: for(var i=0;i<dayNum;i++){ aLi[i+5].innerHTML = i+1; Today(); } break; case 6: for(var i=0;i<dayNum;i++){ aLi[i+6].innerHTML = i+1; Today(); } break; } if(month==1 && bBtn){ obj.Header.getElementsByTagName('em')[0].innerHTML = 12; } else if(month==12 && !bBtn){ obj.Header.getElementsByTagName('em')[0].innerHTML = 1; } } function isLeapYear(year){ if(year%4==0 && year%100!=0){ return true; } else{ if(year%400==0){ return true; } else{ return false; } } } function showBtn(){ var nowEm = nowDate.getElementsByTagName("em"); var nextEm = nextDate.getElementsByTagName("em"); var leftMonth = parseInt(nowEm[0].innerHTML); var leftYear = parseInt(nowEm[1].innerHTML); var rightMonth = parseInt(nextEm[0].innerHTML); var rightYear = parseInt(nextEm[1].innerHTML); nowEm[0].parentNode.onclick = function(){ if(leftMonth == 12){ viewDate(nowDate,leftYear-1,leftMonth,true); viewDate(nextDate,leftYear,1); } else{ viewDate(nowDate,leftYear,leftMonth,true); viewDate(nextDate,leftYear,leftMonth+1); } showBtn(); }; nextEm[0].parentNode.onclick = function(){ if(rightMonth == 1){ viewDate(nowDate,rightYear,12,true); viewDate(nextDate,rightYear+1,rightMonth); } else{ viewDate(nowDate,rightYear,rightMonth-1,true); viewDate(nextDate,rightYear,rightMonth); } showBtn(); }; } function nowDay(){ var tLi = newDate.getElementsByTagName("li"); var tDate = new Date(); for(var i=0;i<tLi.length;i++){ tLi[i].onmouseover = function(){ if(this.innerHTML != ""){ this.style.color = "#000"; this.style.background = "#e6dcda"; } } tLi[i].onmouseout = function(){ if(this.innerHTML != ""){ this.style.color = "#999"; this.style.background = "#f5f5f5"; } } tLi[i].onclick = function(){ var tEm = this.parentNode.parentNode.getElementsByTagName("em"); var tMonth = parseInt(tEm[2].innerHTML); var tYear = parseInt(tEm[1].innerHTML); if(this.innerHTML!=""){ lightBoxShow(tYear+"-"+tMonth+"-"+this.innerHTML+" Message","None"); //alert(tYear+"-"+tMonth+"-"+this.innerHTML); } } } for(var j=tLi.length/2;j<tLi.length;j++){ if(tLi[j].innerHTML == tDate.getDate()){ tLi[j].style.color = "#000"; tLi[j].style.background = "#e6dcda"; } } } nowDay();}</script></head><body><div id="newDate"> <div id="nextDate"></div> <div id="nowDate"></div></div><div id="overlay"></div><div id="win"> <div id="otitle"> <div id="close">×</div> <div id="otitlestr"></div> </div> <div id="showstr"></div></div></body></html>

推荐这个: 演示地址:http://dpdemo.my97.net/ 作者BLOG:http://blog.csdn.net/my97/

效果:

以上就是原生JS实现双界面日历的详细内容,更多关于js 日历的资料请关注真格学网其它相关文章! 您可能感兴趣的文章:JavaScript实现简单日历效果基于javascript实现日历功能原理及代码实例原生js实现日历效果JS实现简单日历特效js实现简单的日历显示效果函数示例原生JavaScript实现日历功能代码实例(无引用Jq)javascript实现日历效果JS实现带阴历的日历功能详解javascript实现考勤日历功能

你好,可以使用My97日期控件,简单示例 导入js直接使用,具体详细使用可参考文档

去年末我复自己写了个jquery的日历制插件,我2113当时的思路是这样5261的:1,获取每月第一天是星4102期几1653 eg:32,获取每月多少天 eg:30然后循环,30天,循环30次,循环每次加1就不用说了 然后把每个值放进表格的td里面然后获取上个月和下个月有多少天,按照上月自减和下月自加的方式把其他表格内容补齐,这样一个完整的以月为单元的日历就行了,我写过,关键是要查抄一下Date对象的各种函2113数。5261new一个Date对象可以用dateObject.getDay()返回值dateObject 所指的星4102期中的某一天1653,使用本地时间。返回值是 0(周日) 到 6(周六) 之间的一个整数。 --我说的不就是getDay()方法么?为什么不选我的。。。,给个邮箱 我发个js写的给你内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js异步编程小技巧详解
  • 一款javascript压缩工具:x2jscompactor
  • webstorm中配置eslint的两种方式及差异比较详解
  • javascript实现像雪花一样的hexaflake分形
  • javascript插入排序算法原理与实现方法示例
  • 上传的js验证(图片/文件的扩展名)
  • javascript实现java中map容器的方法
  • react 源码中的依赖注入方法
  • js中的事件捕捉模型与冒泡模型实例分析
  • javascript常用的方法整理
  • JS,Javascript,编程 日历制作思路
  • javascript实现的日历控件,为什么不显示?
  • 用Javascript设计一个如下图所示的简单日历,周日...
  • JavaScript日历显示异常的问题,麻烦大家了!
  • 用javascript实现日历,高手帮忙
  • 求html中的javascript代码,为<input>生成一个月历...
  • html javascript实现 只显示一周 可左右滑动的日历
  • 使用JavaScript的日历控件时候,日历控件出现的位...
  • 求高人指点JavaScript做的简单日历的思想!关键是如...
  • javascript日历
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript实现简单日历效果基于javascript实现日历功能原理及代码实例原生js实现日历效果js实现简单日历特效js实现简单的日历显示效果函数示例原生javascript实现日历功能代码实例(无引用jq)javascript实现日历效果js实现带阴历的日历功能详解javascript实现考勤日历功能js异步编程小技巧详解一款javascript压缩工具:x2jscompactorwebstorm中配置eslint的两种方式及差异比较详解javascript实现像雪花一样的hexaflake分形javascript插入排序算法原理与实现方法示例上传的js验证(图片/文件的扩展名)javascript实现java中map容器的方法react 源码中的依赖注入方法js中的事件捕捉模型与冒泡模型实例分析javascript常用的方法整理js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式javascript类型系统之正则表达式js设置时间无效问题的解决办法微信小程序实现下拉菜单切换效果原生javascript创建不可变对象的方法简单微信小程序实现动态显示和隐藏某个控件功分享我对js插件开发的一些感想和心得js中将多个语句写成一个语句的两种方法小dom 脚本编程中的兄弟节点浅析js封装和作用域wordpress 插件——coolcode使用方法与下
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved