js 日期选择器

提示:您可以先修改部分代码再运行


源代码阅读:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期选择器</title>
</head>
<script type="text/javascript">
var date=new Date();//初始化时间对象
var year=date.getFullYear();//取得当前年份
var get_month=date.getMonth()+1;//取得当前月份
var day1=date.getDate();//取得当前日期
var value="";//设置一个全局变量,用于接收保存下拉框中所选中的年份和月份
//输出年份
function write_year(){
    var count=0;
    for(var i=year-20; i<year+10; i++){
		//利用new Option()对象添加option年份选项
        eval("document.form1.year.options&#91;count&#93;=new Option('"+i+"','"+i+"')");
		//如果i值为当前年份,则选为默认项
		if(i==year){
		   eval("document.form1.year.options&#91;count&#93;=new Option('"+i+"','"+i+"',true,true)");
		}
	    count++;
    }
}
//输出月份
function write_month(){
	var month_count=0;
	for(var i=1;i<13;i++){
		//利用new Option()对象添加option月份选项
	    eval("document.form1.month.options&#91;month_count&#93;=new Option('"+i+"','"+i+"')");
		//如果i值为当前月份,则选为默认项
		if(i==get_month){
		    eval("document.form1.month.options&#91;month_count&#93;=new Option('"+i+"','"+i+"',true,true)");
		}
		month_count++;
	}
}
//输出所选年份,月份中的的日期及对应是星期几
function write_day(get_year){
	var day_count;//设置一个变量,用于保存一月中有多少天
	var now_date=new Date(get_year);//设置当前日期为所选的日期
	var now_month=now_date.getMonth()+1;//获得所选日期的月份
	var now_year=now_date.getFullYear();//获得所选日期的年份
	//判断出各个月份中有几天
	switch(now_month){
		//1,3,5,7,5,8,10,12月份中有31天
	    case 1:
		case 3:
		case 5:
		case 7:
		case 8:
		case 10:
		case 12:
		    day_count=31;
		break;
		//4,6,9,11月份中有30天
		case 4:
		case 6:
		case 9:
		case 11:
		    day_count=30;
		break;
		//判断2月份中的天数
		default:
		//如果为闰年,则有29天
		if(now_year%4==0||now_year%400==0){
	        day_count=29;
	    }else {
		//平常年份有28天
	        day_count=28;
	    }
		break;
	}
	//算出日期并且对应到星期几
	var content = "";//设置一个变量,用于存储日期的内容
	//now_date.setDate(1);
	var day1_weekday=now_date.getDay();//算出此月第一天是周几
	content +="<table width='100%' border='0'>";//输出table标签
	//判断day1_weekday回的值,如果是0,则是周日,1则是周一,依此类推,并将它们显示在相对应的位置
	switch(day1_weekday){
		       	case 1:
				    content+="<td></td>";
				break;
				case 2:
				    content+="<td></td><td></td>";
				break;
				case 3:
				    content+="<td></td><td></td><td></td>";
				break;
				case 4:
				    content+="<td></td><td></td><td></td><td></td>";
				break;
				case 5:
				    content+="<td></td><td></td><td></td><td></td><td></td>";
				break;
				case 6:
				    content+="<td></td><td></td><td></td><td></td><td></td><td></td>";
				break;
				default:
				    content+="";
				break;
	 }
	//循环输出日期
	for(var i=1;i<day_count+1;i++){
		//如果选择的日期是当前年月日,则用绿色字体标注出来
		if(now_year==year&&now_month==get_month&&i==day1){
		  content +="<td style='color:#039469;'>"+i+"</td>";
		}else if((i+day1_weekday-1)%7==0||(i+day1_weekday)%7==0){//如果是周六日则用红色字体标注
		   content +="<td style='color:#c32a02;'>"+i+"</td>";
		}else{//其余的则不标注
		    content +="<td>"+i+"</td>";
		}
		if((i+day1_weekday)%7==0){//输出7个td ,则输出一个tr进行换行
			content +="<tr></tr>";
		}
	}
	content +="</table>";
	document.getElementById('show_day').innerHTML = content;//将content内容添加到id为'show_day'的td上,并显示在网页上
}
//获取select选择中的值
function get_selected_value(){
	value = "";//因为value为常量,则每次记录选择的选项前要清空其中的内容
	//循环找出选择的option项(年份),并记录在value中
   	for(i=0;i<document.form1.year.length;i++){
	    if(document.form1.year.options&#91;i&#93;.selected)
		value+=document.form1.year.options&#91;i&#93;.value+'/';
	}
	//循环找出选择的option项(月份),并记录在value中
	for(i=0;i<document.form1.month.length;i++){
	    if(document.form1.month.options&#91;i&#93;.selected)
		value+=document.form1.month.options&#91;i&#93;.value+'/1';
	}
	return value;//将所记录的内容返回
}
//运行js
window.onload=function(){
write_year();//输出年份
write_month();//输出月份
get_selected_value();//获得选择的年月,保存在value中并返回
write_day(value);//将select选中的年选择中的月份中的日子输出在相对应的星期几上
}
</script>
<body>
<form action="" method="post" name="form1">
<table width="500" style="border:1px solid #2d5ba7;" bgcolor="#f9fafb">
  <tr>
    <td style="background:#ffffff;">
    <table width="100%" border="0" >
  <tr>
    <td width="22%">
    <select name="year" style="width:100px;" onchange="write_day(get_selected_value())">
    </select>
    </td>
    <td width="78%">
     <select name="month" style="width:100px;"  onchange="write_day(get_selected_value())">
    </select>
    </td>
  </tr>
</table>
    </td>
  </tr>
  <tr>
    <td><table width="100%" border="0">
  <tr>
    <td style="border:#444444 solid 1px; background:#2d5ba7; color:#ffffff;">
    <table width="100%" border="0" >
  <tr>
    <td>日</td>
    <td>一</td>
    <td>二</td>
    <td>三</td>
    <td>四</td>
    <td>五</td>
    <td>六</td>
  </tr>
</table>
    </td>
  </tr>
  <tr>
    <td id='show_day'>
    </td>
  </tr>
</table>
</td>
  </tr>
</table>
</form>
</body>
</html>

相关文章

2 评论

  1. 1.不用循环会更好些.
    //获取select选择中的值
    function get_selected_value(){
    value = “”;//因为value为常量,则每次记录选择的选项前要清空其中的内容
    //循环找出选择的option项(年份),并记录在value中
    value+=document.form1.year.value+’/’;
    //循环找出选择的option项(月份),并记录在value中
    value+=document.form1.month.value+’/1′;
    return value;//将所记录的内容返回
    }

    2.日期的tr不完善.虽然显示正常,但是打印content就会发现问题.
    3.光实现这些,没什么意义,还需要做到用户选择了,自动填充到input里,或者反馈给用户他选择了什么日期.

发表评论

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