jQuery实现的日期提取器 DatePicker

2009-08-31 08:41:02 来源:查看 | 【大中小】

本范例通过jQuery实现了一个可以弹出日历窗口的时间提取器，省去了用户输入，直接点击即可。本日历提取器只能提取到年、月、日。

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


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

<script type="text/javascript">
<!--

onload = function() {
t = new Date;
currentYear = t.getFullYear();

datepickstart()
datepickend()
}

// set up the first datepicker //
function datepickstart () {
$("#datepickS").after("<span class='calendarHolder'><img src='image/calendar.gif' id='pickerS' class='picker' alt='' title='click to show/hide calendar' /></span>");
printCalendar("#pickerS", "calendarS")

$("#pickerS").click(function () {
if (this.className.indexOf('show') != -1) {
$("#calendarS").fadeOut('slow');
$(this).removeClass("show");
}
else {
$(".calendarTable").fadeOut('slow');
$(".picker").removeClass("show");
$("#calendarS").fadeIn('slow');
$(this).addClass("show");
}
});

startYear = 2009;
endYear = 2014;
years = document.getElementById('weekday').selectYear;
populateYear (startYear, endYear, years)

todayDate("#selectDay","#selectMonth","#selectYear")
calendar("#selectDay", "#selectMonth", "#selectYear", "#calendarS", "#calendar")

$("#selectDay,#selectMonth,#selectYear").change(function () {
checkDays("#selectDay","#selectMonth","#selectYear")
calendar("#selectDay", "#selectMonth", "#selectYear", "#calendarS", "#calendar")
})

$('#calendarS td').click(function(){
newDate = $(this).html();
$('#selectDay').val(newDate);
$('#calendarS td').removeClass("current");
$(this).addClass("current");
});
}

// set up the second datepicker //
function datepickend () {
$("#datepickE").after("<span class='calendarHolder'><img src='image/calendar.gif' id='pickerE' class='picker' alt='' title='click to show/hide calendar' /></span>");
printCalendar("#pickerE", "calendarE")

$("#pickerE").click(function () {
if (this.className.indexOf('show') != -1) {
$("#calendarE").fadeOut('slow');
$(this).removeClass("show");
}
else {
$(".calendarTable").fadeOut('slow');
$(".picker").removeClass("show");
$("#calendarE").fadeIn('slow');
$(this).addClass("show");
}
});

startYear = 2010;
endYear = 2015;
years = document.getElementById('weekday').selectYearE;
populateYear (startYear, endYear, years)

todayDate("#selectDayE","#selectMonthE","#selectYearE")
calendar("#selectDayE", "#selectMonthE", "#selectYearE", "#calendarE", "#calendar")

$("#selectDayE,#selectMonthE,#selectYearE").change(function () {
checkDays("#selectDayE","#selectMonthE","#selectYearE")
calendar("#selectDayE", "#selectMonthE", "#selectYearE", "#calendarE", "#calendar")
})

$('#calendarE td').click(function(){
newDate = $(this).html();
$('#selectDayE').val(newDate);
$('#calendarE td').removeClass("current");
$(this).addClass("current");
});

}
//-->

</script>

<link rel="stylesheet" media="all" type="text/css" href="css/datepicker.css" />

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


<form id="weekday" action="">
<p>
<label for="selectMonth">Select start date:</label>
	<select id="selectMonth" name="selectMonth">
		<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">
		<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">
	<option></option>
	</select>
	<input type="hidden" size="10" id="datepickS" disabled="disabled"/>

<br /><br /><br />

<label for="selectMonthE">Select end date:</label>
	<select id="selectMonthE" name="selectMonthE">
		<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="selectDayE" name="selectDayE">
		<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="selectYearE" name="selectYearE">
	<option></option>
	</select> 
	<input type="hidden" size="10" id="datepickE" disabled="disabled"/>
</p>
</form>

上面的代码为两个日期选择框的HTML代码，可以根据需要调整。

下载"jQuery实现的日期提取器 DatePicker"

推荐给朋友

上一篇：纯CSS实现的鼠标滑过图片放大效果
下一篇： jQuery实现根据指定日期返回是星期几

jQuery实现的日期提取器 DatePicker

下载"jQuery实现的日期提取器 DatePicker"

相关资源