スポンサード

日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、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 のサンプル

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


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

スポンサード