日付プルダウン 月毎の日の制御
選択した月毎の日のプルダウンを表示するように制御
jQuery
$(function() {
// 現在日時
var current = new Date();
// 年
var year_val = current.getFullYear();
// 月 0（1月）～11（12月）
var month_val = current.getMonth() + 1;
// 日
var day_val = current.getDate();
// デフォルト
$('select[name=year] option[value=' + year_val + ']').prop('selected', true);
$('select[name=month] option[value=' + month_val + ']').prop('selected', true);
$('select[name=day] option[value=' + day_val + ']').prop('selected', true);
setDay();
// 年/月 選択
$('select[name=year], select[name=month]').change(function() {
setDay();
});
/**
* 日プルダウンの制御
*/
function setDay()
{
year_val = $('select[name=year]').val();
month_val = $('select[name=month]').val();
// 指定月の末日
var t = 31;
// 2月
if (month_val == 2) {
// 4で割りきれる且つ100で割りきれない年、または400で割り切れる年は閏年
if (Math.floor(year_val%4) == 0 && Math.floor(year_val%100) != 0 || Math.floor(year_val%400) == 0) {
t = 29;
} else {
t = 28;
}
// 4,6,9,11月
} else if (month_val == 4 || month_val == 6 || month_val == 9 || month_val == 11) {
t = 30;
}
// 初期化
$('select[name=day] option').remove();
for (var i = 1; i <= t; i++){
$('select[name=day]').append('<option value="' + i + '">' + i + '</option>');
}
}
});
optionに対してのshow()とhide()がIE及びSafariで動作しないので、append()とremove()で対応。
HTML
<select name="year">
<option value="2000">2000</option>
(略)
<option value="2050">2050</option>
</select>年
<select name="month">
<option value="1">1</option>
(略)
<option value="12">12</option>
</select>月
<select name="day">
<option value="1">1</option>
(略)
<option value="31">31</option>
</select>日
サンプル
