纯js日期控件可以自定义样式

2020-09-14 乐帮网

javascript

首先这是我12年收藏的文章，原地址早已不存在。对于新的chrome浏览器稍做修改即可。

在做项目的时候遇到了对日期的特殊要求，发现要找一款灵活的简单日历控件真难。功夫不负有心人，我在网上淘了一个，分享给大家，这个不是我写的，但这个写的很简单，可定制性相当高，对于日历有特殊需要的pg们来看一看吧。好像是说月影前辈写的，感谢信月影前辈，原文章找不到了。代码大致如下，我只换了一下输出格式和汉字显示。。。

<!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>  
<title>calender select</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style type='text/css'>  
body {  
     font-family:"Lucida sans unicode", sans-serif;  
     font-size:12px;  
     margin:0;  
     padding:0;  
     height:100%;  
     }  
#basis {  
     display:inline;  
     position:relative;  
     }  
#calender {  
     position:absolute;  
     top:30px;  
     left:0;  
     width:220px;  
     background-color:#fff;  
     border:3px solid #ccc;  
     padding:10px;  
     z-index:10;  
     }  
#control {  
     text-align:center;  
     margin:0 0 5px 0;  
     }  
#control select {  
     font-family:"Lucida sans unicode", sans-serif;  
     font-size:11px;  
     margin:0 5px;  
     vertical-align:middle;  
     }  
#calender .controlPlus {  
     padding:0 5px;  
     text-decoration:none;  
     color:#333;  
     }  
#calender table {  
     empty-cells: show;  
     width:100%;  
     font-size:11px;  
     table-layout:fixed;  
     }  
#calender .weekdays td{  
     text-align:right;  
     padding:1px 5px 1px 1px;  
     color:#333;  
     }  
#calender .week td {  
     text-align:right;  
     cursor:pointer;  
     border:1px solid #fff;  
     padding:1px 4px 1px 0;  
     }  
#calender .week .today {  
     background-color:#ccf;  
     border-color:#ccf;  
     }  
#calender .week .holiday {  
     font-weight: bold;  
     }  
#calender .week .hoverEle {  
     border-color:#666;  
     background-color:#99f;  
     color:#000;  
     }  
  
</style>  
<script  type="text/javascript">  
     var allMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
     var allNameOfWeekDays=["星期一","星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];  
     var allNameOfMonths=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];  
     var newDate=new Date();  
     var yearZero=newDate.getFullYear();  
     var monthZero=newDate.getMonth();  
     var day=newDate.getDate();  
     var currentDay=0, currentDayZero=0;  
     var month=monthZero, year=yearZero;  
     var yearMin=2000, yearMax=2010;  
     var target='';  
     var hoverEle=false;  
     function setTarget(e){  
          if(e) return e.target;  
          if(event) return event.srcElement;  
     }  
     function newElement(type, attrs, content, toNode) {  
          var ele=document.createElement(type);  
          if(attrs) {  
               for(var i=0; i<attrs.length; i++) {  
                    eval('ele.'+attrs[i][0]+(attrs[i][2] ? '=\u0027' :'=')+attrs[i][1]+(attrs[i][2] ? '\u0027' :''));  
               }  
          }  
          if(content) ele.appendChild(document.createTextNode(content));  
          if(toNode) toNode.appendChild(ele);  
          return ele;  
     }  
     function setMonth(ele){month=parseInt(ele.value);calender()}  
     function setYear(ele){year=parseInt(ele.value);calender()}  
     function setValue(ele) {  
          if(ele.parentNode.className=='week' && ele.firstChild){  
               var dayOut=ele.firstChild.nodeValue;  
               if(dayOut < 10) dayOut='0'+dayOut;  
               var monthOut=month+1;  
               if(monthOut < 10) monthOut='0'+monthOut;  
               target.value=dayOut+'.'+monthOut+'.'+year;   
               removeCalender();  
          }  
     }  
     function removeCalender() {  
          var parentEle=document.getElementById("calender");  
          while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);  
          document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));  
     }           
     function calender() {  
          var parentEle=document.getElementById("calender");  
          parentEle.onmouseover=function(e) {  
               var ele=setTarget(e);  
               if(ele.parentNode.className=='week' && ele.firstChild && ele!=hoverEle) {  
                    if(hoverEle) hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');  
                    hoverEle=ele;  
                    ele.className='hoverEle '+ele.className;  
               } else {  
                    if(hoverEle) {  
                         hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');  
                         hoverEle=false;  
                    }  
               }  
          }  
          while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);  
          function check(){  
               if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29;  
               else allMonth[1]=28;  
          }  
          function addClass (name) { if(!currentClass){currentClass=name} else {currentClass+=' '+name} };  
          if(month < 0){month+=12; year-=1}  
          if(month > 11){month-=12; year+=1}  
          if(year==yearMax-1) yearMax+=1;  
          if(year==yearMin) yearMin-=1;  
          check();  
          var control=newElement('p',[['id','control',1]],false,parentEle);  
          var controlPlus=newElement('a', [['href','javascript:month--;calender()',1],['className','controlPlus',1]], '<', control);  
          var select=newElement('select', [['onchange',function(){setMonth(this)}]], false, control);  
          for(var i=0; i<allNameOfMonths.length; i++) newElement('option', [['value',i,1]], allNameOfMonths[i], select);  
          select.selectedIndex=month;  
          select=newElement('select', [['onchange',function(){setYear(this)}]], false, control);  
          for(var i=yearMin; i<yearMax; i++) newElement('option', [['value',i,1]], i, select);  
          select.selectedIndex=year-yearMin;  
          controlPlus=newElement('a', [['href','javascript:month++;calender()',1],['className','controlPlus',1]], '>', control);  
          check();  
          currentDay=1-new Date(year,month,1).getDay();  
          if(currentDay > 0) currentDay-=7;  
          currentDayZero=currentDay;  
          var newMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]], false, parentEle);  
          var newMonthBody=newElement('tbody', false, false, newMonth);  
          var tr=newElement('tr', [['className','head',1]], false, newMonthBody);  
          tr=newElement('tr', [['className','weekdays',1]], false, newMonthBody);  
          for(i=0;i<7;i++) td=newElement('td', false, allNameOfWeekDays[i], tr);      
          tr=newElement('tr', [['className','week',1]], false, newMonthBody);  
          for(i=0; i<allMonth[month]-currentDayZero; i++){  
               var currentClass=false;                
               currentDay++;  
               if(currentDay==day && month==monthZero && year==yearZero) addClass ('today');  
               if(currentDay <= 0 ) {  
                    if(currentDayZero!=-7) td=newElement('td', false, false, tr);  
               }  
               else {  
                    if((currentDay-currentDayZero)%7==0) addClass ('holiday');  
                    td=newElement('td', (!currentClass ? false : [['className',currentClass,1]] ), currentDay, tr);  
                    if((currentDay-currentDayZero)%7==0) tr=newElement('tr', [['className','week',1]], false, newMonthBody);  
               }  
               if(i==allMonth[month]-currentDayZero-1){  
                    i++;  
                    while(i%7!=0){i++;td=newElement('td', false, false, tr)};  
               }  
          }  
     }  
     function showCalender(ele) {  
          if(document.getElementById('basis')) { removeCalender() }  
          else {  
               target=document.getElementById(ele.id.replace(/for_/,''));  
               var basis=ele.parentNode.insertBefore(document.createElement('div'),ele);  
               basis.id='basis';  
               newElement('div', [['id','calender',1]], false, basis);  
               calender();  
          }  
     }  
</script>  
</head>  
<body >  
<div><input type='text' id='date1' /><input type='button' id='for_date1' value='date' onclick='showCalender(this)' /></div>  
</body>  
</html>

JavaScript 如何从数组中删除指定项目？

JavaScript 操作 Cookie

JavaScript use strict 是什么?

HTML中JS操作DOM样式Style对照表

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力

纯js日期控件 可以自定义样式

纯js日期控件可以自定义样式