jQuery UI の Datepicker プラグイン

jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。

実装例(サンプル)

日付:

実装例(サンプル)の動作について

「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。

カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。

jquery-ui-datepicker-next.png をクリックすると、次月のカレンダーになる。

jQuery - Datepicker プラグイン - 前月 をクリックすると、前月のカレンダーになる。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.datepicker.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-datepicker' ) . datepicker();
} );
// -->
</script>

HTML

<p>日付: <input type="text" id="jquery-ui-datepicker"></p>

オプション

Datepicker プラグインには、オプションが多く存在する。私が良く使うのは、下のオプション。

dateFormat

日付のフォーマットを指定するオプション。

minDate

選択できる日付の範囲を指定するオプション。本日の何日前からか選択できるかを指定。

maxDate

選択できる日付の範囲を指定するオプション。本日の何日後まで選択できるかを指定。

altField

カレンダーによる日付の選択を反映させる入力欄を、追加指定するオプション。

altFormat

altField で追加した入力欄の書式指定オプション。

showButtonPanel

「今日」ボタンと、「閉じる」ボタンを表示するオプション。

changeMonth

月のドロップダウンリスト移動を表示するオプション。

changeYear

年のドロップダウンリスト移動を表示するオプション。

showOtherMonths

各月の余剰部分に前月・次月の日を表示するオプション。

selectOtherMonths

各月の余剰部分の前月・次月の日を選択できるようにするオプション。

showWeek

「週」の列を追加し、その年の何週目かを表示するオプション。

firstDay

週の最初の曜日を指定するオプション。

numberOfMonths

カレンダーを複数月分表示するオプション。

showOn

カレンダーを呼び出すボタンを表示するオプション。

buttonImage

ボタンに使う画像へのパスを指定するオプション。

buttonImageOnly

ボタンを画像だけにするオプション。

showAnim

アニメーション動作でカレンダーを開閉するオプション。

autoSize

日付のフォーマットに応じて入力欄の大きさを自動変更するオプション。

応用

日付範囲指定フォーム

スポンサード リンク

カテゴリー: Datepicker, GUI, JavaScript, jQuery, jQuery UI, フォーム, 時間 パーマリンク