• RSS

[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQuery の Datepicker を利用して、カレンダーから日付を選んで自動入力できるようにする方法です。

jQuery Datepicker

Datepicker についてはこちら。


Datepicker の利用方法

必要なファイルは jquery ファイルと jquery-ui.js ファイル、そしてカレンダーのデザイン用に jquery-ui.css のファイルです。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$(".datepicker" ).datepicker();
});
</script>

input type="text"class="datepicker" を指定することで、フォームをクリックしてカレンダーを出現させます。
<form>
<input type="text" size="15" class="datepicker">
</form>


Datepicker のサンプル

イメージはこんな感じです。
[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法

実際の動きは、こちらのデモ画面をご覧下さい。
Datepicker のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す