簡単にHTMLの年月日のプルダウンを作る方法

簡単にHTMLの年月日のプルダウンを作る方法

2016-03-08 最終更新日:2016-04-11

よくフォームなどで年月日のプルダウンを作成するときが多いのでちょっと簡単にプルダンを作成する方法ご紹介します。

1950年から2016年までのプルダウンを書くのはとても大変なのでプログラムを書いて自動化してしまいましょう。

一度書いてしまえばあとは使いまわしていけるのでとても楽です。1〜12月と1〜31日も合わせて作っていきます。ついでに都道府県のプルダウンも作ってみましょう。


スポンサーリンク


JSでのサンプル

まずは年月日のプルダウンプログラム

date.js

(function() {
  'use strict';

  /*
    今日の日付データを変数todayに格納
   */
  var optionLoop, this_day, this_month, this_year, today;
  today = new Date();
  this_year = today.getFullYear();
  this_month = today.getMonth() + 1;
  this_day = today.getDate();

  /*
    ループ処理(スタート数字、終了数字、表示id名、デフォルト数字)
   */
  optionLoop = function(start, end, id, this_day) {
    var i, opt;

    opt = null;
    for (i = start; i <= end ; i++) {
      if (i === this_day) {
        opt += "<option value='" + i + "' selected>" + i + "</option>";
      } else {
        opt += "<option value='" + i + "'>" + i + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };


  /*
    関数設定(スタート数字[必須]、終了数字[必須]、表示id名[必須]、デフォルト数字[省略可能])
   */
  optionLoop(1950, this_year, 'id_year', this_year);
  optionLoop(1, 12, 'id_month', this_month);
  optionLoop(1, 31, 'id_day', this_day);
})();

このプログラムは即時関数の中に入れていきます。

(function() {
	'use strict';
	// プログラムを書きます
})();

上記の即時関数の中に書いて行きます。

var optionLoop, this_day, this_month, this_year, today;
today = new Date();
this_year = today.getFullYear();
this_month = today.getMonth() + 1;
this_day = today.getDate();

この上の文は変数を初期化してからtoday変数に今日の日付を入れます。 今回はデフォルト値が本日の日なのでこれは必ずしも必須ではないです。

optionLoop = function(start, end, id, this_day) {
	var i, opt;

	opt = null;

	for (i = start; i <= end ; i++) {
		if (i === this_day) {
			opt += "<option value='" + i + "' selected>" + i + "</option>";
		} else {
			opt += "<option value='" + i + "'>" + i + "</option>";
		}
	}
	return document.getElementById(id).innerHTML = opt;
};

上記が関数です。基本的には数字を入れて回すというものです。 function(start, end, id, this_day) startがスタートの数字、endが最後の数字、idはhtml側で出力する際に必要なid名、this_dayがデフォルト値です、今回は本日の日付にしてあります。

optionLoop(1950, this_year, 'id_year', this_year);

この関数を使って出力します。1950年から今年までをid_yearというid名に出力しています。

optionLoop(2000, 2015, 'id_year', 2005);

上記のように書けば2000から2015年までをid_yearに出力する、デフォルト値は2005年ということになります。簡単ですね。あとはhtml側でselect要素にid名をつけておいておけばjavascriptが処理をしてくれます。

index.html

<select name="year" id="id_year">
<!-- option要素がjavascriptのプログラムにより挿入される、id_year -->
</select>
<select name="month" id="id_month">
<!-- option要素がjavascriptのプログラムにより挿入される、id_month -->
</select>
<select name="day" id="id_day">
<!-- option要素がjavascriptのプログラムにより挿入される、id_day -->
</select>

下記は全文です、コピペで確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>年月日表示の練習</title>
</head>
<body>
<select name="year" id="id_year">
</select>
<select name="month" id="id_month">
</select>
<select name="day" id="id_day">
</select>
<script>
(function() {
  'use strict';

  /*
    今日の日付データを変数todayに格納
   */
  var optionLoop, this_day, this_month, this_year, today;
  today = new Date();
  this_year = today.getFullYear();
  this_month = today.getMonth() + 1;
  this_day = today.getDate();

  /*
    ループ処理(スタート数字、終了数字、表示id名、デフォルト数字)
   */
  optionLoop = function(start, end, id, this_day) {
    var i, opt;

    opt = null;
    for (i = start; i <= end ; i++) {
      if (i === this_day) {
        opt += "<option value='" + i + "' selected>" + i + "</option>";
      } else {
        opt += "<option value='" + i + "'>" + i + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };


  /*
    関数設定(スタート数字[必須]、終了数字[必須]、表示id名[省略可能]、デフォルト数字[省略可能])
   */
  optionLoop(1950, this_year, 'id_year', this_year);
  optionLoop(1, 12, 'id_month', this_month);
  optionLoop(1, 31, 'id_day', this_day);
})();

</script>
</body>
</html>

⇒デモを見てみる

次は都道府県のプルダウンプログラム

都道府県の場合は配列を作って回していけば出来ますね。一応わかりやすいようにオブジェクトにしてキーを入れて回します。

pref.js

// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';

  /*
     都道府県のオブジェクト(キー:値)を変数prefに格納
   */
  var pref, prefLoop;
  pref = {
    "1": "北海道",
    "2": "青森県",
    "3": "岩手県",
    "4": "宮城県",
    "5": "秋田県",
    "6": "山形県",
    "7": "福島県",
    "8": "茨城県",
    "9": "栃木県",
    "10": "群馬県",
    "11": "埼玉県",
    "12": "千葉県",
    "13": "東京都",
    "14": "神奈川県",
    "15": "新潟県",
    "16": "富山県",
    "17": "石川県",
    "18": "福井県",
    "19": "山梨県",
    "20": "長野県",
    "21": "岐阜県",
    "22": "静岡県",
    "23": "愛知県",
    "24": "三重県",
    "25": "滋賀県",
    "26": "京都府",
    "27": "大阪府",
    "28": "兵庫県",
    "29": "奈良県",
    "30": "和歌山県",
    "31": "鳥取県",
    "32": "島根県",
    "33": "岡山県",
    "34": "広島県",
    "35": "山口県",
    "36": "徳島県",
    "37": "香川県",
    "38": "愛媛県",
    "39": "高知県",
    "40": "福岡県",
    "41": "佐賀県",
    "42": "長崎県",
    "43": "熊本県",
    "44": "大分県",
    "45": "宮崎県",
    "46": "鹿児島県",
    "47": "沖縄県"
  };

  /*
    ループ処理(配列、表示id名、デフォルト都道府県キー)
   */
  prefLoop = function(pref, id, def_id) {
    var key, opt, value;
    opt = null;
    for (key in pref) {
      value = pref[key];
      if (key === def_id) {
        opt += "<option value='" + value + "' selected>" + value + "</option>";
      } else {
        opt += "<option value='" + value + "'>" + value + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };

  /*
    関数設定(都道府県配列[必須]、表示id名[必須]、デフォルト都道府県キー[必須])
   */
  prefLoop(pref, 'id_pref', '31');
})();

年月日と違うところはあらかじめ配列を作って回すところですね。 pref変数の中に都道府県をいれてfor..in..で回して表示させます。

下記は全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>都道府県表示の練習</title>
</head>
<body>
<select name="pref" id="id_pref">
</select>
<script>
// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';

  /*
     都道府県のオブジェクト(キー:値)を変数prefに格納
   */
  var pref, prefLoop;
  pref = {
    "1": "北海道",
    "2": "青森県",
    "3": "岩手県",
    "4": "宮城県",
    "5": "秋田県",
    "6": "山形県",
    "7": "福島県",
    "8": "茨城県",
    "9": "栃木県",
    "10": "群馬県",
    "11": "埼玉県",
    "12": "千葉県",
    "13": "東京都",
    "14": "神奈川県",
    "15": "新潟県",
    "16": "富山県",
    "17": "石川県",
    "18": "福井県",
    "19": "山梨県",
    "20": "長野県",
    "21": "岐阜県",
    "22": "静岡県",
    "23": "愛知県",
    "24": "三重県",
    "25": "滋賀県",
    "26": "京都府",
    "27": "大阪府",
    "28": "兵庫県",
    "29": "奈良県",
    "30": "和歌山県",
    "31": "鳥取県",
    "32": "島根県",
    "33": "岡山県",
    "34": "広島県",
    "35": "山口県",
    "36": "徳島県",
    "37": "香川県",
    "38": "愛媛県",
    "39": "高知県",
    "40": "福岡県",
    "41": "佐賀県",
    "42": "長崎県",
    "43": "熊本県",
    "44": "大分県",
    "45": "宮崎県",
    "46": "鹿児島県",
    "47": "沖縄県"
  };

  /*
    ループ処理(配列、表示id名、デフォルト都道府県キー)
   */
  prefLoop = function(pref, id, def_id) {
    var key, opt, value;
    opt = null;
    for (key in pref) {
      value = pref[key];
      if (key === def_id) {
        opt += "<option value='" + value + "' selected>" + value + "</option>";
      } else {
        opt += "<option value='" + value + "'>" + value + "</option>";
      }
    }
    return document.getElementById(id).innerHTML = opt;
  };

  /*
    関数設定(都道府県配列[必須]、表示id名[必須]、デフォルト都道府県キー[必須])
   */
  prefLoop(pref, 'id_pref', '31');
})();

</script>
</body>
</html>

⇒デモを見てみる

下記ダウンロードして確認も出来ます。

ダウンロード

追記

jQueryのプラグイン化しました、こっちの方が使いやすいです。 select文の中にdata属性で指定することでオプション代わりになります。

data-choice="year" // year, month, dayのいずれかを使用

例としてyearにします。html側としては下記のようにします。

<select name="year" id="id_year" data-choice="year">
</select>

</body>の上に下記のようにスクリプトを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_year").ymdpulldown({
                startyear:2000,
              });
});
</script>

このオプションはdata-startyear=”2000”のようにhtml側に記述しても同じ事になります。これで2000〜2016までのオプション要素が指定IDに表示されます。

<select name="month" id="id_month" data-choice="month">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_month").ymdpulldown();
});
</script>

data-choiceがmonthやdayの場合はオプションを書かなくても表示されます。

さらに年月日以外でも使えるようにしてあります。 オプションでstart:’100’,end:’200’,select:’150’の用にするかdata属性でdata-start=”100” data-end=”200” data-select=”150”のように指定するとその値が表示されます。 startは最初の数字、endは最後の数字、selectはデフォルトで表示している数字になります。

<select name="other" id="id_other" data-start="100" data-end="200" data-select="150">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.ymdpulldown.js"></script>
<script>
$(function() {
  $("#id_other").ymdpulldown();
});
</script>

上記のように指定すれば100〜200までが表示され150が選択されている状態になります。スクリプト側にも指定できます。

<script>
$(function() {
  $("#id_other").ymdpulldown({
    start:'100',
    end:'200',
    select:'150'
  });
});
</script>

下記からダウンロードしてお使いください。

jquery.ymdpulldown.jsのダウンロード


∞Tadashi Suyama∞

js year month day html pulldown 日付 プルダウン
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ