jquery实现的日期选择器

Posted 小菜鸟yjm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现的日期选择器相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于jquery实现的日期选择器的主要内容，如果未能解决你的问题，请参考以下文章

JQuery日期范围选择器日历与可变周

如何使用 jQuery 日期选择器优化引导输入标签

JQuery UI Datepicker：制作链接触发日期选择器

jQuery 日期选择器。 2个日期选择器。限制范围。默认日期 当前日期

jQuery 多日期选择器问题

jQuery 日期和时间选择器