jQuery UI API - 日付選択ウィジェット（Datepicker Widget）

カテゴリ

ウィジェット（Widgets）

使用法

説明：ポップアップまたはインラインカレンダーから日付を選択します。

バージョン追加：1.0

jQuery UI 日付選択（Datepicker）は、ページに日付選択機能を追加する高度に設定可能なプラグインです。日付形式と言語をカスタマイズし、選択可能な日付範囲を制限し、ボタンやその他のナビゲーションオプションを追加できます。

デフォルトでは、関連するテキストフィールドがフォーカスを受け取ると、小さなオーバーレイに日付選択が開きます。インラインカレンダーの場合は、日付選択を div または span にアタッチするだけです。

キーボード操作

日付選択が開いているとき、以下のキーボードコマンドが使用できます：

  • PAGE UP：前の月に移動します。
  • PAGE DOWN：次の月に移動します。
  • CTRL+PAGE UP：前の年に移動します。
  • CTRL+PAGE DOWN：次の年に移動します。
  • CTRL+HOME：現在の月に移動します。日付選択が閉じている場合は開きます。
  • CTRL+LEFT：前の日に移動します。
  • CTRL+RIGHT：次の日に移動します。
  • CTRL+UP：前の週に移動します。
  • CTRL+DOWN：次の週に移動します。
  • ENTER：フォーカスされている日付を選択します。
  • CTRL+END：日付選択を閉じ、日付をクリアします。
  • ESCAPE：日付選択を閉じ、何も選択しません。

ユーティリティ機能

$.datepicker.setDefaults( settings )

すべての日付選択のデフォルト設定を変更します。

使用option()メソッドを使用して、個々のインスタンスの設定を変更します。

コード例：

すべての日付選択がフォーカスを受け取ったとき、またはアイコンをクリックしたときに開くように設定します。

$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

すべての日付選択がフランス語のテキストを持つように設定します。

$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

$.datepicker.formatDate( format, date, settings )

日付を指定された形式の文字列値にフォーマットします。

形式は次の組み合わせが可能です：

  • d - 月の通算日（先頭ゼロなし）
  • dd - 月の通算日（2桁）
  • o - 年の通算日（先頭ゼロなし）
  • oo - 年の通算日（3桁）
  • D - 曜日の短い名前
  • DD - 曜日の長い名前
  • m - 年の通算月（先頭ゼロなし）
  • mm - 年の通算月（2桁）
  • M - 月の短い名前
  • MM - 月の長い名前
  • y - 年（2桁）
  • yy - 年（4桁）
  • @ - Unixタイムスタンプ（1970/01/01からのミリ秒）
  • ! - Windowsクロック（0001/01/01からの100ナノ秒）
  • '...' - テキスト
  • '' - 単一引用符
  • その他 - テキスト

また、いくつかの$.datepicker定義済みの標準日付形式があります：

  • ATOM - 'yy-mm-dd' （RFC 3339/ISO 8601 と同じ）
  • COOKIE - 'D, dd M yy'
  • ISO_8601 - 'yy-mm-dd'
  • RFC_822 - 'D, d M y' （RFC 822 を参照）
  • RFC_850 - 'DD, dd-M-y' （RFC 850 を参照）
  • RFC_1036 - 'D, d M y' （RFC 1036 を参照）
  • RFC_1123 - 'D, d M yy' （RFC 1123 を参照）
  • RFC_2822 - 'D, d M yy' （RFC 2822 を参照）
  • RSS - 'D, d M y' （RFC 822 と同じ）
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yy-mm-dd' （ISO 8601 と同じ）
コード例：

日付をISO形式で表示します。結果は "2007-01-26"。

$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

日付を拡張フランス語形式で表示します。結果は "Samedi, Juillet 14, 2007"。

$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), {
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.parseDate( format, value, settings )

指定された形式の文字列値から日付を抽出します。

形式は次の組み合わせが可能です：

  • d - 月の通算日（先頭ゼロなし）
  • dd - 月の通算日（2桁）
  • o - 年の通算日（先頭ゼロなし）
  • oo - 年の通算日（3桁）
  • D - 曜日の短い名前
  • DD - 曜日の長い名前
  • m - 年の通算月（先頭ゼロなし）
  • mm - 年の通算月（2桁）
  • M - 月の短い名前
  • MM - 月の長い名前
  • y - 年（2桁）
  • yy - 年（4桁）
  • @ - Unixタイムスタンプ（1970/01/01からのミリ秒）
  • ! - Windowsクロック（0001/01/01からの100ナノ秒）
  • '...' - テキスト
  • '' - 単一引用符
  • その他 - テキスト

スローされる可能性のある例外：

  • 'Invalid arguments' - 形式または値が空の場合にスローされます。
  • 'Missing number at position nn' - 形式が数字を要求しているのに見つからない場合にスローされます。
  • 'Unknown name at position nn' - 形式が曜日名または月名を要求しているのに見つからない場合にスローされます。
  • 'Unexpected literal at position nn' - 形式がテキストを要求しているのに見つからない場合にスローされます。
  • 'Invalid date' - 日付が無効な場合にスローされます。例： '31/02/2007'。
コード例：

ISO形式の日付を抽出します。

$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );

拡張フランス語形式の日付を抽出します。

$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.iso8601Week( date )

指定された日付がその年の第何週目かを判定します：1～53。

この関数はISO 8601の週の定義を使用します：週は月曜日に始まり、各年の最初の週は1月4日を含みます。つまり、前年の最大3日がその年の最初の週に含まれる可能性があり、その年の最大3日が前年の最後の週に含まれる可能性があります。

この関数はcalculateWeekオプションのデフォルト実装です。

コード例：

日付がその年の第何週目かを調べます。

$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );

$.datepicker.noWeekends

beforeShowDay関数などを設定して、週末を選択できないようにします。

私たちはbeforeShowDayオプションで提供できますnoWeekends()すべての曜日を計算し、配列を提供する関数true/false日付が選択可能かどうかを示す値の配列。

コード例：

DatePickerを設定して、週末を選択不可にします。

$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

制限

日付選択は、さまざまな言語と日付形式のローカライズコンテンツに対応するサポートを提供します。各ローカライゼーションは、名前の後に言語コードを追加したファイルに含まれています。例えばフランス語はjquery.ui.datepicker-fr.js。必要なローカライゼーションファイルは、メインの日付選択コードの後に含める必要があります。各ローカライゼーションファイルは、利用可能なローカライゼーションの集合に独自の設定を追加し、すべてのインスタンスがこれらの設定をデフォルトとして自動的に適用します。

$.datepicker.regional属性はローカライゼーションの配列を保存し、言語コードをプレフィックスとします。デフォルトのプレフィックスは""、英語を示します。各エントリは次の属性を持つオブジェクトです：closeText、prevText、nextText、currentText、monthNames、monthNamesShort、dayNames、dayNamesShort、dayNamesMin、weekHeader、dateFormat、firstDay、isRTL、showMonthAfterYearとyearSuffix。

次のコードでデフォルトのローカライゼーションを復元できます：

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

次のコードで特定のロケールの日付選択を上書きできます：

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

テーマ化

日付選択ウィジェット（Datepicker Widget）はjQuery UI CSS フレームワークを使用して、外観と雰囲気のスタイルを定義します。日付選択に固有のスタイルを使用する必要がある場合は、次のCSSクラス名を使用できます：

  • ui-datepicker：日付選択の外側のコンテナ。日付選択がインラインの場合、この要素には追加のui-datepicker-inlineclassが付きます。設定されている場合isRTLオプションを設定すると、この要素にはさらにclassが付加されますui-datepicker-rtl class。
    • ui-datepicker-header：日付ピッカーのヘッダーコンテナ。
      • ui-datepicker-prev：前の月を選択するためのコントロール。
      • ui-datepicker-next：次の月を選択するためのコントロール。
      • ui-datepicker-title：日付ピッカーが月と年を含むタイトルコンテナ。
        • ui-datepicker-month：月のテキスト表示。設定されている場合changeMonthオプションで表示される<select>要素。
        • ui-datepicker-year：年のテキスト表示。設定されている場合changeYearオプションで表示される<select>要素。
    • ui-datepicker-calendar：カレンダーを含むテーブル。
      • ui-datepicker-week-end：週末のセル。: Cells containing weekend days.
      • ui-datepicker-other-month：ある月に属するが、現在の月の日ではないセル。
      • ui-datepicker-unselectable：ユーザーが選択できないセル。
      • ui-datepicker-current-day：選択された日付のセル。
      • ui-datepicker-today：当日の日付のセル。
    • ui-datepicker-buttonpane：設定する場合showButtonPanelオプションでボタンパネル（buttonpane）を使用します。
      • ui-datepicker-current：当日の日付を選択するためのボタン。

もしnumberOfMonthsオプションで複数の月を表示する場合、いくつかの追加のclassが使用されます：

  • ui-datepicker-multi：複数月の日付ピッカーの最外層コンテナ。この要素は表示する月数に応じてさらにui-datepicker-multi-2、ui-datepicker-multi-3 或 ui-datepicker-multi-4class名が付加されます。
    • ui-datepicker-group：グループ内の個別のセレクター。この要素はグループ内の位置に応じてさらにui-datepicker-group-first、ui-datepicker-group-middle 或 ui-datepicker-group-lastclass名が付加されます。

依存関係

補足説明

  • このウィジェットは機能的なCSSが必要です。そうでないと動作しません。カスタムテーマを作成する場合は、ウィジェット指定のCSSファイルを起点として使用してください。
  • このウィジェットは要素の値をプログラム的に操作するため、要素の値が変更されてもネイティブのchangeイベントはトリガーされません。
  • ではサポートされていません<input type="date">上での日付ピッカーの作成は、ネイティブセレクターのUIと競合するためです。

例

シンプルなjQuery UI日付ピッカー（Datepicker）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>日期选择器部件（Datepicker Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>

その他の拡張