[JS]jQueryとjQueryUIを利用したDatepickerの実装方法のまとめ

jQueryプラグイン・ライブラリ

2013.02.18

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

jQuery Datepicker
Datepicker の利用方法
Datepicker のサンプル

jQuery Datepicker

Datepickerについてはこちら｡
Datepicker | jQuery UI

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>

$(function() {

$(".datepicker" ).datepicker();

});

</script>

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

<form>
<input type="text" size="15" class="datepicker">
</form>

<form>

</form>

Datepicker のサンプル

イメージはこんな感じです。

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

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

Datepicker のデモ