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

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

 

        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);
                }
            }
        }

上面就是填充selYear,selMonth,selDay的源代码.在jQuery的$(document).ready中填充并指定其行为,具体代码如下:

        $(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中的东西搬过来.

年 月 日 时