JS日历

  • 内容
  • 评论
  • 相关

两年前写过一个日历,可是兼容性不好. 这次重新写了一次.
兼容多种浏览器
了解了不少东东,特别是对于W3C标准化.
如 FF和IE 对box模型的理解不同
box.style{width:100;border 1px;}
ie理解 为 box.width = 100
ff 理解 为 box.width = 100 + 1*2 = 102
可以使用这种方法使两种浏览器都可以正常浏览
box.style{width:100!important; width /**/:120px;border 1px;}
注意 width(空格)/**/

下载地址:
https://www.2lin.net/soft/Calendar.rar

演示地址:
https://www.2lin.net/soft/Demo.html

/*******************************************************************************************
 
 * 创建对象   var c = new Calendar("c"); document.write(c);
 * 调用方法  c.show(arg1,arg2,arg3); 调用时间选择方法 c.showTime(this);
 * 参数1: 文本输入框(必填). 如 onfocus="c.show(this)";
 * 参数2: 按钮或其它可用单击事件的HTML元素(如果使用按钮方式则必填). 
          如 onclick="c.show(this,$(*))"  *=文本输入框名称
 * 参数3: 如果没有文本框没有值则使用该值初始化日历(选填). 
          如 onfocus="c.show(this,'2006-01-01')
   
 * 注: 参数顺序不分先后.  MSIE6/Opera8/FireFox1.5 下测试通过
 
   
   
************************如果您使用本日历控件 请保留该信息 谢谢! ***************************   
 * https://2lin.net
 * Email:caoailin@gmail.com 
 * QQ:38062022 
 * Creation date: 2006-11-22 
*********************************************************************************************/
function Calendar(objName)  
{  
 this.style = {
 
    borderColor         : "#909eff", //边框颜色
    headerBackColor      : "#909EFF", //表头背景颜色
    headerFontColor      : "#ffffff", //表头字体颜色
    bodyBarBackColor    : "#f4f4f4", //日历标题背景色
    bodyBarFontColor    : "#000000", //日历标题字体色
    bodyBackColor       : "#ffffff", //日历背景色
    bodyFontColor            : "#000000", //日历字体色 
    bodyHolidayFontColor     : "#ff0000", //假日字体色
    watermarkColor       : "#d4d4d4",  //背景水印色
    moreDayColor             : "#cccccc" 
    
 };
 
 this.showMoreDay = false; //是否显示上月和下月的日期
 this.dateFormat = 'yyyy-mm-dd';
 
 this.Obj = objName;  
 this.date = null;
 
 this.mouseOffset = null;
 this.dateInput = null;
 this.timer = null; 
 this.maxTime = 20;
 this.minTime = 7;
 
};
Calendar.prototype.toString = function()
{   
   var str = this.getStyle();
   str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';
   str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';
   str += this.getHeader();
   str += this.getBody();   
   str += '</div><div Author="alin" id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;"  onmouseover="' + this.Obj + '.showMenu(null);" onmouseout="' + this.Obj + '.hideMenu();"></div></div>';
   str += '<div Author="alin" style="position:absolute;display:none; width:50px;" onselectstart="return false" oncontextmenu="return false" id="TimeMenu"></div>';
   str += '<div Author="alin" style="position:absolute;display:none; width:50px;" onselectstart="return false" oncontextmenu="return false" id="TimeSubMenu"></div>';
   return str;
};
Calendar.prototype.getStyle = function()
{
    var str = '<style type="text/css">\n';
 str += '.calendar{position:absolute;width:140px!important;width /**/:142px;height:184px!important;height /**/:174px;background-color:'+this.style.bodyBackColor+';border:1px solid ' + this.style.borderColor + ';left:0px;top:0px;z-index:9999;}\n';
 str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;font-family:"宋体";color:'+this.style.headerFontColor+';}\n';
 str += '.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:'+this.style.watermarkColor+';z-index:1;text-align:center;}\n';
 str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;font-family:"宋体";color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';
 str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;font-family:"宋体";cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';
 str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;font-size:12px;font-family:"宋体";}\n';
 str += '.dayOut{padding:1px;border:none;height:16px;font-size:12px;font-family:"宋体";}\n';
    str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;font-family:"宋体";}\n';
 str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;font-size:12px;font-family:"宋体";}\n';
 str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%;font-size:12px;font-family:"宋体";}\n';
 str += 'html>body #Calendar{width:142px;174px;font-size:12px;font-family:"宋体";}';
 str += '.menutableT{border-left: 5px solid #307CE8;border-right: 1px solid #307CE8;border-top: 1px solid #94BCF3;border-bottom: 1px solid #307CE8;font-size: 12px;background-color: #FFFFFF;}';
 str += '.menutable{position: absolute;z-index: 100;border-left: 5px solid #307CE8;border-right: 1px solid #307CE8;border-top: 1px solid #94BCF3;border-bottom: 1px solid #307CE8;font-size: 12px;background-color: #FFFFFF;}';
 str += '.menutrin{background-color: #1A71E6;color: #FFFFFF;cursor: hand;}.menutrout{color: #000000;cursor: hand;}.menutd0{text-align: center;width: 10px;height: 18px;}.menutd1{text-align: right;width: 10px;font-family: Webdings;}';
 str += '.linktd1{width: 10px;}.menutd2{width: 4px;}.menuhr{border: 1px inset #307CE8;}.indentWord{padding-left: 2px;}';
 str += '</style>\n'; 
 return str;
 
};
Calendar.prototype.getHeader = function()
{
    var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentYear" style="width:50px;" onclick="' + this.Obj + '.showMenu(true);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n';
 str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>\n';
 str += '</table>\n';
 return str;
};
Calendar.prototype.getBody = function()
{
   var n = 0;
   var str = this.getBodyBar();
   str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n';   
   for(i = 0; i < 6; i++)
 {   
     str += '<tr Author="alin" align="center">';
  for(j = 0; j < 7; j++)
  {
    str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n';
  }
  str += '</tr>';
 }
   str += '</table>\n';
   str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天:'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>\n';
   return str;
};
Calendar.prototype.getBodyBar = function()
{
   var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n';
   var day = new Array('日','一','二','三','四','五','六');
   for(i = 0; i < 7; i++)
   {
      str += '<td Author="alin_bar">' + day[i] + '</td>\n';     
   }
   str += '</tr></table>';
   return str;  
}
Calendar.prototype.getYearMenu = function(year)
{
 
   var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
   for(i = 0; i < 10; i++)
 {   
     var _year = year + i;
  var _date = new Date(_year,this.date.getMonth(),this.date.getDate());
  
     str += '<tr Author="alin" align="center"><td Author="alin" width="13%" height="16" ';
  if(this.date.getFullYear() != _year)
  {
   str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
  }
  else
  {
     str += 'class="menuOver"';
  }
  str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">' + _year + '年</td>\n';  
  str += '</tr>';
 }
   str += '<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n';
   str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n';
   str += '<td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')">>></td><tr>\n';
   str += '</table></td></tr>\n';
   str += '</table>';
   
   var _menu = $("cdrMenu");
 _menu.innerHTML = str;
   
};
Calendar.prototype.getMonthMenu = function()
{
   
   var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
   for(i = 1; i <= 12; i++)
 {   
  var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate());  
   
  str += '<tr Author="alin" align="center"><td Author="alin" height="16" ';
  if(this.date.getMonth() + 1 != i)
  {
   str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
  }
  else
  {
     str += 'class="menuOver"';
  }
  str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">'+i+'月</td></tr>\n';
 }
   str += '</table>';
   
   var _menu = $("cdrMenu");
 _menu.innerHTML = str;   
};
Calendar.prototype.showTime = function(obj){
  
   this.hide();
 
   var str = '<table Author="alin" cellSpacing="0" class="menutable" cellPadding="0">\n';
   for(i = this.minTime; i < this.maxTime; i++)
 {    
     var time = i.toFormatString() + ':00';
  str += '<tr Author="alin" align="center" onmouseover="this.className=\'menutrin\';' + this.Obj + '.showSubTime(this,'+i+');" onmouseout="this.className=\'menutrout\';">';
  str += '<td class="menutd0"></td><td Author="alin" height="16" ';
  str += 'onclick="' + this.Obj + '.onClick(this)" value="' + time + '">' + time + '</td><td class="menutd1">4 </td></tr>\n';
 }
   str += '</table>';
   
   var _target = getPosition(obj);
   var _obj = $("TimeMenu");
   _obj.innerHTML = str; 
   _obj.style.display = "";
   this.dateInput = obj;
  // window.status = _obj.firstChild.offsetHeight;
   inputObj = obj;   
   _obj.style.left = _target.x + 'px';
   if((document.body.clientHeight - (_target.y + obj.clientHeight)) >= _obj.clientHeight)
   {        
      _obj.style.top = (_target.y + obj.clientHeight) + 'px';
 }
 else
 {   
       _obj.style.top = (_target.y - _obj.firstChild.offsetHeight) + 'px';    
 }
  
}
Calendar.prototype.showSubTime = function(obj,time){ 
 
   var str = '<table Author="alin" cellSpacing="0" class="menutable" cellPadding="0">\n';
   for(i = 1; i < 11; i++)
 {    
     var _time = time.toFormatString() + ':' + (i*5).toFormatString();
  str += '<tr Author="alin" align="center" onmouseover="this.className=\'menutrin\';" onmouseout="this.className=\'menutrout\';">';
  str += '<td class="menutd0"></td><td Author="alin" height="16" ';
  str += 'onclick="' + this.Obj + '.onClick(this)" value="' + _time + '">' + _time + '</td><td>&nbsp;&nbsp;</td></tr>\n';
 }
   str += '</table>';
   
   var _target = getPosition(obj);
   var _obj = $("TimeSubMenu");
   var _robj = $("TimeMenu");
   _obj.style.display = "";
   _obj.style.left = (_target.x + obj.clientWidth - 9) + 'px';
   _obj.style.top = (_target.y - 2) + 'px';
   _obj.innerHTML = str;  
}

Calendar.prototype.show = function()
{
   if (arguments.length >  3  || arguments.length == 0)
   {
      alert("对不起!传入参数不对!" );
   return;
 }   
 
   var _date = null;
   var _evObj = null;
   var _initValue = null  
   this.hide();
   for(i = 0; i < arguments.length; i++)
   {
      if(typeof(arguments[i]) == "object" && arguments[i].type == "text")
    {_date = arguments[i];}
   else if(typeof(arguments[i]) == "object")
    {_evObj = arguments[i];}
   else if(typeof(arguments[i]) == "string")
    {_initValue = arguments[i];}  
   }
    _evObj = _evObj || _date;
 inputObj = _date;
 targetObj = _evObj
 
 if(!_date){alert("传入参数错误!"); return;}
 
   this.dateInput = _date;
   
   _date = _date.value;
   
   if(_date == "" && _initValue) _date = _initValue;   
   
   this.bindDate(_date);        
   
   var _target = getPosition(_evObj);   
   var _obj = $("Calendar");
   _obj.style.display = ""; 
   
  
   _obj.style.left = _target.x + 'px';
   if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight)
   {        
      _obj.style.top = (_target.y + _evObj.clientHeight) + 'px';
 }
 else
 {   
       _obj.style.top = (_target.y - _obj.clientHeight) + 'px';
 }
        
};

Calendar.prototype.hide = function()
{
    var obj = $("Calendar");
 obj.style.display = "none";  
 $("TimeMenu").style.display = "none";
 $("TimeSubMenu").style.display = "none";
};
Calendar.prototype.bindDate = function(date)
{
   
 var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31); 
 var _arr = date.replace(/[^\d]/ig,'-').replace(/^\-|\-$/ig,'').split('-'); 
 //alert(date.replace(/[^\d]/ig,'-').replace(/^\-|\-$/ig,''));
    var _date = new Date(_arr[0],_arr[1]-1,_arr[2]); 
 if(isNaN(_date)) _date = new Date(); 
 this.date = _date;
 this.bindHeader(); 
 
 var _year = _date.getFullYear();
 var _month = _date.getMonth();
 var _day = 1; 
 
 var _startDay = new Date(_year,_month,1).getDay();
 var _previYear = _month == 0 ? _year - 1 : _year;
 var _previMonth = _month == 0 ? 11 : _month - 1;
 var _previDay = _monthDays[_previMonth];
 if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28; 
 _previDay -= _startDay - 1;
 var _nextDay = 1;
   
  _monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;
 for(i = 0; i < 40; i++)
 { 
     var _dayElement = $("cdrDay" + i);
  
  _dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)");
  _dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)");
  _dayElement.onclick = Function(this.Obj + ".onClick(this)");
  this.onMouseOut(_dayElement);    
  _dayElement.style.color = "";
  
  if(i < _startDay)
  {
      //获取上一个月的日期
   if(this.showMoreDay)
   {
      var _previDate = new Date(_year,_month - 1,_previDay);
      _dayElement.innerHTML = _previDay;
      _dayElement.title = _previDate.toFormatString("yyyy年mm月dd日");
         _dayElement.value = _previDate.toFormatString("yyyy年mm月dd日"); 
      _dayElement.style.color = this.style.moreDayColor; 
     
         _previDay++;
      
   }else
   {
      _dayElement.innerHTML = "";
         _dayElement.title = "";
   }
  
  }
  else if(_day > _monthDays[_month])
  {
     //获取下个月的日期
     if(this.showMoreDay)
   {
     var _nextDate = new Date(_year,_month + 1,_nextDay);
     _dayElement.innerHTML = _nextDay;
     _dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日");
        _dayElement.value = _nextDate.toFormatString(this.dateFormat);
     _dayElement.style.color = this.style.moreDayColor; 
     
        _nextDay++;      
   }else
   {
      _dayElement.innerHTML = "";
         _dayElement.title = "";
   }
  }
  else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month])
  {
           //获取本月日期
     _dayElement.innerHTML = _day;
     
     if(_day == _date.getDate())
     {
        this.onMouseOver(_dayElement);
     _dayElement.onmouseover = Function("");   
        _dayElement.onmouseout = Function("");               
     }
          
      
     if(this.isHoliday(_year,_month,_day))
     {
        _dayElement.style.color = this.style.bodyHolidayFontColor;     
     }
     var _curDate = new Date(_year, _month, _day);
     _dayElement.title =  _curDate.toFormatString("yyyy年mm月dd日");
     _dayElement.value = _curDate.toFormatString(this.dateFormat);
          
     _day++;
     
  }
  else
  {
     _dayElement.innerHTML = "";
     _dayElement.title = "";
  } 
       
 }
 
 var _menu = $("cdrMenu");
 _menu.style.display = "none"; 
 
};

Calendar.prototype.bindHeader = function()
{
   var _curYear = $("currentYear");
   var _curMonth = $("currentMonth");
   var _watermark = $("cdrWatermark");
   _curYear.innerHTML = this.date.toFormatString("yyyy年");
   _curMonth.innerHTML =  this.date.toFormatString("mm月");
   _watermark.innerHTML = this.date.getFullYear();    
}; 
Calendar.prototype.getToday = function()
{
   var _date = new Date();
   this.bindDate(_date.toFormatString("-"));
}; 
Calendar.prototype.isHoliday = function(year,month,date)
{
   var _date = new Date(year,month,date);
   return (_date.getDay() == 6 || _date.getDay() == 0);
};
Calendar.prototype.onMouseOver = function(obj)
{
   obj.className = "dayOver";
};

Calendar.prototype.onMouseOut = function(obj)
{
   obj.className = "dayOut";
}; 
Calendar.prototype.onClick = function(obj)
{  
  if(obj.innerHTML != "")  this.dateInput.value = obj.value;
  this.hide();
};
Calendar.prototype.onChangeYear = function(isnext)
{
   var _year = this.date.getFullYear();
   var _month = this.date.getMonth() + 1;
   var _date = this.date.getDate();
      
   if(_year > 999 && _year <10000)
   {
        if(isnext){_year++;}else{ _year --;}
   }
   else
   {
     alert("年份超出范围(1000-9999)!");
   }
   this.bindDate(_year + '-' + _month + '-' + _date);
};
Calendar.prototype.onChangeMonth = function(isnext)
{
   var _year = this.date.getFullYear();
   var _month = this.date.getMonth() + 1;
   var _date = this.date.getDate();
   
   if(isnext){ _month ++;} else {_month--;}
   
   if(_year > 999 && _year <10000)
   { 
        if(_month < 1) {_month = 12; _year--;}
  if(_month > 12) {_month = 1; _year++;}
   }
   else
   {
     alert("年份超出范围(1000-9999)!");
   }  
   
   this.bindDate(_year + '-' + _month + '-' + _date);
};
Calendar.prototype.showMenu = function(isyear)
{
  var _menu = $("cdrMenu");
  
  if(isyear != null)
  {
    
 var _obj = (isyear)? $("currentYear") : $("currentMonth");
 
 if(isyear)
 {
    this.getYearMenu(this.date.getFullYear() - 5);    
 }
  else
 {
    this.getMonthMenu();    
 }
 
 _menu.style.top = (_obj.offsetTop + _obj.offsetHeight) + 'px';
 _menu.style.left = _obj.offsetLeft + 'px'; 
 _menu.style.width = _obj.offsetWidth + 'px';
 
   }
 
 if (this.timer != null) clearTimeout(this.timer);
 
 _menu.style.display="";
 
}
Calendar.prototype.hideMenu = function()
{
    var _obj = $("cdrMenu");
    this.timer = window.setTimeout(function(){_obj.style.display='none';},500); 
}
Number.prototype.NaN0 = function()
{
    return isNaN(this) ? 0 : this;
}
Number.prototype.toFormatString = function(){
 var _str = '00'+this; 
 return _str.substring(_str.length-2,_str.length);
}
Date.prototype.toFormatString = function(fs)
{
   if(fs.length == 1)
   { 
     return this.getFullYear() + fs + (this.getMonth() + 1) + fs + this.getDate(); 
   }
   fs = fs.replace("yyyy",this.getFullYear());
   fs = fs.replace("mm",addZero(this.getMonth()+1));
   fs = fs.replace("dd",addZero(this.getDate()));
   return fs;
}
/******************************************公用方法及变量********************************************************/
var inputObj = null; //输入对象
var targetObj = null; //单击目标对象
var dragObj = null; //拖动目标对象
var mouseOffset = null; //拖动目标的位置
//获取对象
function $(obj)
{
   if(document.getElementById)
   {
     return document.getElementById(obj);
   }
   else
   {
     alert("浏览器不支持!");
   }
}
//获取鼠标位置
function mouseCoords(ev)
{
 if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
 };
}
//获取目标的绝对位置
function getPosition(e)
{
 var left = 0;
 var top  = 0;
 while (e.offsetParent){
  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
  e     = e.offsetParent;
 }
 left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
 top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
 return {x:left, y:top};
}
//获取鼠标的偏移值
function getMouseOffset(target, ev)
{
 ev = ev || window.event;
 var docPos    = getPosition(target);
 var mousePos  = mouseCoords(ev);
 return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
//关闭日历
function closeCalendar(evt){
 
 evt = evt || window.event; 
 var _target= evt.target || evt.srcElement; 
 
 if(!_target.getAttribute("Author") &&  _target != inputObj && _target != targetObj)
  {
    $("Calendar").style.display = "none";  
    $("TimeMenu").style.display = "none";  
    $("TimeSubMenu").style.display = "none";  
  }  
}
//拖动日历开始
function dragStart(evt){
    evt = evt || window.event; 
 var _target= evt.target || evt.srcElement;
    
 if(_target.getAttribute("Author") == "alin_bar") 
 {    
    dragObj = $("Calendar");    
    mouseOffset = getMouseOffset(dragObj, evt);  
    
 }   
}
//拖动日历中
function drag(evt)
{
    evt =  evt || window.event; 
 if(dragObj)
 {    
   var mousePos = mouseCoords(evt); 
   dragObj.style.left = (mousePos.x - mouseOffset.x) + 'px';
   dragObj.style.top  = (mousePos.y - mouseOffset.y) + 'px';   
 }
}
//拖动结束
function dragEnd(evt)
{
   dragObj = null;    
}
function addZero(n){return(("00"+ n).substr(("00"+ n).length-2));}
/**********************************End 公用方法**********************************************/

document.onclick = closeCalendar;
document.onmousedown = dragStart;
document.onmousemove = drag;
document.onmouseup = dragEnd;

/*****************************************************结束************************************************************/

评论

15条评论
  1. Gravatar 头像

    yinter 回复

    牛别,顶一下,学习中……

  2. Gravatar 头像

    Noriko 回复

    谢谢了,已经下载了:)

  3. Gravatar 头像

    wmtt 回复

    嘿嘿,好东西

    学习中!

  4. Gravatar 头像

    fghfh 回复

    厉害

  5. Gravatar 头像

    文工 回复

    对于月和日如何用两位的形式表现?

  6. Gravatar 头像

    文工 回复

    //两位表示的方法解决如下

    Date.prototype.toFormatString = function(fs)

    {

    if(fs.length == 1)

    {

    if (this.getDate()<=9)

    {

    return this.getFullYear() + fs +'0'+ (this.getMonth() + 1) + fs +'0'+ this.getDate();

    }

    else

    {

    return this.getFullYear() + fs +'0'+ (this.getMonth() + 1) + fs + this.getDate();

    }

    }

    fs = fs.replace("yyyy",this.getFullYear());

    fs = fs.replace("mm",(this.getMonth() + 1));

    fs = fs.replace("dd",this.getDate());

    return fs;

    }

    /结束**********/

  7. Gravatar 头像

    liang 回复

    日期的验证只验证了格式,比如填入2007-14-36也可通过验证

  8. Gravatar 头像

    wtb 回复

    你好2lin,很喜欢你做的这个控件,我一直在用,但最近的一个项目里用到一个功能,除了需要加入日期,同时还要选择时间,在网上找了很多,最好的是这个,是个国外的http://www.dynarch.com/projects/calendar/,

    但是这个的最新版本需要序列号,

    真希望你能把你的这个控件继续完善下去,使其与原来一样漂亮,而且具用时间的选择功能.多谢!!

  9. Gravatar 头像

    2lin 回复

    谢谢你的评论。

    我有个版本可以选择时间的。没有发布出来。

    如果需要可以和我联系。

    这个日历只是我无聊的时候写的。可能有些不是很完善。等下次我再改进一下吧。

  10. Gravatar 头像

    ib 回复

    很好用啊  以前一直找不到很精巧很合适的日历用 哈哈

  11. Gravatar 头像

    wtb 回复

    你好二林,我又来了,

    看到了你的留言,很高兴,能把你的可以选择时间的版本发给我一份吗?

    非常感谢!我的邮箱:

    77542103@163.com

    再次感谢!!

  12. Gravatar 头像

    X_boy 回复

    有一个最大的缺点:

    页面样式定义(如:tr{….}、td{…..})会影响到该控件的样式。

  13. Gravatar 头像

    wtb 回复

    你好二林,能把你的可以选择具体时间的版本发给我一份吗?

    非常感谢!我的邮箱:

    77542103@163.com

  14. Gravatar 头像

    lazyknight 回复

    我的问题是,能不能让弹出的日历永远显示在表单框的下方,而不是自动判断显示在上方还是下方。

发表评论

电子邮件地址不会被公开。 必填项已用*标注