写的狗屎一样的日期联动

Js水平太差了,用JQ写个垃圾一样的日期联动,不过能用哦~~~勿喷


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>日期联动选择器</title>
<script type="text/javascript" src='./jquery.js'>

</script>
<script>
/*
JQ 日期联动
Coding by EI_Nino
*/
$(document).ready(function(){
var i=0;
for(i=2000; i<=2017; i++)//年份设置
	 $('select.year').append("<option value='"+i+"' >"+i+"</option>");
for(i=1; i<=12; i++)
	 $('select.month').append("<option value='"+i+"' >"+i+"</option>");
for(i=1; i<=31; i++)
	 $('select.day').append("<option value='"+i+"' >"+i+"</option>");
$('select.year').change(function( ){
$(this).parent('.time-select').children('select.month').html('');
$(this).parent('.time-select').children('select.day').html('');
for(i=1; i<=12; i++)
	 $(this).parent('.time-select').children('select.month').append("<option value='"+i+"' >"+i+"</option>");
for(i=1; i<=31; i++)
	 $(this).parent('.time-select').children('select.day').append("<option value='"+i+"' >"+i+"</option>");

	 $(this).parent('.time-select').children('.timeshow').val(($(this).parent('.time-select').children('select.year').val())+"-"+($(this).parent('.time-select').children('select.month').val())+"-"+($(this).parent('.time-select').children('select.day').val()));
	 });	 
	 
$('select.month').change(function( ){
	var Month = $(this).val();
	 
	if(Month==1||Month==3||Month==5||Month==7||Month==8||Month==10||Month==12)//1 3 5 7 8 10 腊 ,31天永不差
	{
		$(this).parent('.time-select').children('select.day').html('');
		for(i=1; i<=31; i++){
		if(i==1)
		$(this).parent('.time-select').children('select.day').append("<option value='"+i+"' selected >"+i+"</option>");
		else $(this).parent('.time-select').children('select.day').append("<option value='"+i+"'  >"+i+"</option>");
		}
	}
	else if(Month==2)//闰2月
	 {
	 
		var Year  =$(this).parent('.time-select').children('select.year').val();
		if(Year%400)
		{
			if(Year%4){
			
			$(this).parent('.time-select').children('select.day').html('');
			for(i=1; i<=28; i++){
				if(i==1)
				$(this).parent('.time-select').children('select.day').append("<option value='"+i+"' selected >"+i+"</option>");
				else $(this).parent('.time-select').children('select.day').append("<option value='"+i+"'  >"+i+"</option>");
		}
			}
			else{
			
			for(i=1; i<=29; i++){
		if(i==1)
		$(this).parent('.time-select').children('select.day').append("<option value='"+i+"' selected >"+i+"</option>");
		else $(this).parent('.time-select').children('select.day').append("<option value='"+i+"'  >"+i+"</option>");
		}
			
			}
		}else{
		$(this).parent('.time-select').children('select.day').html('');
		for(i=1; i<=29; i++){
		if(i==1)
		$(this).parent('.time-select').children('select.day').append("<option value='"+i+"' selected >"+i+"</option>");
		else $(this).parent('.time-select').children('select.day').append("<option value='"+i+"'  >"+i+"</option>");
			}
		}
	}
	else {
	$(this).parent('.time-select').children('select.day').html('');
	for(i=1; i<=30; i++){
		if(i==1)
		$(this).parent('.time-select').children('select.day').append("<option value='"+i+"' selected >"+i+"</option>");
		else $(this).parent('.time-select').children('select.day').append("<option value='"+i+"'  >"+i+"</option>");
		}
	}
	$(this).parent('.time-select').children('.timeshow').val(($(this).parent('.time-select').children('select.year').val())+"-"+($(this).parent('.time-select').children('select.month').val())+"-"+($(this).parent('.time-select').children('select.day').val()));
});
$('select.day').change(function( ){
$(this).parent('.time-select').children('.timeshow').val(($(this).parent('.time-select').children('select.year').val())+"-"+($(this).parent('.time-select').children('select.month').val())+"-"+($(this).parent('.time-select').children('select.day').val()));
});
});

</script>
</head>

<body>
<div class='time-select'>
<select class="year"></select> 
<select class="month"></select> 
<select class="day"></select> 
<br />
你选择的日期:
<input type="text" name='starttime' class="timeshow" />
<br />
</div>

<div class='time-select'>
<select class="year"></select> 
<select class="month"></select> 
<select class="day"></select> 
<br />
你选择的日期:
<input type="text" name='endtime' class="timeshow" />
<br />
</div>


</body>
</html>
 


你可能感兴趣的:(写的狗屎一样的日期联动)