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

  1. Home
  2. blog
  3. 簡単に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のダウンロード

参考になれば幸いです

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
posted with ヨメレバ
矢次 悟郎 SBクリエイティブ 2016-02-10
Amazon
楽天ブックス

∞Tadashi Suyama∞

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

サイト内検索

最近の投稿

アイキャッチ
Perlで500エラー！原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ
WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ
LibSass（node-sass）からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass（いまここ） Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...

10 Jan 2022

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

ブログアーカイブ

ブログカテゴリー

著者

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

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

タグクラウド

js year month day html pulldown 日付 プルダウン
フッターイメージ