jQueryで年月日セレクタを用意する

「PHPで年月日を入力（プルダウン方式）」では、うるう年や月の大小（30日、31日など）によって日のセレクタで選択できる値が変化するPHPプログラムを紹介したが、これは、セレクタを選ぶたびにHTTP通信が発生してしまう。そこで今回は、いちいち通信せず、クライアント側で値を変化させるスクリプトを紹介する。
なお、jQuery UI：Datepickerを用いてカレンダーから年月日入力するプログラムは、「PHPで日付入力：カレンダーから選択」で紹介している。

プログラムを実行する

1. サンプル・プログラムの実行例
2. サンプル・プログラム
3. プログラムの目標
4. プログラムの流れ
5. 解説：初期設定
6. 解説：うるう年の判定
7. 解説：指定した月の日数
8. 解説：年月日セレクタをつくる
9. 解説：HTMLボディ
10. 参考サイト

ダウンロード

圧縮ファイルの内容

jsdate.html

サンプル・プログラム本体。

左図のような年月日セレクタを実装する。

存在しない日付が入力されないように、月の大小によって日のセレクタで選択できる値が最大28，30，31に変化するようにする。また、うるう年の場合は、2月29日が選択できるようにする。

目標を達成するには、年・月・日いずれかのセレクタが変更されたら、年・月・日のセレクタの内容を更新する。つまり、下図のようなスクリプトを組めばよい。

jQueryを利用することで、比較的短いコードでこの流れを実装できる。

  22: /**
  23:  * 初期設定
  24: */
  25: $(function() {
  26:     //初期値は今日の日付
  27:     var date = new Date();
  28:     setSelector(date.getFullYear(), date.getMonth() + 1, date.getDate());
  29:     //年セレクタ変更時の動作
  30:     $('#year').change(function() {
  31:         var y = $('#year  option:selected').val();
  32:         var m = $('#month option:selected').val();
  33:         var d = $('#date  option:selected').val();
  34:         setSelector(y, m, d);
  35:     });
  36:     //月セレクタ変更時の動作
  37:     $('#month').change(function() {
  38:         var y = $('#year  option:selected').val();
  39:         var m = $('#month option:selected').val();
  40:         var d = $('#date  option:selected').val();
  41:         setSelector(y, m, d);
  42:     });
  43: 
  44:     var refere = 'http://www.pahoo.org/e-soul/webtech/js01/js01-06-01.shtm';
  45:     $('#title').html('年月日セレクタ  <span style="font-size:small;">' + yyyymmdd() + '版</span>');
  46:     $('#refere').html('参考サイト：<a href="' + refere +'">' + refere + '</a>');
  47: });

セレクタのID名は、年が year、月が month、日が date とする。
また、年・月・日のセレクタをつくるユーザー関数を setSelector(year, month, date) とする

初期設定は、getMonthメソッドで今日の年月日を取り出し、それを setSelector に渡すだけである。

  58: /**
  59:  * 閏年かどうか判定する
  60:  * @param   int year 西暦年
  61:  * @return  bool true:閏年である／false:平年である
  62: */
  63: function isleap(year) {
  64:     var res = false;
  65:     if (year % 4 == 0)      res = true;
  66:     if (year % 100 == 0)    res = false;
  67:     if (year % 400 == 0)    res = true;
  68:     return res;
  69: }

うるう年かどうかを判定する関数 isleap(year) は、「PHPで閏年かどうか判定する」で紹介したPHPプログラムをJavaScriptに移植したものである。

  71: /**
  72:  * 指定した月の日数を返す
  73:  * @param   int year  西暦年
  74:  * @param   int month 月
  75:  * @return  int 日数／FALSE:引数の異常
  76: */
  77: function getDaysInMonth(year, month) {
  78:     var days = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  79: 
  80:     if (month < 1 || month > 12) return FALSE;
  81:     days[2] = isleap(year) ? 29 : 28;       //閏年の判定
  82: 
  83:     return days[month];
  84: }

指定した月の日数（28～31）を返す関数 getDaysInMonth(year, month) は、「PHPで祝日を求める」で紹介したPHPプログラムをJavaScriptに移植したものである。

  86: /**
  87:  * 年月日セレクタをつくる
  88:  * @param   int year  西暦年
  89:  * @param   int month 月
  90:  * @param   int date  日
  91:  * @return  int 日数／FALSE:引数の異常
  92: */
  93: function setSelector(year, month, date) {
  94:     //年セレクタ
  95:     var html = '';
  96:     for (i = -2; i <= +2; i++) {
  97:         if (i == 0)     selected = ' selected';
  98:         else            selected = '';
  99:         yy = parseInt(year) + parseInt(i);
 100:         html += '<option value="'+ yy + '"' + selected + '>'+ yy + '</option>';
 101:     }
 102:     $('#year').html(html);
 103: 
 104:     //月セレクタ
 105:     var html = '';
 106:     for (mm = 1; mm <= 12; mm++) {
 107:         if (mm == month)    selected = ' selected';
 108:         else                selected = '';
 109:         html += '<option value="'+ mm + '"' + selected + '>'+ mm + '</option>';
 110:     }
 111:     $('#month').html(html);
 112: 
 113:     //日セレクタ
 114:     var html = '';
 115:     dm = getDaysInMonth(year, month);
 116:     for (dd = 1; dd <= dm; dd++) {
 117:         if (dd == date) selected = ' selected';
 118:         else                selected = '';
 119:         html += '<option value="'+ dd + '"' + selected + '>'+ dd + '</option>';
 120:     }
 121:     $('#date').html(html);
 122: }

年月日セレクタを動的に生成するのが関数 setSelector(year, month, date) である。年、月、日と順番にセレクタを生成してゆく。

まず年セレクタであるが、与えられた year±2の範囲でセレクタを生成する。値がyearと等しかったら、selected属性を付与する。

月セレクタは、常に1から12までのセレクタを生成する。値がmonthと等しかったら、selected属性を付与する。

日セレクタは、先ほど紹介した関数 getDaysInMonth の戻り値によってセレクタを生成する。値がdateと等しかったら、selected属性を付与する。

 128: <form name="myform">
 129: <select name="year"  id="year"></select>年
 130: <select name="month" id="month"></select>月
 131: <select name="date"  id="date"></select>日
 132: </form>

静的HTMLは上述の通り。

【質問】

takuo さん
大変参考になっております。有難うございます。
生年月日、結婚記念日と死亡年月日を入力するための日付セレクトボックスを作りたいのですが、うまくいきません。
よろしくお願いします。（MacのGoogle Chrome）

【回答】

実行例の画像を掲示しました。
この通りの画面にならないようでしたら、作成したJavaScriptをお知らせください。お力になれるかもしれません。

• PHPで年月日を入力（プルダウン方式）：ぱふぅ家のホームページ
• PHPで閏年かどうか判定する：ぱふぅ家のホームページ
• PHPで祝日を求める：ぱふぅ家のホームページ
• PHPで日付入力：カレンダーから選択：ぱふぅ家のホームページ