javascript实现简单日期下拉选择器

我在工作的时候需要一个让用户选择日期的东西,由于要求不高,而且只需要简单的选择年月日时就行了,也就没有用Canledar从中学到一些js的处理知识,这里就把代码贴出来,欢迎大家拍砖.

$(document).ready(function() {

FillYears();

FillMonths();

FillDays();

FillHours();

selYear.onchange = function() { FillMonths(); FillDays(); FillHours(); };

selMonth.onchange = function() { FillDays(); FillHours(); };

selDay.onchange = function() { FillHours(); };

});
这里面使用到了selYear,selMonth,selDay这三个select.我在下面模拟这个效果一下,但是不再采用在$(document).ready中来填充select而是在button中启用事件的,别告诉我你不知道怎么在button中实现这个效果,其实就是把ready中的东西搬过来.

var selYear;
var selMonth;
var selDay;
var selHour;
function FillYears() {
var date = new Date();
var currYear = date.getFullYear();
for (var i = currYear; i < currYear + 10; i++) {
selYear.options[selYear.options.length] = new Option(i.toString(), i);
}
}
function FillMonths() {
var date = new Date();
var currYear = date.getFullYear();
var currMonth = date.getMonth() + 1;
// 清除原有月份
for (var i = selMonth.options.length; i > 0; i--) {
selMonth.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
// 如果选择今年,那么从本月开始显示月份
if (selectedYear == currYear) {
// 添加新的月份
for (var i = currMonth; i <= 12; i++) {
selMonth.options[selMonth.options.length] = new Option(i, i);
}
}
else {
for (var i = 1; i <= 12; i++) {
selMonth.options[selMonth.options.length] = new Option(i, i);
}
}
}
function FillDays() {
var date = new Date();
var currYear = date.getFullYear();
var currMonth = date.getMonth() + 1;
var currDay = date.getDate();
// 清除所有的天
for (var i = selDay.options.length; i > 0; i--) {
selDay.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
var selectedMonth = parseInt(selMonth.options[selMonth.selectedIndex].value);
if (selectedYear == currYear && selectedMonth == currMonth) {
var tempDate = new Date(currYear, currMonth, 0);
for (var i = currDay; i <= tempDate.getDate(); i++) {
selDay.options[selDay.options.length] = new Option(i, i);
}
}
else {
var tempDate = new Date(selectedYear, selectedMonth, 0);
var days = tempDate.getDate();
for (var i = 1; i <= days; i++) {
selDay.options[selDay.options.length] = new Option(i, i);
}
}
}
function FillHours() {
var date = new Date();
var currYear = date.getFullYear(); // 这个获取的就是今年
var currMonth = date.getMonth() + 1;
var currDay = date.getDate(); // 这个获取的就是今天的日期
var currHour = date.getHours();
for (var i = selHour.options.length; i > 0; i--) {
selHour.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
var selectedMonth = parseInt(selMonth.options[selMonth.selectedIndex].value);
var selectedDay = parseInt(selDay.options[selDay.selectedIndex].value);
if ((selectedYear == currYear) &&
(selectedMonth == currMonth)
&& (selectedDay == currDay)) {
for (var i = currHour; i <= 24; i++) {
selHour.options[selHour.options.length] = new Option(i, i);
}
} else {
for (var i = 1; i <= 24; i++) {
selHour.options[selHour.options.length] = new Option(i, i);
}
}
}
function bindEvent()
{
selYear = document.getElementById("selYear");
selMonth = document.getElementById("selMonth");
selDay = document.getElementById("selDay");
selHour = document.getElementById("selHour");
FillYears();
FillMonths();
FillDays();
FillHours();
selYear.onchange = function() { FillMonths();FillDays(); FillHours(); };
selMonth.onchange = function() { FillDays(); FillHours(); };
selDay.onchange = function() { FillHours(); };
}
function unbindEvent()
{
for(var i = selHour.options.length;i > 0;i--)
{
selHour.options.remove(i-1);
}
for(var i = selDay.options.length;i > 0;i--)
{
selDay.options.remove(i-1);
}
for(var i = selMonth.options.length;i > 0;i--)
{
selMonth.options.remove(i-1);
}
for(var i = selYear.options.length;i > 0;i--)
{
selYear.options.remove(i-1);
}
selYear.onchange = function(){};
selMonth.onchange = function(){};
selDay.onchange = function(){};
selHour.onchange = function(){};
}
年 月 日 时