日付プルダウン 期間指定の制御

指定した期間のみ選択可能としたプルダウンを生成

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>日

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について