日付プルダウン 期間指定の制御
指定した期間のみ選択可能としたプルダウンを生成
jQuery
$(function () {
// 現在日時
var current = new Date();
var year_val = current.getFullYear();
var month_val = current.getMonth() + 1;
var day_val = current.getDate();
// 期限（始）
start_year = year_val;
start_month = '9';
start_day = '16';
// 期限（終）
end_year = year_val + 1;
end_month = '9';
end_day = '15';
// デフォルト
$('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);
setMonth();
setDay();
$('select[name=year]').change(function () {
setMonth();
});
$('select[name=month]').change(function () {
setDay();
});
/**
* 月プルダウンの制御
*/
function setMonth()
{
year_val = $('select[name=year]').val();
// 初期化
$('select[name=month] option').remove();
// 初期値
var min_month = 1;
var max_month = 12;
// 月範囲
if (start_year == end_year) {
min_month = start_month;
max_month = parseInt(end_month);
} else if (year_val == start_year) {
min_month = start_month;
max_month = 12;
} else if (year_val == end_year) {
min_month = 1;
max_month = parseInt(end_month);
}
for (var i = min_month; i <= max_month; i++){
$('select[name=month]').append('<option value="' + i + '">' + i + '</option>');
}
}
/**
* 日プルダウンの制御
*/
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();
// 初期値
var min_day = 1;
var max_day = t;
if (start_year == end_year && start_month == end_month) {
min_day = start_day;
max_day = end_day;
} else if (year_val == start_year && month_val == start_month) {
min_day = start_day;
max_day = t;
} else if (year_val == end_year && month_val == end_month) {
min_day = 1;
max_day = end_day;
}
for (var i = min_day; i <= max_day; i++){
$('select[name=day]').append('<option value="' + i + '">' + i + '</option>');
}
}
});
optionに対してのshow()とhide()がIE及びSafariで動作しないので、append()とremove()で対応。
HTML
<select name="year">
<option value="2013">2013</option>
<option value="2014">2014</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>日
サンプル
