jquery实现的日期选择器_jq日期选择器-CSDN博客

本文链接：https://blog.csdn.net/yongjiamingcj/article/details/11409989
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>selectDate.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		var dayInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
		function getDays(month,year)
		{
			if(month==1)
			{
				return (((year%4==0)&&((year%100)!=0))||(year%400==0))?29:28;
			}
			else
			{
				return dayInMonth[month];
			}
		}
		
		function createYear()
		{
			var year =1980;
			for(var i =0;i<100;i++)
			{
				document.all.year.options[document.all.year.length] = new Option(year+i);
			}
		}
		
		function getMonth()
		{
			return document.all.month.options[document.all.month.selectedIndex].value;
		}
		
		function getYear()
		{
			//string
			return document.all.year.options[document.all.year.selectedIndex].value;
		}
		function createTable()
		{
			var month = parseInt(getMonth());
				var year = parseInt(getYear());
	
				var date = new Date();
				date.setFullYear(year,month,1);//month:0~11                       
				//0~6依次表示星期天，123456  
				var intDay = date.getDay();
					
				//array数组存放当月的日期信息，和星期对齐。
				var array = new Array(40);
				for(var i=0;i<array.length;i++)
				{
					array[i]="";
				}
				var j =1;
				for(var i=0;i<getDays(month,year);i++)
				{
					array[i+intDay]=j;
					j++;
				}
				/*
				for(var i=0;i<getDays(month,year)+intDay;i++)
				{
					if(i%7==6)
					{
						$("#dateTable").append(array[i]+"<br>");
					}
					else
					{
						$("#dateTable").append(array[i]+"    ");
					}
				}
				*/
			
				//清除上一次的结果
				$("#dateTable tr:gt(0)").remove();
				var html="";

				for(var i=0;i<getDays(month,year)+intDay;i++)
				{
					if(i%7==0)
					{
						html+="<tr><td>"+array[i]+"</td>";
					}
					else if(i%7==6)
					{
						html+="<td>"+array[i]+"</td></tr>";
					}
					else
					{
						html+="<td>"+array[i]+"</td>";
					}
				}
				$("#dateTable").append(html);
		}
		
		$(function()
		 {
		 	createYear();
			$("#year").change(function()
			{
				createTable();
			});
			$("#month").change(function()
			{
				createTable();
			});
		});
		
		
	</script>

  </head>
  
  <body>
   	<div align="center">
   		请选择月份:
   		<select name="month" id="month">
   			<option value="0">一月</option>
   			<option value="1">二月</option>
   			<option value="2">三月</option>
   			<option value="3">四月</option>
   			<option value="4">五月</option>
   			<option value="5">六月</option>
   			<option value="6">七月</option>
   			<option value="7">八月</option>
   			<option value="8">九月</option>
   			<option value="9">十月</option>
   			<option value="10">十一月</option>
   			<option value="11">十二月</option>
   		</select>    
   		<select name="year" id="year">
   			<option>----</option>
   		</select>
   		<br><br><br><br>
   		<table id="dateTable" align="center" cellpadding="10">
   			<tr>
	   			<td>星期天</td>
	   			<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
			</tr>
   		</table>
   	</div>
  </body>
</html>