Javascript 日期选择器

Category: Javascript   Keywords: javascript date selector

最近在做的一个项目是显示搜索字段的数据。不同的人在这个站点用不同的关键词做搜索，可能有些关键词没有找到任何结果。我所做的就是显示某段时间内所搜索的关键词和结果数。重点显示没有结果的关键词，这样可以进一步改进站点。

我们最常用的某段时间可能就是“今天”，“昨天”，“最近一个礼拜”，“最近一个月”，“最近三个月”等。

这该死的 javascript 尽然整整花了我 2 个小时。

• 下面这段在 IE 中可运行，在 Firefox 中不行。

  NewOption = new Option(DaysObject.options.length + 1);
  DaysObject.add(NewOption);

  这里的 DaysObject 是个 select
  最后将 DaysObject.add(NewOption); 改成 DaysObject.options.add(NewOption); 才过关。
• 然后在 Firefox 能运行，在 IE 中不能运行的东西。

  $('to_day').value   = d.getDate();

  这是一个 prototype.js 的东西。$('to_day') 就是上面插入的那个 select. 奇怪的就是 prototype.js 在这里的 .value = d.getDate(); 能在 Firefox 中运行但不能在 IE 中运行。最后改为：

  $('to_day').options[d.getDate() - 1].selected = true;

  才过关。

javascript 真是很烦，不同的浏览器都不太兼容。我还仅仅只是测试了 IE 6 和 Firefox.

最后的案例

From: 2005 2006 2007 1 2 3 4 5 6 7 8 9 10 11 12 To: 2005 2006 2007 1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript" src="http://fayland.org/javascript/prototype.js"></script>

<script type="text/javascript">

	function DaysInMonth(WhichMonth, WhichYear) {
		var DaysInMonth = 31;
		if (WhichMonth == 4 || WhichMonth == 6 || WhichMonth == 9 || WhichMonth == 11) DaysInMonth = 30;
		if (WhichMonth == 2 && (WhichYear/4) != Math.floor(WhichYear/4))	DaysInMonth = 28;
		if (WhichMonth == 2 && (WhichYear/4) == Math.floor(WhichYear/4))	DaysInMonth = 29;
		return DaysInMonth;
	}
	function ChangeOptionDays(Which) {
		var obj;
		if (Which == "from") {
			DaysObject = $('from_day');
			DaysForThisSelection = DaysInMonth($('from_month').value, $('from_year').value);
		} else {
			DaysObject = $('to_day');
			DaysForThisSelection = DaysInMonth($('to_month').value, $('to_year').value);
		}
			
		CurrentDaysInSelection = DaysObject.length;
		if (CurrentDaysInSelection > DaysForThisSelection) {
			for (i=0; i<(CurrentDaysInSelection-DaysForThisSelection); i++) {
				DaysObject.options[DaysObject.options.length - 1] = null
			}
		}
		if (DaysForThisSelection > CurrentDaysInSelection) {
			for (i=0; i<(DaysForThisSelection-CurrentDaysInSelection); i++) {
				NewOption = new Option(DaysObject.options.length + 1);
				DaysObject.options.add(NewOption);
			}
		}
		if (DaysObject.selectedIndex < 0) DaysObject.selectedIndex == 0;
	}

	d = new Date();
	function Today() {
		$('from_year').value  = d.getFullYear();
		$('from_month').value = d.getMonth() + 1;
		ChangeOptionDays('from');
		$('from_day').options[d.getDate() - 1].selected = true;
		$('to_year').value  = d.getFullYear();
		$('to_month').value = d.getMonth() + 1;
		ChangeOptionDays('to');
		$('to_day').options[d.getDate() - 1].selected = true;
	}
	function LastWeek() {
		$('to_year').value  = d.getFullYear();
		$('to_month').value = d.getMonth() + 1;
		ChangeOptionDays('to');
		$('to_day').options[d.getDate() - 1].selected = true;
		
		d2 = new Date();
		d2.setDate(d2.getDate()-7);
		$('from_year').value  = d2.getFullYear();
		$('from_month').value = d2.getMonth() + 1;
		ChangeOptionDays('from');
		$('from_day').options[d2.getDate() - 1].selected = true;
	}
	function ThisMonth() {
		$('from_year').value  = d.getFullYear();
		$('from_month').value = d.getMonth() + 1;
		ChangeOptionDays('from');
		$('from_day').options[0].selected = true;
		$('to_year').value  = d.getFullYear();
		$('to_month').value = d.getMonth() + 1;
		ChangeOptionDays('to');
		i = $('to_day').length - 1;
		$('to_day').options[i].selected = true;
	}
	function LastMonth() {
		if (d.getMonth() == 0) {
			$('from_year').value  = d.getFullYear() - 1;
			$('from_month').value = 12;
			$('to_year').value    = d.getFullYear() - 1;
			$('to_month').value   = 12;
		} else {
			$('from_year').value  = d.getFullYear();
			$('from_month').value = d.getMonth();
			$('to_year').value    = d.getFullYear();
			$('to_month').value   = d.getMonth();
		}
		ChangeOptionDays('from');
		$('from_day').options[0].selected = true;
		ChangeOptionDays('to');
		i = $('to_day').length - 1;
		$('to_day').options[i].selected = true;
	}
	function ThreeMonth() {

		if (d.getMonth() < 2) {
			$('from_year').value  = d.getFullYear() - 1;
			$('from_month').value = 11 + d.getMonth();
		} else {
			$('from_year').value  = d.getFullYear();
			$('from_month').value = d.getMonth() - 1;
		}
		$('to_year').value    = d.getFullYear();
		$('to_month').value   = d.getMonth() + 1;
		ChangeOptionDays('from');
		$('from_day').options[d.getDate() - 1].selected = true;
		ChangeOptionDays('to');
		$('to_day').options[d.getDate() - 1].selected = true;
	}
	function ThisYear() {
		$('from_year').value  = d.getFullYear();
		$('from_month').value = 1;
		ChangeOptionDays('from');
		$('from_day').options[0].selected = true;
		$('to_year').value  = d.getFullYear();
		$('to_month').value = 12;
		ChangeOptionDays('to');
		i = $('to_day').length - 1;
		$('to_day').options[i].selected = true;
	}
	window.onload = Today;
</script>
<div><p><a href='javascript:Today()'>Today</a> - <a href='javascript:LastWeek()'>Last Week</a> - <a href='javascript:ThisMonth()'>This Month</a> - <a href='javascript:LastMonth()'>Last Month</a> - <a href='javascript:ThreeMonth()'>Last 3 Month</a> - <a href='javascript:ThisYear()'>This Year</a></p></div>

From: 
<select name='from_year' id='from_year' onchange="ChangeOptionDays('from')">
<option value='2005'>2005</option>
<option value='2006'>2006</option>
<option value='2007'>2007</option>
</select>
<select name='from_month' id='from_month' onchange="ChangeOptionDays('from')">
<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>
</select>
<select name='from_day' id='from_day'></select>
To:
<select name='to_year' id='to_year' onchange="ChangeOptionDays('to')">
<option value='2005'>2005</option>
<option value='2006'>2006</option>
<option value='2007'>2007</option>
</select>
<select name='to_month' id='to_month' onchange="ChangeOptionDays('to')">
<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>
</select>
<select name='to_day' id='to_day'></select>