日期插件

时间：2016-11-02 00:27:29 阅读：245 评论：0 收藏：0 [点我收藏+]

标签：data- element current ini cal data padding cli poi

日期插件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
*{margin:0;padding:0}
#Mcalendar{width:210px;padding:5px;height:170px;border:1px solid #045bb2;display:none;cursor: pointer;}
table{text-align:right;clear: both;}
table th{background-color:#045bb2;width:30px;}
.date div{float:left;text-align:center;height:30px;line-height:30px;}
#preYear,#nextYear{width:26px}
#nextMonth,#preMonth{width:23px;}
#McalendarInput{
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<input type="text" id="McalendarInput" />
<div id="Mcalendar"></div>
  <script>
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments)
     }
     }
     }
var extent=function(destination,source){
for(var prop in source){
     destination[prop]=source[prop];
     }
return destination;
     }
function fuzhi(a){
document.getElementById("McalendarInput").value=a;
document.getElementById("Mcalendar").style.display="none";
document.getElementById("Mcalendar").innerHTML="";
     }
var Mcalendar=Class.create();
Mcalendar.prototype={
initialize:function(options){
var $ = new Date();
this.setOption(options);
this.drawCalendar($.getFullYear(),$.getMonth() + 1,$.getDate(),this.options.textfield_id);
     },
setOption:function(options){
this.options={
textfield_id: "Mcalendar"
}
extent(this.options,options||{})
     },
fillArray:function(year,month){
var f = new Date(year, month -1 ,1).getDay();
console.log(f)
var arr=new Array(42);
var dates = new Date(year, month , 0).getDate();
console.log(dates)
for(var i = 0; i < dates ; i ++ ,f ++){
arr[f] =year+"-"+month+"-"+(i+1);
     }
return arr;
     },
getLeft:function(element){
var actualLeft=element.offsetLeft;
var current=element.offsetParent;
if(current!=null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
     }
return actualLeft;
     },
getTop:function(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
if(current!=null){
actualTop+=current.offsetTop;
current=current.offsetParent;
     }
return actualTop;
     },
drawCalendar:function(year,month,date,id){
var $=this;
var html="";
html=‘<div class="date"><div id="preYear"><</div><div id="preMonth"><<</div>‘;
html+=‘<div style="width:107px;">‘+year+‘年‘+month+‘月‘+date+‘日</div><div id="nextMonth">>></div><div id="nextYear">></div></div>‘;
var arr=["日","一","二","三","四","五","六"];
html+="<table cellpadding=‘0‘ cellspacing=‘0‘><thead><tr>"
for(var i=0;i<7;i++){
html+=‘<th>‘+ arr[i]+‘</th>‘;
     }
html+=‘</tr></thead><tbody><tr>‘
var arr1=$.fillArray(year,month);
for(var j=0;j<arr1.length;j++){
if(!arr1[j]) arr1[j]=" - - ";
if(j%7){
html+=‘<td><a href="javascript:void(0)" onclick="fuzhi(‘+‘\‘‘+arr1[j]+‘\‘‘+‘)">‘+ arr1[j].split(‘-‘)[2]+‘</a></td>‘;
     }
else{
html+="</tr><tr>"
html+=‘<td><a href="javascript:void(0)" onclick="fuzhi(‘+‘\‘‘+arr1[j]+‘\‘‘+‘)">‘+ arr1[j].split(‘-‘)[2]+‘</a></td>‘;
     }
     }
html+="</tr></tbody></table>";
document.getElementById(id).style.display="block"
document.getElementById(id).innerHTML=html;
document.getElementById(‘nextYear‘).onclick=function(){
$. redrawCalendar(year+1,month,date,id);
     }
document.getElementById(‘preYear‘).onclick=function(){
$. redrawCalendar(year-1,month,date,id);
     }
document.getElementById(‘nextMonth‘).onclick=function(){
if(month==12){
$. redrawCalendar(year+1,1,date,id);
     }else{
$. redrawCalendar(year,month+1,date,id);
     }
     }
document.getElementById(‘preMonth‘).onclick=function(){
if(month==1){
$. redrawCalendar(year-1,12,date,id);
     }else{
$. redrawCalendar(year,month-1,date,id);
     }
     }
     },
redrawCalendar:function(year, month,date,id){
this. drawCalendar(year,month,date,id)
     },
selectDate:function(e){
var attr=e.getAttribute("data-text");
console.log(attr)
/* if(attr[0]) {
     alert(attr)
     }*/
}
     }
document.getElementById("McalendarInput").onfocus=function(){
var bbb=new Mcalendar();
var aaa=document.getElementById("McalendarInput");
var k=document.getElementById("Mcalendar");
k.style.position="absolute";
k.style.left=bbb.getLeft(aaa)+"px";
k.style.top= aaa.offsetHeight+bbb.getTop(aaa)+"px";
     }
</script></body>
</html>

日期插件

标签：data- element current ini cal data padding cli poi

原文地址：http://www.cnblogs.com/heyinwangchuan/p/6021162.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行