JavaScriptで年齢と日付のセレクトボックスを作ろう！【JavaScript初心者入門】

はじめに

こんにちは、かずん(@kazoonLab)です。

またJavaScriptまわりの記事を投稿していく予定ですので、よかったら見ていってください。

今回から、JavaScriptで色々なセレクトボックスを作っていこうと思います。ますは、年齢を選べるもの・日付を選べるものを見ていきましょう。

この記事を読むと、JavaScriptで日付や時刻を使ったセレクトボックスの作り方がわかるよ！

こんな人に読んで欲しい

・Webコーダーの方

・フォームを自作したい方

・セレクトボックスのソースコードを短く書きたい方

・年齢や年月日を扱うセレクトボックスを作りたい方

年齢のセレクトボックス

Webページにフォームを掲載するとき、年齢を入力させる箇所があるとします。

20歳か100歳までの年齢を選択できるセレクトボックスのHTMLは以下のようになるかと思います。

<select name="age">
  <option value="20">20才</option>
  <option value="21">21才</option>
  <option value="22">22才</option>
  <option value="23">23才</option>
  <option value="24">24才</option>

  <!-- 省略 -->

  <option value="100"></option>
</select>

<option> を使ってつらつらと書くこともできますが、JavaScriptで動的にセレクトボックスを作ると、コードがよりシンプルになります。

【HTML】

<select id="age" name="age"></select>

【JavaScript】

(function() {
  var selectBox = document.getElementByID('age');
  for (var i = 20; i <= 100; i++) {
    var option = '<option value="' + i + '">' + i + '歳</option>';
    selectBox.insertAdjacentHTML('beforeend', option);
  }
})()

最初に空のセレクトボックス要素を取得します。その後、「option要素を作り、セレクトボックス要素の終了タグの前に挿入する」のを100になるまで繰り返します。

ちなみに、insertAdjacent()の第一引数には、挿入位置を指定することができます。今回は、<select> の中で、かつ後ろに挿入(=終了タグの直前に挿入)したいため、beforeend を指定しています。

【HTML】

<!-- beforebegin -->
<p class="target">
  <!-- afterbegin -->
  要素の中身
  <!-- beforeend -->
</p>
<!-- afterend -->

このように書くことで、HTMLをすっきりさせることができますね。

日付のセレクトボックス

セレクトボックスで日付を入力させたいとき、初期値が今日の日付だと入力しやすいかと思います。

初期値が今日のセレクトボックスは、以下のように実装できます。

【HTML】

<select id="year" name="year"></select>
<select id="month" name="month"></select>
<select id="date" name="date"></select>

【JavaScript】

(function() {
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth() + 1;
  var date = today.getDate();

  function createOption(id, startNum, endNum, current) {
    var selectDom = document.getElementById(id);
    var optionDom = '';
    for (var i = startNum; i <= endNum; i++) {
      var option = '';
      if (i === current) {
        option = '<option value="' + i + '">' + i + '</option>';
      } else {
        option = '<option value="' + i + '" selected>' + i + '</option>';
      }
      optionDom += option;
    }
    selectDom.insertAdjacentHTML('beforeend', optionDom);
  }

  createOption('year', 1900, year, year);
  createOption('month', 1, 12, month);
  createOption('date', 1, 31, date);
})()

まず、new Date() を使って現在時刻を取得します。そこから、年・月・日を任意の関数で取得します。

ちなみに、getMonth() に1を足しているのは、getMonth() の戻り値が、1月の場合は0、2月の場合は1というように、現在月-1の数値であるためです。

関数createOption() は、挿入元DOMのid、optionの先頭と最後のvalue、現在時刻(年・月・日のいずれか)を引数に取り、指定した個数だけ<option> を生成します。生成した<option> が現在時刻と合致する場合selected を付与し、それを初期値にします。

生成された<option> は、optionDomに追加されていきます。最後の<option> まで追加されたら、先ほどと同様に、セレクトボックスの中にinsertします。

3回のcreateOption() の呼び出しで、年・月・日それぞれにオプションを追加しています。このコードを実行すると、 - 1900年～現在時刻の年まで選択できる「年」(記事作成時は2019年) - 1月～12月まで選択できる「月」 - 1日～31日まで選択できる「日」 を作成することができます。

これで、日付を選べる、初期値が今日の日付のセレクトボックスを作ることができました。しかし、このコードには問題があります。

それは、「2月30日」とか、「11月31日」などの存在しないであろう日付を選べてしまうことです。もっと言えば、2月はうるう年の影響を受けるため、そちらも考慮しなくてはなりません。

↓うるう年も考慮した日付セレクトボックスの記事はこちら！ blog.mimipen.net

まとめ

今回の記事では、JavaScriptを使ったセレクトボックスの作り方をご紹介しました。

サンプルコードの値を編集すれば値も変化するので、ぜひ使っていただけたらと思います。

最後までご覧いただきありがとうございます。

↓うるう年も考慮した日付セレクトボックスの記事はこちら！ blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします♪

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)