如下图所示,我们有时需要做这样的一个日期选择表单:
![](https://cdn.10.1pxeye.com/wp-content/uploads/2020/03/date-1024x122.png)
相对的难点是如何正确显示2月份的具体天数。通常是28天,闰年是29天。
HTML结构:
<div class="birthday">
<select name="menu-birthyear" id="birthyearmenu">
<option value="">---</option>
</select>年
<select name="menu-birthmonth" id="birthmonthmenu">
<option value="">---</option>
</select>月
<select name="menu-birthday" id="birthdaymenu">
<option value="">---</option>
</select>日
</div>
jQuery代码:
function contactFormDate() {
if ($('.birthday').length != 0) {
/* 填充年份下拉菜单 */
$cur_year = new Date().getFullYear();
$max_old_year = $cur_year - 100; // 设定最小为一百年前。
$max_available_year = $cur_year - 16; // 设定最大为16年前,若为0即为当前年份。
var $birthyears = '<option value="">--</option>';
for (var i = $max_old_year; i <= $max_available_year; i++) {
$birthyears = $birthyears + '<option value="' + i + '">' + i + '</option>';
}
$('#birthyearmenu').html($birthyears);
/* 填充月份下拉菜单 */
var $birthmonthes = '<option value="">--</option>';
for (var i = 1; i <= 12; i++) {
$birthmonthes = $birthmonthes + '<option value="' + i + '">' + i + '</option>';
}
$('#birthmonthmenu').html($birthmonthes);
/* 填充日下拉菜单设定默认31天 */
var $birthdays = '<option value="">--</option>';
for (var i = 1; i <= 31; i++) {
$birthdays = $birthdays + '<option value="' + i + '">' + i + '</option>';
}
$('#birthdaymenu').html($birthdays);
/* 以下开始判断每个月具体的日数 */
/* 设定每月默认天数 */
var month_maxday = new Array();
month_maxday[1] = 31;
month_maxday[2] = 28;
month_maxday[3] = 31;
month_maxday[4] = 30;
month_maxday[5] = 31;
month_maxday[6] = 30;
month_maxday[7] = 31;
month_maxday[8] = 31;
month_maxday[9] = 30;
month_maxday[10] = 31;
month_maxday[11] = 30;
month_maxday[12] = 31;
/* 判断你是否是闰年 */
function isLeapYear(year) {
var a = false;
if (0 == year % 4 && (year % 100 != 0 || year % 400 == 0)) {
a = true;
}
return a;
}
/* 计算2月份具体日数 */
function getMonthCount(year, month) {
var c = month_maxday[month];
if (month == 2 && isLeapYear(year)) {
c++;
}
var $birthdays = '<option value="">--</option>';
for (var i = 1; i <= c; i++) {
$birthdays = $birthdays + '<option value="' + i + '">' + i + '</option>';
}
$('#birthdaymenu').html($birthdays);
}
/* 当年/月发生改变时重新设定2月份的天数 */
$('#birthyearmenu,#birthmonthmenu').on('change', function() {
$year = $('#birthyearmenu').val();
$month = $('#birthmonthmenu').val();
getMonthCount($year, $month);
});
}
}
触发:
$(function() {
/* 触发函数 */
contactFormDate();
});
示例地址:
https://10.1pxeye.com/docs/smartdate/
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。