【JavaScript】【jquery】セレクトボックスでのうるう年計算

簡単な入力フォームを作ってJavaScriptの勉強をしているのですが、
生年月日を入力する際にいい感じでうるう年も考慮してくれるものがなかったので
いろいろなサイトやらを参考にしながら作りました。

フォームはこんな感じです。
f:id:yu-ya4:20150702162652p:plain
date_select.html

<html>
<head>
<title>日付選択</title>
<meta charset="utf-8">
</head>
<body>
<form class="form">
    <select id="year">
        <option value="">--西暦--</option>
    </select>
    <select id="month">
        <option value="">-月-</option>
    </select>
    <select id="day">
        <option value="">-日-</option>
    </select>
</form>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/date_select.js"></script>
</body>
</html>

でjavascriptはこんな感じです。
date_select.js

(function(){
  //日付範囲決定
  function calcDays(){
    $('#day').empty();
    var y = $('#year').val();
    var m = $('#month'). val();

    if (m == "" || y == "") { //年か月が選択されていない時は31日まで表示
      var last = 31;
    } else if (m == 2 && ((y % 400 == 0) || ((y % 4 == 0) && (y % 100 != 0)))) {
      var last = 29; //うるう年判定
    } else {
      var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m-1];
    }

    $('#day').append('<option value="">日</option>');
    for (var i = 1; i <= last; i++) {
      if (d == i) { //日がすでに選択されている場合はその値が選択された状態で表示
        $('#day').append('<option value="' + i + '" selected>' + i + '</option>');
      } else {
        $('#day').append('<option value="' + i + '">' + i + '</option>');
      }
    }
  }

  var d = 0;
  $(function(){
    //1900年～2015年まで表示
    for (var i = 2015; i >= 1900; i--) {
      $('#year').append('<option value="' + i + '">' + i + '</option>');
    }
    //1月～12月まで表示
    for (var i = 1; i <= 12; i++) {
      $('#month').append('<option value="' + i + '">' + i + '</option>');
    }
    //1日～31日まで表示
    for (var i = 1; i <= 31; i++) {
      $('#day').append('<option value="' + i + '">' + i + '</option>');
    }

    $('#day').change(function(){
      d = $(this).val();
    });
    //年か月が変わるごとに日数を計算
    $('#year').change(calcDays);
    $('#month').change(calcDays);
  });
})();

まあ、単純にうるう年の計算方法をそのまま実装しただけですね。

西暦年が4で割り切れる
ただし、西暦年が100では割り切れてはいけない
ただし、西暦年が400で割り切れるのはok

西暦年か月が選びなおされる都度日付を計算するようにしています。
また、日付がすでに選択されていた場合はその値を保持しておき、
年や月を選び直して再度日付計算が行われても日付を選びなおさないでいいように実装しています。

こんな簡単なことなのにとても時間がかかってしまいました・・・。
jquery使ったのも初めてですので多めに見てやってください。

次回はvalidateについて書こうかな...

yuya4's note

備忘録です。好きにアウトプットします。

【JavaScript】【jquery】セレクトボックスでのうるう年計算