Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

JS 实现SELECT表单的生日选择

作者冰力, 02-22 14:49:13

javascript select 日期

您无法回复此主题

No replies to this topic

#1 冰力

Administrator

总版主
862 帖子数：

Location上海

发表于 2012/02/22 14:49:13

为了更灵活使用了很多HTML原生代码，但是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" lang="en" dir="ltr">
<head>
<title>SELECT BIRTHDAY by itbbs.cn</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/datefield.js"></script>
<script type="text/javascript">
$(function () {
	new DateField( 'birthdate' );
});
</script>

</head>

<body>

	<form id="joinForm" method="post" action="" name="joinForm" enctype="multipart/form-data">
	<div class="birthdate">
		<input name="birthdate" id="birthdate" type="hidden" />
		<select name="birthdate_year" type="text"><option value="">Year</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984" selected>1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option></select>
		<select name="birthdate_month" type="text"><option value="">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4" selected>Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>
		<select name="birthdate_day" type="text"><option value="">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21" selected>21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
	</div>
	</form>
	
</body>
</html>

datefield.js 源文件：

var DateField = function( $name )
{
	var self = this;

	var $cont = $("div[class='" + $name + "']");

	var $hidden = $cont.find("input[name='" + $name + "']");

	this.day = $cont.find("select[name='" + $name + "_day']");
	this.month = $cont.find("select[name='" + $name + "_month']");
	this.year = $cont.find("select[name='" + $name + "_year']");

	this.dayFirstOption = self.day.find('option[value=\'\']');

	this.day.change( function()
	{
		self.updateValue();
	});

	this.year.change( function()
	{
		self.changeMonth();
	});

	this.month.change( function()
	{
		self.changeMonth();
	});

	this.changeMonth = function()
	{
		if( self.month.val() != ''  & self.year.val() != ''  )
		{
			var $dayVal = 0;

			if ( self.day.val() != '');
			{
				$dayVal = self.day.val();
			}

			var $monthVal = self.month.val(); // parse date into variables
			var $yearVal = self.year.val();

			if ( $monthVal < 1 )
			{
				self.month.val(1);
			}

			if( $monthVal > 12 )
			{
				self.month.val(12);
			}

			if ( $monthVal==4 || $monthVal==6 || $monthVal==9 || $monthVal==11 )
			{
				self.updateDays($dayVal, 30);
			}
			else if ( $monthVal == 2 )
			{
				var isleap = ($yearVal % 4 == 0 && ($yearVal % 100 != 0 || $yearVal % 400 == 0));

				if ( isleap )
				{
					self.updateDays($dayVal, 29);
				}
				else
				{
					self.updateDays($dayVal, 28);
				}
			}
			else
			{
				self.updateDays($dayVal, 31);
			}


	   }
	   self.updateValue();
	}

	this.updateDays = function( $dayValue, $daysCount )
	{
		if( self.day.find('option[value!=""]').size() == $daysCount )
		{
			return;
		}

		self.day.find('option[value!=\'\']').remove();

		if( !$dayValue )
		{
			$dayValue = '';
		}
		else if ( $dayValue > $daysCount )
		{
			$dayValue = $daysCount;
		}

		for ( var i=1; i<= $daysCount; i++ )
		{
			var $option = this.dayFirstOption.clone();

			$option.text(i);
			$option.val(i);

			if ( $dayValue == i )
			{
				$option.attr('selected', 'selected');
			}

			self.day.append($option);
		}
	}

	this.updateValue = function()
	{
		if( self.day.val() != '' && self.month.val() != ''  && self.year.val() != ''  )
		{
			$hidden.val( self.year.val() + '/' + self.month.val() + '/' + self.day.val() );
		}
		else
		{
			$hidden.val('');
		}
	}
}

附加文件

datefield.zip 34.73K 1 下载次数

返回到Javascript

目前查看此主题的用户： 1 位

0 位会员， 1 位游客， 0 位隐身会员