分类： JavaScript
2013-02-23 17:04:25
截图
IE5下：
google浏览器
一 HTML代码部分
Testing
二 JS代码部分
function showmydate()
{
SelectDayPopObject.ShowPopDivSelectDay();
}
var SelectDayPopObject={};
SelectDayPopObject.year=null;
SelectDayPopObject.month=null;
SelectDayPopObject.day=null;
SelectDayPopObject.activeElement=null;
SelectDayPopObject.todayLable=null;
SelectDayPopObject.PopObject=null;
SelectDayPopObject.MonthArray=[
31,//1月
28,//2??
31,
30,
31,
30,
31,
31,
30,
31,
30,//11
31,//12
];
SelectDayPopObject.ShowPopDivSelectDay=function()
{
SelectDayPopObject.activeElement=document.activeElement;
SelectDayPopObject.CreatePopObject();
}
function MycreateElement( elem ) {
return document.createElementNS ?
document.createElementNS('', elem ) :
document.createElement( elem );
}
// Find the X (Horizontal, Left) position of an element
function pageX(elem) {
return elem.offsetParent ? elem.offsetLeft+pageX(elem.offsetParent) :elem.offsetLeft;
}
// Find the Y (Vertical, Top) position of an element
function pageY(elem) {
return elem.offsetParent ? elem.offsetTop+pageX(elem.offsetParent) :elem.offsetTop;
}
SelectDayPopObject.CreatePopObject=function()
{
SelectDayPopObject.initDate();
if(!SelectDayPopObject.PopObject)
{
//创建包装div
SelectDayPopObject.PopObject= MycreateElement("div");
SelectDayPopObject.PopObject.id="MyPopDate";
SelectDayPopObject.PopObject.className="MyPopDateClass";
//创建包装的内容
SelectDayPopObject.addTopDiv();
SelectDayPopObject.tableDiv();
SelectDayPopObject.bottomdiv();
}
//设置包装div的位置
SelectDayPopObject.PopObject.style["left"]=pageX(SelectDayPopObject.activeElement)+'px';
SelectDayPopObject.PopObject.style["top"]=(pageY(SelectDayPopObject.activeElement)+SelectDayPopObject.activeElement.offsetHeight)+'px';
document.body.appendChild(SelectDayPopObject.PopObject);
SelectDayPopObject.DataCaluate();
SelectDayPopObject.PopObject.style["display"]="block";
}
SelectDayPopObject.initDate=function()
{
var date=new Date();
if(SelectDayPopObject.activeElement.value!=null)
{
if (/^(\d{4}-((1[0|1|2])|0?[1-9]))-(3[0|1]|[1|2][0-9]|0?[1-9])$/.test(SelectDayPopObject.activeElement.value))
{
var tempDay=SelectDayPopObject.activeElement.value.split('-');
SelectDayPopObject.year=tempDay[0];
SelectDayPopObject.day=tempDay[2];
SelectDayPopObject.month=tempDay[1]-1;
}
}
if(!SelectDayPopObject.year){
SelectDayPopObject.day=date.getDate();
SelectDayPopObject.week=date.getDay();//从 Date 对象返回一周中的某一天 (0 ~ 6)。 日-六
SelectDayPopObject.month=date.getMonth();
SelectDayPopObject.year=date.getFullYear();
}
SelectDayPopObject.todayLable=date.getFullYear()+"年"+(date.getMonth()+1)+ "月"+date.getDate() +"日";
}
//计算日期，填充table
SelectDayPopObject.DataCaluate =function()
{
//本月的起始
var minday=1;
// 本月的最大天数
var maxday= SelectDayPopObject.getMaxDay(SelectDayPopObject.year,SelectDayPopObject.month);
//本月有几周
//var nowMonthWeeks=parseInt(maxday/7)+1;
var nowMonthWeeks=0;
//本月的起始星期几
var nowMonthStartWeek= SelectDayPopObject.getDayWeek( SelectDayPopObject.year,SelectDayPopObject.month,1);
//本月最大天数星期几
var nowMonthEndWeek= SelectDayPopObject.getDayWeek( SelectDayPopObject.year,SelectDayPopObject.month,maxday)+1;
//第一周处理
var firstWeek=document.getElementById("MyDataTable").rows[1].cells;
var preMonthMaxDay=SelectDayPopObject.getMaxDay(SelectDayPopObject.preClickYear(),SelectDayPopObject.preClickMonth());
var preMonthStartDay=preMonthMaxDay-nowMonthStartWeek+1;
for(var col=0;col"+preMonthStartDay+'\';
//周六 、周日处理
if(col==0|| col==6)
{
tempString=tempString.replace(/preMonthLink/,'weekEndDay');
tempString=tempString.replace(/preMonthLinkClass/,'weekEndDayClass');
}
firstWeek[col].innerHTML=tempString;
preMonthStartDay++;
}
var Nday=1;
for(var n=1;n<=6;n++)
{
nowMonthWeeks++;
var xweek=document.getElementById('MyDataTable').rows[n].cells;
for(var col=nowMonthStartWeek;col<=6;col++)
{
var tempString=''+Nday+'\';
//周六 、周日处理
if(col==0|| col==6)
{
tempString=tempString.replace(/nowMonthLink/,'weekEndDay');
tempString=tempString.replace(/nowMonthLinkClass/,'weekEndDayClass');
}
if((Nday==SelectDayPopObject.day)&&(SelectDayPopObject.month==new Date().getMonth()&&SelectDayPopObject.year==new Date().getFullYear()))
{
tempString=tempString.replace(/nowMonthLink/,'nowMonthDayLink');
tempString=tempString.replace(/nowMonthLinkClass/,'nowMonthDayLinkClass');
tempString=tempString.replace(/weekEndDay/,'nowMonthDayLink');
tempString=tempString.replace(/weekEndDayClass/,'nowMonthDayLinkClass');
}
xweek[col].innerHTML= tempString;
Nday++;
if(Nday>maxday) break;
}
nowMonthStartWeek=0;
if(Nday>maxday) break;
}
//后周处理
var nextday=1;
for(var row=nowMonthWeeks;row<=6;row++)
{
var lastWeek=document.getElementById("MyDataTable").rows[row].cells;
for(var col=nowMonthEndWeek;col<=6;col++)
{
var tempString=""+nextday+'\';
//周六 、周日处理
if(col==0|| col==6)
{
tempString=tempString.replace(/nextMonthLink/,'weekEndDay');
tempString=tempString.replace(/nextMonthLinkClass/,'weekEndDayClass');
}
lastWeek[col].innerHTML=tempString;
nextday++;
}
nowMonthEndWeek=0;
}
}
//下个月
SelectDayPopObject.nextClickMonth=function()
{
if(SelectDayPopObject.month=="11") //11代表12月
{
return 0; //返回0月
}
else
{
return (SelectDayPopObject.month+1);
}
}
//下个年
SelectDayPopObject.nextClickYear=function()
{
if(SelectDayPopObject.month=="11") //11代表12月
{
return (SelectDayPopObject.year+1);
}
else
{
return SelectDayPopObject.year;
}
}
SelectDayPopObject.preClickMonth=function()
{
if(SelectDayPopObject.month=="0") //11代表12月
{
return 11; //返回0月
}
else
{
return (SelectDayPopObject.month-1);
}
}
SelectDayPopObject.preClickYear=function()
{
if(SelectDayPopObject.month=="0") //11代表12月
{
return (SelectDayPopObject.year-1);
}
else
{
return SelectDayPopObject.year;
}
}
// 因IE5之类的浏览器CSS不支持 ：hover 只能给所有的A增加 onmouseover //onmouseout
SelectDayPopObject.onmouseover=function(alink)
{
SelectDayPopObject.oldbackground=alink.style["background"];
alink.style["background"]='#FF00FF';
}
SelectDayPopObject.onmouseout=function(alink)
{
alink.style["background"]=SelectDayPopObject.oldbackground;
}
//选择今天
SelectDayPopObject.WeekshowCellclick=function(year,month,day)
{
SelectDayPopObject.activeElement.value=year+'-'+month+'-'+day;
SelectDayPopObject.PopObject.style["display"]="none";
}
SelectDayPopObject.addTopDiv=function()
{
var MyDataTopDiv= MycreateElement("div");
MyDataTopDiv.id="MyDataTopDiv";
MyDataTopDiv.className="MyDataTopDivClass";
MyDataTopDiv.innerHTML=" << < 年月 > >>"
SelectDayPopObject.PopObject.appendChild(MyDataTopDiv);
}
SelectDayPopObject.tableDiv=function()
{
var MyDataTableDiv= MycreateElement("div");
MyDataTableDiv.id="MyDataTableDiv";
MyDataTableDiv.className="MyDataTableDivClass";
MyDataTableDiv.innerHTML=" 日 一 二 三 四 五 六
"
SelectDayPopObject.PopObject.appendChild(MyDataTableDiv);
}
SelectDayPopObject.bottomdiv=function()
{
var MyDataBottonDiv= MycreateElement("div");
MyDataBottonDiv.id="MyDataBottonDiv";
MyDataBottonDiv.className="MyDataBottonDivClass";
MyDataBottonDiv.innerHTML=" "+SelectDayPopObject.todayLable+""
SelectDayPopObject.PopObject.appendChild(MyDataBottonDiv);
}
SelectDayPopObject.isLeapYear=function(year)
{
if( year%4==0 && year%100!=0 || year%400==0 )//
{
return true;
}
return false;
}
SelectDayPopObject.getDayWeek=function(year,month,day)
{
var date=new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(day);
return date.getDay();
}
//清除当前日期
SelectDayPopObject.ClearObjectValue=function()
{
SelectDayPopObject.activeElement.value="";
}
//获取当前日期
SelectDayPopObject.GetCurrenData=function()
{
var date=new Date();
SelectDayPopObject.activeElement.value=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
SelectDayPopObject.HiddePopDiv();
}
SelectDayPopObject.HiddePopDiv=function()
{
SelectDayPopObject.PopObject.style["display"]="none";
}
SelectDayPopObject.getMaxDay=function(year,i)
{
if( SelectDayPopObject.isLeapYear(year) && (i==1) ) return 29;
return SelectDayPopObject.MonthArray[i];
}
SelectDayPopObject.preYearClick=function()
{
SelectDayPopObject.year=SelectDayPopObject.year-1;
document.getElementById("MyDateYear").value=SelectDayPopObject.year;
SelectDayPopObject.DataCaluate();
}
SelectDayPopObject.nextYearClick=function()
{
SelectDayPopObject.year=SelectDayPopObject.year+1;
document.getElementById("MyDateYear").value=SelectDayPopObject.year;
SelectDayPopObject.DataCaluate();
}
SelectDayPopObject.preMonthClick=function()
{
if(SelectDayPopObject.month==0) {
SelectDayPopObject.month=11;
SelectDayPopObject.year=SelectDayPopObject.year-1;
document.getElementById("MyDateYear").value=SelectDayPopObject.year;
}else{
SelectDayPopObject.month=SelectDayPopObject.month-1;
}
document.getElementById("MyDateMonth").value=(SelectDayPopObject.month+1);
SelectDayPopObject.DataCaluate();
}
SelectDayPopObject.nextMonthClick=function()
{
if(SelectDayPopObject.month==11) {
SelectDayPopObject.month=0;
SelectDayPopObject.year=SelectDayPopObject.year+1;
document.getElementById("MyDateYear").value=SelectDayPopObject.year;
}else{
SelectDayPopObject.month=SelectDayPopObject.month+1;
}
document.getElementById("MyDateMonth").value=(SelectDayPopObject.month+1);
SelectDayPopObject.DataCaluate();
}
三 CSS代码部分
.MyPopDateClass{
position:absolute;
background:#fff;
font-size:0.8em;
width: 160px;
border: blue 1px solid;
padding:1px;
margin: 0;
}
.MyDataTopDivClass{
border: 1px solid gray;
width: 156px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
.MyDataTableDivClass{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
margin-top:1px;
text-align:right;
}
.MyDataTableClass{
margin-left:auto;
margin-right:auto;
}
a{
cursor:pointer;
padding:2px;
display:block;
}
.todayLableClass{
cursor:pointer;
padding:0px;
padding-top:4px;
}
.nextMonthLinkClass{
color:blue;
}
.preMonthLinkClass{
color:blue;
}
.nowMonthDayLinkClass{
background:red;
}
.button_today_class{
float:left;
width: 32px;
text-align: left;
background: #e6e6e6;
border: blue 1px solid;
padding: 1px;
font-size: 8pt;
cursor:pointer;
}
.button_clean_class{
width: 32px;
text-align: left;
background: #e6e6e6;
border: blue 1px solid;
padding: 1px;
float:left;
margin-right:1px;
font-size: 8pt;
cursor:pointer;
}
.MyDataTableHeadClass{
background-color: #BDEBEE;
}
.weekEndDayClass{
color:red;
}
.preYearClickClass,.preMonthClickClass {
float:left;
display:inline-block;
background:#BDEBEE;
margin-top: 2px;
margin-right: 1px;
margin-left: 1px;
font-size:0.8em;
width: 12px;
text-align: center;
}
.showYearAndMonthClass{
float:left;
padding-top: 1px;
}
.nextMonthClickClass,.nextYearClickClass{
float:left;
display:inline-block;
background:#BDEBEE;
margin-top: 2px;
margin-right: 1px;
margin-left: 1px;
font-size:0.8em;
width: 12px;
text-align: center;
}
.MyDateYearClass{
width:30px;
height: 12px;
}
.MyDateMonthClass{
width:16px;
text-align: right;
height: 12px;
}