jQuery实现根据指定日期返回是星期几

2009-08-31 09:21:48 来源:查看 | 【大中小】

这是一个典型的jQuery/JavaScript范例，可以根据选定的日期返回一周的星期几从下拉列表中选择年月日后，下面的标签会自动显示星期几下拉列表有自动调节日的功能，如果是2月，程序会自动判断是闰年还是平年，然后设定日的下拉列表本文需要使用JQuery.1.3.2，sharejs.com提供

查看演示页面 View Demo 查看全部代码 View Code

在网页<head>区添加以下代码


<script src="jquery/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
onload = function() {

t = new Date;

startYear = 1900;
currentYear = t.getFullYear() + 1;
range = currentYear-startYear;

for(var yr=0; yr<range; yr++)
{
document.days.selectYear.options[yr] = new Option(startYear,startYear);
startYear++
}
checkDays()
}

function checkDays() {
	currentDate = $('#selectDay').val();
	var daysInMonth = 32 - new Date($('#selectYear').val(), $('#selectMonth').val() - 1, 32).getDate();

	getMonth = $('#selectMonth').val()-1;
	getYear = $('#selectYear').val();
	var days = document.days.selectDay;
	totalDays = 32 - new Date(getYear, getMonth, 32).getDate();
	days.options.length = 0;
	for(var ff=0; ff<totalDays; ff++)
	{
		dayString = ff+1
		dayString = dayString.toString()
		if (dayString.length == 1) {
			dayString = "0" + dayString;
		}
		days.options[ff] = new Option(ff+1,dayString);
	}
	$('#selectDay').val(currentDate);

	if (currentDate > daysInMonth) {
		$('#selectDay').val(daysInMonth); 
	}
	getDay(getYear,getMonth,currentDate)
}


function getDay(year,month,date) {
var ar = new Array();
ar[0] = "Sunday";
ar[1] = "Monday";
ar[2] = "Tuesday";
ar[3] = "Wednesday";
ar[4] = "Thursday";
ar[5] = "Friday";
ar[6] = "Saturday";
var birthDay = new Date();
birthDay.setYear(year);
birthDay.setMonth(month);
birthDay.setDate(date);
var day = birthDay.getDay();
$("#day").html(ar[day]);
}
</script>

<style type="text/css">
#weekday {font-family:tahoma, sans-serif; font-size:20px;}
#weekday label {font-size:20px; color:#800;}
#weekday select option {background:#800; color:#fff; border:1px solid #fff;}
.currentDate {font-family:tahoma, sans-serif; font-size:24px;}
.currentDate span {color:#800;}
</style>

在网页<body>区添加以下代码


<form id="weekday" name="days" action="">

<label for="selectMonth">Select your date</label>
	<select id="selectMonth" name="selectMonth" onChange="checkDays();">
		<option value="01">January</option><option value="02">February</option> 
		<option value="03">March</option><option value="04">April</option> 
		<option value="05">May</option><option value="06">June</option> 
		<option value="07">July</option><option value="08">August</option> 
		<option value="09">September</option><option value="10">October</option> 
		<option value="11">November</option><option value="12">December</option>
	</select>
	<select id="selectDay" name="selectDay" onChange="checkDays();">
		<option value="01">1</option><option value="02">2</option> 
		<option value="03">3</option><option value="04">4</option> 
		<option value="05">5</option><option value="06">6</option> 
		<option value="07">7</option><option value="08">8</option> 
		<option value="09">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">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> 
	<select id="selectYear" name="selectYear" onChange="checkDays();">
	</select> 
</form>
<p class="currentDate">This date is <span id="day"></span></p>

下载"jQuery实现根据指定日期返回是星期几"

推荐给朋友

上一篇： jQuery实现的日期提取器 DatePicker
下一篇：仿票务网10图大幅焦点图片切换效果

jQuery实现根据指定日期返回是星期几

下载"jQuery实现根据指定日期返回是星期几"

相关资源