﻿/*
	日期选择下拉列表JS控件
	作者：	欧坤庆 
	Email:	oukunqing@gmail.com
	QQ:		85079542
	最后修改日期:	2009-04-16 
	
	参数说明:
	syear		年下拉列表
	smonth		月下拉列表
	sday		日下拉列表
	datatext	日期输入文本框
	isDay		是否显示当前选中的日期，true:当前月份天数改变以后根据条件显示相应日期; false:天数改变以后不显示选中日期
	maxYear		设置最大显示年份
	minYear		设置最大显示年份
	isCur		是否以当前年月日作为初始日期显示
	isNull		下拉列表初始值显示设置，true:初始显示当前日期或指定的日期; false:初始显示为"请选择"

	objDate		日期文本框表单控件集合
	objSelect	下拉列表表单控件集合
	oper		是否执行切换动作，true:点击确定按钮将隐藏objDate并切换显示objSelect; false:点击确定按钮不隐藏objDate

	本JS控件只是本人自己为了使用方便而做，如果觉得有用可以随便使用，如果对程序的不足之处有好的建议或意见，欢迎随时指教，谢谢！
	因水平所限，没有将各表单控件动态显示(以代码将控件写出来)
	调用方法示例见底部
*/

/*获取当前选中的年月日*/
function GetDays(syear,smonth,sday,datetext){
    var syear = $I(syear);
    var smonth = $I(smonth);
    var sday = $I(sday);
    var datetext = $I(datetext);
    datetext.value = (syear.value != "" && smonth.value != "" && sday.value != "") ? syear.value + "-" + smonth.value + "-" + sday.value : "";
}
/*根据所选择的年份和月份设置天数*/
function setDays(syear,smonth,sday,datetext,isDay){
    var syear = $I(syear);
    var smonth = $I(smonth);
    var sday = $I(sday);
    var datetext = $I(datetext);
	/*当前选中的日期*/
    var curDay = sday.value != "" ? parseInt(sday.value,10) : -1;
	/*年下拉列表中选择的年份*/
	var yearValue = syear.value != "" ? parseInt(syear.value,10) : -1;
	/*月下拉列表中选择的月份*/
	var monthValue = parseInt(smonth.value,10);
	/*下拉列表中原有的天数*/
	var olddaysValue = sday.options.length;
	/*设置当前月份的天数*/
	var days = (monthValue == 2) ? (((yearValue % 4 == 0 && yearValue % 100 != 0) || yearValue % 400 == 0) ? 29 : 28) : ((monthValue == 4 || monthValue == 6 || monthValue == 9 || monthValue == 11) ? 30 : 31);
	/*如果天数变了,重新加载天数(根据闰年、月份)	*/
	if (olddaysValue-1 == days)
	{
		datetext.value = syear.value + "-" + smonth.value + "-" + sday.value;
		return false;  /*如果天数不变则不调用以下的代码*/
	}
	else{
		/*清除天数*/
		sday.options.length=0; 
		sday.options[sday.length] = new Option("选择","");
		/*重新加载天数*/
		for (var j = 1; j <= days; j++){
			sday.options[sday.length] = new Option((j >= 10) ? j : "0" + j, (j >= 10) ? j : "0" + j);
		}
		var curIndex = (isDay && curDay != -1) ? ((curDay <= days) ? curDay : days) : 0;
		sday.options[curIndex].selected = true;
		datetext.value = syear.value + "-" + smonth.value + "-" + sday.value;
	}
}
/*加载日期选择下拉列表*/
function dateUpdateOnload(syear,smonth,sday,maxYear,minYear,isCur,datetext,isNull){
    var syear = $I(syear);
    var smonth = $I(smonth);
    var sday = $I(sday);
    var dtext = $I(datetext);
    var maxYear = parseInt($I(maxYear).value,10);
    var minYear = parseInt($I(minYear).value,10);
	var strDate = new Array();
	if(dtext == null || dtext.value == ""){
		strDate[0] = new Date().getYear() > 1000 ? new Date().getYear() : new Date().getYear() + 1900;
		strDate[1] = new Date().getMonth() + 1;
		strDate[2] = new Date().getDate();
	}
	else{
		strDate = dtext.value.split(' ')[0].split(dtext.value.indexOf("-") > 0 ? "-" : "/");
	}
	/*显示当前年月日(如果没有明确设置当前显示年月日，可选择显示当前年月日)*/
    if(isCur){
	    var curYear = new Date().getYear() > 1000 ? new Date().getYear() : new Date().getYear() + 1900;
	    var curMonth = new Date().getMonth() + 1;
	    var curDay = new Date().getDate();
	    /*最大年份必须大于或等于当前年份*/
	    maxYear = maxYear > curYear ? maxYear : curYear;
	    /*最小年份必须小于或等于当前年份*/
	    minYear = minYear < curYear ? minYear : curYear;
    }	
	var days = 31;
	var year = parseInt(strDate[0],10);
	var month = parseInt(strDate[1],10);
	var day = parseInt(strDate[2],10);
	syear.options[syear.length] = new Option("选择","");
	smonth.options[smonth.length] = new Option("选择","");
	sday.options[sday.length] = new Option("选择","");
	for (var i = maxYear; i >= minYear; i--){
		syear.options[syear.length] = new Option(i, i);
		syear.options[maxYear+1-i].selected = (isNull && (parseInt(i,10) == year)) ? true : false;
	}
	for (var j = 1; j <= 12; j++){
		smonth.options[smonth.length] = new Option((j >= 10) ? j : "0" + j, (j >= 10) ? j : "0" + j);
		smonth.options[j].selected = (isNull && (parseInt(j,10) == month)) ? true : false;		 
	}
	/*设置当前月份天数*/
	days = (month == 2) ? (((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 29 : 28) : ((month == 4 || month == 6 || month == 9 || month == 11) ? 30 : 31);
	
	for (var k = 1; k <= days; k++){
		sday.options[sday.length] = new Option((k >= 10) ? k : ("0" + k), (k >= 10) ? k : ("0" + k));
		sday.options[k].selected = (isNull && (parseInt(k,10) == day)) ? true : false;		
	}
}
/*显示当前日期选择或日期文本框(切换)*/		
function showDateSelect(objDate,objSelect,oper,syear,smonth,sday,datetext){
	var objDate = $I(objDate);
	var objSelect = $I(objSelect);
	var datetext = $I(datetext);
	var syear = $I(syear);
	var smonth = $I(smonth);
	var sday = $I(sday);
	if(oper){
		objDate.style.display = "none";
		objSelect.style.display = "";
	}
	else{		
		if(syear.value != "" && smonth.value != "" && sday.value != ""){
			datetext.value = syear.value + "-" + smonth.value + "-" + sday.value;
			objDate.style.display = "";
			objSelect.style.display = "none";
		}
		else if(syear.value == "" && smonth.value == "" && sday.value == ""){
			datetext.value = "";
			objDate.style.display = "";
			objSelect.style.display = "none";
		}
	}
}
/* 调用方法示例 <script type="text/javascript" src="datetime_select.js"></script> */
/* <style type="text/css">
	body{font-size:12px;}
	.time {width:60px; height:18px;font-size:12px;border:solid 1px #eee;}
	.btnTime{width:40px;height:19px; border:solid 1px #eee; border-right:solid 1px #aaa; border-bottom:solid 1px #aaa; background:#eee; cursor:pointer;} </style> */
/*
<input id="MaxYear" value="2009"/><input id="MinYear" value="1900" />

添加日期示例:
<div id="div_datetime">
	<span id="date1">
	<input id="txtBirthday" type="text" name="txtBirthday" style="" runat="server" value="" onclick="showDateSelect('date1','select1',true,null,null,null,null);"/>
	</span>
	<span id="select1" style="display:none;">
    <select onchange="setDays('year','month','day','txtBirthday',true)" id="year" name="year" class="time"></select>年<select onchange="setDays('year','month','day','txtBirthday',true)" id="month" name="month" class="time"></select>月<select onchange="setDays('year','month','day','txtBirthday',true)" id="day" name="day" class="time"></select>日<input type="button" value="确定" onclick="showDateSelect('date1','select1',false,'year','month','day','txtBirthday');" class="btnTime"/>
	</span>
    <script type="text/javascript">dateUpdateOnload("year","month","day",'MaxYear','MinYear',true,'txtBirthday',false);</script>
</div>
<br /><br />
修改日期示例:
<div id="div_datetime1">
	<span id="date2">
	<input id="txtBirthday1" type="text" name="txtBirthday1" value="2009-04-16" style="" runat="server" onclick="showDateSelect('date2','select2',true,null,null,null,null);"/>
	</span>
	<span id="select2" style="display:none;">
    <select onchange="setDays('year1','month1','day1','txtBirthday1',true)" id="year1" name="year1" class="time"></select>年<select onchange="setDays('year1','month1','day1','txtBirthday1',true)" id="month1" name="month1" class="time"></select>月<select onchange="setDays('year1','month1','day1','txtBirthday1',true)" id="day1" name="day1" class="time"></select>日<input type="button" value="确定" onclick="showDateSelect('date2','select2',false,'year1','month1','day1','txtBirthday1');" class="btnTime"/>
	</span>
    <script type="text/javascript">dateUpdateOnload("year1","month1","day1",'MaxYear','MinYear',true,'txtBirthday1',false);</script>
</div>
*/