欢迎访问:常州市武进区嘉泽中心小学网站 !今天是:
栏目列表
您现在的位置是:首页>>教师>>计算机技术>>网站制作技术>>文章内容
漂亮的日期选择器
发布时间:2008-11-20   点击:   来源:本站原创   录入者:佚名
 

效果

/*
本程序由(易晓峰)凌空踏烟设计制作,转载请保留版权
联系E-mail:conis@{域名已经过期} 个人主页: QQ:47015280
http://{域名已经过期} ICICC:http://{域名已经过期}
贝斯网络@您的电子商务顾问,贝斯网络为您提供专业的电子商务策划、网站建设顾问,贝斯网络有大量的电子商务文章,随时欢迎您的查阅。访问地址:http://{域名已经过期}
*/
//日期的层
document.writeln('<Div style="width:180;height:100;position:absolute;display:none;left:0;top:0;border:1px solid #C8D6FF;z-index:100;font-size:12px" id=aboutlayer>')
document.writeln ('<Table style="width:100%;background-color:#FFFFFF" cellspacing=0 cellpadding=0 ><tr>')
document.writeln ('<td align="center" style="CURSOR:hand;background-color:#8EABFF;color:#FFFFFF" OnClick="about(0)"><b>关闭</b></br></td></tr><tr><td style="font-size:12px;line-height:18px"  OnClick="about(0)">')
document.writeln("<Font Color=#8EABFF><b>Apex Date Selector 1.0</b></Font><br>程序系列:Apex 系列软件<br>")
document.writeln("程序名称:ADS 1.0<br>")
document.writeln("程序性质:免费<br>")
document.writeln ('程序版本:1.0<br>')
document.writeln("程序设计:凌空踏烟(易晓峰)<br>")
document.writeln('作者主页:<a href="" target="_black"></a><br>')
document.writeln ('联系作者:<a href="mailto:conis@{域名已经过期}" title="给作者发邮件">conis@{域名已经过期}</a><br>联系QQ:47015280</br>')
document.writeln('软件主页:<a href="http://{域名已经过期}" target="_black">http://{域名已经过期}</a><br>')
document.writeln('下载地址:<a href="http://{域名已经过期}/apex2004/product_service.asp.asp" target="_black">点击下载</a><br>')
document.writeln('版权所有&copy;<a href="">易晓峰</a> 任何人未经许可,不得更改,转载或者使用请保留版权 All Right Reserved <br><a href="http://{域名已经过期}" target="_blank">贝斯网络</a>@您的电子商务顾问')
document.writeln ('</td></tr><tr><td align="center" style="CURSOR:hand;background-color:#8EABFF;color:#FFFFFF" OnClick="about(0)"><b>关闭</b></br>')
document.writeln ('</td></tr></Table></Div>')
document.writeln ('<Div style="width:160;height:140;position:absolute;display:none;left:0;top:0;border:1px solid #C8D6FF;z-index:98;background-color:#FFFFFF" id=showdatelayer valign="top">')
document.writeln ('<Table width=100% height=100% style="font-size:10px" border=0 cellspacing=0 cellpadding=0><tr><td align="center">')
document.writeln ('<Table style="background-color:#8EABFF;color:#FFFFFF" width=100%><tr><td title="减小年" style="CURSOR:hand;font-size:12px" onclick="setdate(0,0)">-Y</td><td style="CURSOR:hand;font-size:12px" title="减小月" onclick="setdate(1,0)">-M</td>')
document.writeln ('<td style="font-size:12px" align="center" id=year></td><td style="font-size:12px" align="center" >年</td><td style="font-size:12px" align="center" id=month></td><td style="font-size:12px" align="center">月</td>')
document.writeln ('<td style="CURSOR:hand;font-size:12px" title="增加年" onclick="setdate(0,1)">+Y</td><td style="CURSOR:hand;font-size:12px" title="增加月" onclick="setdate(1,1)">+M</td></tr></Table>')
document.writeln ('</td></tr><tr><td align="center"><Table width=100% style="border-bottom:1px solid #C8D6FF"><tr style="font-size:12px"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></Table>')
document.writeln ('</td><tr><td><Table width=100%>')
//循环出单元格
var n=0
for (i=1;i<=6;i++){
 document.writeln ('<tr align="center">')
for (j=1;j<=7;j++){
 document.writeln ('<td align="center" style="font-size:12px;CURSOR:hand" OnClick="selectday(this.innerText)" id=day'+n+'></td>')
n++;
 }
 document.writeln ('</tr>')
 }
//结束循环
document.writeln ('</td></tr></table>')
document.writeln ('</td><tr><td style="font-size:12px;display:none;height:25" id=selectcell valign="bottom">')
document.writeln ('<select onchange="selectdate(0,this.value)" style="border:none;">')
document.writeln ('<option value="'+new Date().getYear()+'" selected>'+new Date().getYear()+'</option>')
for (y=new Date().getYear()-10;y<=new Date().getYear()+10;y++){
//此处可以修改选择日期的开始与结束年份 
 document.writeln ('<option value='+y+'>'+y+'</option>')
 }
document.writeln ('</select>年<select onchange="selectdate(1,this.value)">')
document.writeln ('<option value="'+new Date().getMonth()+'" selected>'+(new Date().getMonth()+1)+'</option>')
for (m=1;m<=12;m++){
//此处可以修改选择日期的开始与结束年份 
 document.writeln ('<option value='+m+'>'+m+'</option>')
 }
document.writeln ('<select> 月   <Span style="CURSOR:hand" onclick="opencell(0)"  title="关闭时间选择器">关闭</Span>')
document.writeln ('</td></tr></Table></DIv>')
//到此日期层结束
//关闭日期层的层
document.writeln ('<Div id=closedatelayer style="display:none;left:0;top:0;position:absolute;width:110;height:10;z-index:99;font-size:12px"><Span style="CURSOR:hand" onclick="opencell(1)" title="打开时间选择器">选择 </Span><Span style="CURSOR:hand" onclick="closelayer()">关闭窗口 </Span><Span Onclick="about(1)" style="CURSOR:hand" title="关于本程序">关于</Span></Div>')
var Tobject//全局变量,对象
var year//年
var month//月
var thedate//日
var datestyle//日期样式
var lack
function setdate(obj,aspect){//算日期
//obj 0=年,1=ā月 aspect 0=减 1=加
month=document.all.month.innerText//月,表格里的
year=document.all.year.innerText//年
if (month=="") month=new Date().getMonth()+1;//如果时间为空,则为当前年月
if (year=="") year=new Date().getYear();
//=====================================
if (obj==0){//年
 if (aspect==0){//减
  year=year-1;
  }else{
   year=year*1+1;
   }
}else if (obj==1){
 if (aspect==0){
  month=month-1;
  }else{
   month=month*1+1;
   }
}
if (month==13){//大于12月
 year=year*1+1;
 month=1;
}
if (month==0){//小于1月
 year=year-1;
 month=12;
}
writedate(year,month)
}
//======================================
function selectdate(selectobject,value){
//selectobject 0为年,1为月
if (selectobject==0){
 year=value
 writedate(value,month)
 }else if (selectobject==1){
  month=value
  writedate(year,value)
 }
}
//====================================
function writedate(writeyear,writemonth){//写入年与日历
var day
var firstday
if (writemonth==1||writemonth==3||writemonth==5||writemonth==7||writemonth==8||writemonth==10||writemonth==12){
 day=31//大月
 }else if(writemonth==4||writemonth==6||writemonth==9||writemonth==11){
 day=30//小月
 }else if (writeyear%4==0&&(writeyear%100!==0||writeyear%500==0)){
 day=29
 }else{
 day=28
 }
firstday=new Date(writeyear,writemonth-1,1).getDay();
firstday=0-firstday
//本月第一天是星期几
var u=firstday+1;
for (f=0;f<=41;f++){
 var thisday = eval("document.all.day"+f)
//====================================小于1则为空
 if (u<1||u>day){
  thisday.innerHTML="&nbsp;";
  thisday.style.cursor="default";
  thisday.bgColor="#FFFFFF";
 }else{
  thisday.innerHTML=u
  thisday.bgColor="#E6ECFF";
 }
//=====================================
 u++;
}
document.all.year.innerHTML=writeyear;//写入年
document.all.month.innerHTML=writemonth;//写入月
var year_month
if (Tobject.value==""){//初始值
 year_month=evaldate(writeyear,writemonth,new Date().getDate())
}else{
 if (thedate="undefined"){
  thedate=new Date().getDate()
  Tobject.value=Tobject.value //没有选择日期
  }
 year_month=evaldate(writeyear,writemonth,thedate)
}
//Tobject.value=year_month;
//计算一个月多少天结束
}
//==============================================
function evaldate(theyear,themonth,theday){//计算日期与样式
//lack (=0 补0;lack=1 不补0;);styledate(=0 -;=1 /;=2 汉字日期;=3 yymmdd )
if (lack==0){//补0
 if (themonth<10){themonth="0"+themonth};
 if (theday<10) {theday="0"+theday};
 }
if (datestyle==0){
 return theyear+"-"+themonth+"-"+theday
}else if (datestyle==1){
 return theyear+"/"+themonth+"/"+theday
}else if (datestyle==2){
 return theyear+"年"+themonth+"月"+theday+"日"
}else{
 return theyear+""+themonth+""+theday
 }
}
function selectday(day){//写入年月日
if (day>0&&day<=31){
 var year_month_day=evaldate(year,month,day)
 thedate=day
 //alert (thedate)
 Tobject.value=year_month_day
 closelayer()
 }
}
function showdate(object,thisdatestyle,thislack){//设定层的位置,写入日期
var style=document.all.showdatelayer.style;
var closestyle=document.all.closedatelayer.style;//关闭层的样式
x=window.event.x;//窗口的X坐标
y=window.event.y;//纵坐标
style.top=y+10;//层距顶部的位置
style.left=x-20;//层距左边的距离
closestyle.top=y+148;
closestyle.left=x+30;//关闭日期层的位置
closestyle.display='block';
style.display='block';
Tobject=object;//全局变量
datestyle=thisdatestyle;//日期样式
lack=thislack;//是否补0
if (Tobject==""){thedate=new Date().getDate()}//初始日期
setdate()//写入日期
//setTimeout("closelayer()",10000);//设定关闭层的时间
}
function closelayer(){
 showdatelayer.style.display='none'
 closedatelayer.style.display='none'
 aboutlayer.style.display='none'
}
function opencell(show_hidden){
if (show_hidden==0){
 document.all.selectcell.style.display='none'
}else{
 document.all.selectcell.style.display='block'
 }
}
function about(value){
aboutstyle=document.all.aboutlayer.style
if (value==1){
 aboutstyle.display="block"
 aboutstyle.left=window.event.x-150;
 aboutstyle.top=window.event.y-155;
 showdatelayer.style.display="none"
}else{
 aboutstyle.display="none"
 showdatelayer.style.display="block"
 }
}
//End


附件:
    关闭窗口
    打印文档
    账号登录
    保持登录 忘记密码?
    账号与武进教师培训平台同步