在 HTML 选择菜单上使用 jQuery 选择生日/出生日期格式答案

【问题标题】：Use jQuery on HTML Select Menu for Birthday/Date of Birth format在 HTML 选择菜单上使用 jQuery 选择生日/出生日期格式
【发布时间】：2013-09-24 22:23:40
【问题描述】：

我希望有一个标准的 HTML 选择菜单来选择您的出生日期。日月年。有人可以指出我正确的方向来使用 jQuery 根据选择的年份/月份等设置正确的月份天数吗？是否有任何插件可以实现这一点，或者我将如何自己编写？任何建议将不胜感激。

【问题讨论】：

标签： jquery date select-menu

【解决方案1】：

基本上，您需要三个选择框（日、月、年），其中包含年月的 onchange 事件。

更改年月选择框需要更新天数，因为这些取决于年月。要计算给定月份/年份的天数，这篇文章会很有帮助。

http://www.electrictoolbox.com/javascript-days-in-month/

工作示例JSFIDDLE

html

<select id="days"></select>
<select id="months"></select>
<select id="years"></select>

$(function() {

    //populate our years select box
    for (i = new Date().getFullYear(); i > 1900; i--){
        $('#years').append($('<option />').val(i).html(i));
    }
    //populate our months select box
    for (i = 1; i < 13; i++){
        $('#months').append($('<option />').val(i).html(i));
    }
    //populate our Days select box
    updateNumberOfDays(); 

    //"listen" for change events
    $('#years, #months').change(function(){
        updateNumberOfDays(); 
    });

});

//function to update the days based on the current values of month and year
function updateNumberOfDays(){
    $('#days').html('');
    month = $('#months').val();
    year = $('#years').val();
    days = daysInMonth(month, year);

    for(i=1; i < days+1 ; i++){
            $('#days').append($('<option />').val(i).html(i));
    }
}

//helper function
function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}

【讨论】：

非常感谢，kasper，这太棒了。我唯一注意到的是，当您更改月份时，日期会追加而不是替换？
更新了我的答案以摆脱附加。我刚刚放置了 $('#days').html('');在 updateNumberOfDays 函数的开头。这将删除日期选择框中先前设置的选项。
一个简单的问题，kasper，如果你不介意的话。我有一个 PHP 变量用于用户当前生日的月、日和年。在我之前的 PHP 代码中，我有类似 if ($bd_day == $day) $selected = ' selected="selected"'; 的东西来预选加载日期。我会在哪里将它添加到您的代码中？？

【解决方案2】：

jQuery UI 库有一个出色且高度可定制的小部件，称为日期选择器。小部件的页面以及您可以用作参考的代码都可以在这里找到： http://jqueryui.com/datepicker/

您只需要在标题中包含 jQuery 和 jQuery UI 库即可：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

然后，创建一个普通的文本框：

<input name="Date" id="Date" value="" />

然后使用以下代码初始化日期选择器：

<script type="text/javascript">

    $(function() {
        $("#Date").datepicker({
            changeMonth: true,
            changeYear: true
            });
    };

</script>

我在日期选择器小部件上添加的选项可让您轻松跳转到给定的月份/年份，这对于几年前出生的人来说是必需的。

【讨论】：