下拉日期菜单

时间:2013-03-14 20:02:45

标签: ajax date drop-down-menu

对于JavaScript和Ajax,我很无能为力。你们都可以指点一个简单的教程网站吗?

我想要完成的算法非常简单。我有三个下拉菜单来输入日期。用户选择一年,然后一个月,然后,基于前两个选择,选择日期。因此,如果用户选择2012年2月,则日期列表将显示29天。如果他想看看2013年2月,日期列表将显示28天。或者再过一个月,显示30或31天。我需要什么样的功能才能实现这个目标?

2 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form name="myform">
        <fieldset><legend>Selection Date</legend><label for="year">Year: </label>
            <select name="year" id="year" size="1">
                <option value=" " selected="selected"></option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
            </select>
            <label for="month">Month: </label>
            <select name="month" id="month" size="1">
                <option value=" " selected="selected"></option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
            <label for="day">Day: </label>
            <select name="day" id="day" size="1">
                <option value=" " selected="selected"></option>
                <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>
                <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>
        </fieldset>
    </form>
    <script type="text/javascript">
        function daysInMonth(month, year) {
            var days = new Date(year, month, 0);
            return days.getDate();
        }
        function setDayDrop(dyear, dmonth, dday) {
            var year = dyear.options[dyear.selectedIndex].value;
            var month = dmonth.options[dmonth.selectedIndex].value;
            var day = dday.options[dday.selectedIndex].value;
            if (day == ' ') {
                var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month, year);
                dday.options.length = 0;
                dday.options[dday.options.length] = new Option(' ', ' ');
                for (var i = 1; i <= days; i++)
                    dday.options[dday.options.length] = new Option(i, i);
            }
        }
        function setDay() {
            var year = document.getElementById('year');
            var month = document.getElementById('month');
            var day = document.getElementById('day');
            setDayDrop(year, month, day);
        }
        document.getElementById('year').onchange = setDay;
        document.getElementById('month').onchange = setDay;
    </script>
</body>

答案 1 :(得分:0)

感谢您的快速反应。我在www上发现了这个,它将日历放入表单中:

Any Time