在 HTML 上使用 jQuery 选择生日/出生日期格式的菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18901375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery on HTML Select Menu for Birthday/Date of Birth format
提问by Chris
I'm looking to have a standard HTML select menu for selecting your date of birth. Day, Month, Year. Can someone point me in the right direction to use jQuery to format the correct number of days in the month depending on what year / month is selected etc? Are there any plugins out there to achieve this, or how would I write this myself? Any advice would be appreciated.
我希望有一个标准的 HTML 选择菜单来选择您的出生日期。日月年。有人可以指出我正确的方向，根据选择的年份/月份等，使用 jQuery 格式化月份中正确的天数吗？是否有任何插件可以实现这一点，或者我将如何自己编写？任何意见，将不胜感激。
回答by kasper Taeymans
basically you need three select boxes (day, month, year) with onchange events on year and month.
基本上，您需要三个选择框（日、月、年）以及年和月的 onchange 事件。
changes on the year and month select box need to update the number of days because these depend on year and month. to calculate the number of days for a given month/year, this article will be helpful.
年和月选择框上的更改需要更新天数，因为这些取决于年和月。要计算给定月/年的天数，这篇文章会有所帮助。
http://www.electrictoolbox.com/javascript-days-in-month/
http://www.electrictoolbox.com/javascript-days-in-month/
working example JSFIDDLE
工作示例JSFIDDLE
html
html
<select id="days"></select>
<select id="months"></select>
<select id="years"></select>
js
js
$(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();
}
回答by Feussy
The jQuery UI library has an excellent and highly tailorable widget called a date picker. The page for the widget, as well as the code you can use as a reference can all be found here: http://jqueryui.com/datepicker/
jQuery UI 库有一个优秀且高度可定制的小部件，称为日期选择器。小部件的页面以及您可以用作参考的代码都可以在这里找到：http: //jqueryui.com/datepicker/
All you need is to include jQuery and the jQuery UI libraries like so in your header:
您只需要在标题中包含 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>
Then, create a normal textbox:
然后，创建一个普通的文本框：
<input name="Date" id="Date" value="" />
And then initialize the date picker using the following code:
然后使用以下代码初始化日期选择器：
<script type="text/javascript">
$(function() {
$("#Date").datepicker({
changeMonth: true,
changeYear: true
});
};
</script>
The options I put on the datepicker widget allow you to easily jump to a given month/year as will be needed for anyone born several years ago.
我放在日期选择器小部件上的选项允许您轻松跳转到给定的月份/年份，这是几年前出生的任何人都需要的。
