jQueryのUIの例 - 日付ピッカー（日付ピッカー）
ポップアップボックスまたはインラインカレンダーから日付を選択します。
DatePickerのコンポーネントの詳細については、APIドキュメントを参照してください日付ピッカー部材（日付ピッカーウィジェット） 。
デフォルトの機能
日付ピッカー（日付ピッカー）は、入力フィールド上の標準形式にバインドされています。 入力にフォーカスを移動します（またはクリックして[Tab]キーを使用）、小さなオーバーレイ上でインタラクティブカレンダーを開きます。 日付を選択してください（入力ボックスがフォーカスを失った）ページ上の任意の場所をクリックするか、または閉じるには、Escキーをクリックします。 日付を選択した場合、フィードバックは入力の値として表示されます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
アニメーション
あなたが開いたときに別のアニメーションを使用するか、日付ピッカーを閉じます。 ドロップダウンボックスからムービーを選択し、その効果を確認するためにボックスをクリックします。 あなたは3つの標準的なアニメーション、特殊効果のいずれかを使用する、またはUIのいずれかを使用することができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - アニメ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（）;
$（ "#anim」）.change（関数（）{
$（ "#datepicker」）.datepicker（「オプション」、「showAnim"、$（この）.val（））;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"サイズ= "30"> </ P>
<P>アニメーション：<BR>
<選択のid = "アニメーション">
<オプション値= "ショー">表示（デフォルト）</オプション>
<オプション値= "slideDown">スライド</オプション>
<オプション値= "フェードイン">フェード</オプション>
<オプション値= "ブラインド">ブラインド（UIブラインド効果）</オプション>
<オプション値= "バウンス">バウンス（UIリバウンド効果）</オプション>
<オプション値= "クリップ">クリップ（UI編集エフェクト）</オプション>
ドロップ（UIが効果を上陸させた）<オプション値= "ドロップ"> </オプション>
<オプション値= "倍">（UI折り畳まれた効果）を折る</オプション>
<オプション値= "スライド">スライド（UIスライドエフェクト）</オプション>
<オプション値= "">なし</オプション>
</選択>
</ P>
</ BODY>
</ HTML>
日付の他の月
DatePickerの追加の月の日付を表示することができ、これらの日付は任意に設定することができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 日付の他の月の</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
showOtherMonths：trueの場合、
selectOtherMonths：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
ディスプレイボタンバー
ブールによってshowButtonPanel今日の日付表示を選択するためのカレンダーをオフにする「今日」ボタンが「完了」ボタンオプションが表示されます。 デフォルトでは、ときにボタンバーの表示は、各ボタンが有効になりますが、ボタンは、他のオプションをオフにすることができます。 ボタンのテキストをカスタマイズすることができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - ディスプレイボタンバー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
showButtonPanel：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
ディスプレイインライン
DatePickerのではなく、カバー層に比べて、ページ表示中にネストされています。 代わりに単に入力に呼び出すのでは、とすることができるのdiv .datepicker（）を呼び出します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - インライン表示</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
日付：の<divのid = "DatePickerの"> </ div>の
</ BODY>
</ HTML>
月＆イヤーメニューを表示
ドロップダウンボックスではなく、月/年のタイトルの静的な表示よりも、月と年が表示され、ナビゲーションの時間の大規模な範囲に及ぶことは容易です。 ブール値の追加changeMonthとchangeYearオプションを選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - ディスプレイ月＆＃038;イヤーメニュー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
changeMonth：trueの場合、
changeYear：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
複数ヶ月表示
設定numberOfMonthsオプションは整数2または日付ピッカー複数ヶ月に表示される2より大きい整数です。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 複数ヶ月</タイトル>を表示します
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
NUMBEROFMONTHS：3、
showButtonPanel：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
日付形式
日付フィードバックを表示するためのさまざまな方法で。 ドロップダウンボックスから日付形式を選択し、入力ボックスに日付をクリックして選択し、選択された表示の日付形式を表示します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 日付形式</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（）;
$（ "#format」）.change（関数（）{
$（ "#datepicker」）.datepicker（「オプション」、「DATEFORMAT」、$（この）.val（））;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"サイズ= "30"> </ P>
<P>形式オプション：<BR>
<選択のid = "フォーマット">
<オプション値= "MM / DD / YY">デフォルト - MM / DD / YY </オプション>
<オプション値= "YY-MM-DD"> ISO 8601 - YY-MM-DD </オプション>
<オプション値= "D M、Y">ショート - dはM、Y </オプション>
<オプション値= "D MM、Y">ミディアム - D MM、Y </オプション>
<オプション値= "DD、D MM、YY">フル - DD、D MM、YY </オプション>
<オプション値= " 'は、一日'は、D 'は、の'は、MM 'は、今年＆'は内; YY">テキスト付 - MM 'の' '日' D '今年の「YY </オプション>
</選択>
</ P>
</ BODY>
</ HTML>
トリガーアイコン
DatePickerのを表示するには、入力ボックスの横にあるアイコンをクリックします。 DatePickerのを設定すると、焦点に（デフォルトの動作）が開き、または開く、またはアイコンをクリックすると、オープン/フォーカスを受け取るには、アイコンをクリックしてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - トリガーアイコン</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
showOn：「ボタン」、
buttonImage：「画像/ calendar.gif」、
buttonImageOnly：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
ローカライズされたカレンダー
ローカリゼーションDatePickerのカレンダーの言語とフォーマット（デフォルトは英語/西形式です）。 DatePickerのは、内蔵のアラビア語やヘブライ語など右から左に読む言語のサポートが含まれています。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - ローカライズされたカレンダー</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<SCRIPT SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </スクリプト>
<SCRIPT SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </スクリプト>
<SCRIPT SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </スクリプト>
<SCRIPT SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（$ .datepicker.regional [「FR」]）;
$（ "#locale」）.change（関数（）{
$（ "#datepicker」）.datepicker（「オプション」、
$ .datepicker.regional [$（この）.val（）]）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの">＆NBSP;
<選択のid = "ロケール">
<オプション値= "AR">アラビア語（＆＃8235;（＆＃1575;＆＃1604;＆＃1593;＆＃1585;＆＃1576;＆＃1610;＆＃1577; </オプション>
<オプション値=「ZH-TW ">繁体字中国語（＆＃32321;＆＃39636;＆＃20013;＆＃25991;）</オプション>
<オプション値= "">英語</オプション>
<= "選択"を選択オプション値= "FR">フランス語（フラン＆ccedil; AIS）</オプション>
<オプション値= "彼">ヘブライ語（＆＃8235;（＆＃1506;＆＃1489;＆＃1512;＆＃1497;＆＃1514; </オプション>
</選択> </ P>
</ BODY>
</ HTML>
別の入力ボックスを作成
使用altFieldとaltFormat日付を選択するたびにオプションは、日付が別の入力ボックス内の特定の形式で入力されます。 コンピュータに優しい、さらなる処理上の日付で、この機能は、ユーザーがユーザーフレンドリーな日付が提示されている場合。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 別の入力ボックスを作成</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
altField：「#alternate」、
altFormat：「DD、D MM、YY」
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの">＆NBSP;の<input type = "text"のid = "代替"サイズ= "30"> </ P>
</ BODY>
</ HTML>
日付範囲を制限します
minDateとmaxDateオプションが選択可能な日付の範囲を制限します。 実際の日付の開始日と終了日を設定します（新しいDate（2009、1 - 1、26））、または現在のオフセット値（-20）の文字列、またはサイクルと単位（ '+ 1M + 10Dなど'）。 文字列に設定した場合、年間で 'Y'を使用して、月の 'M'を使用して、 'W'を表し週間を使用して、日のための「D」を使用します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 日付範囲を制限する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{MinDateプロパティ：-20、maxDateの：" + 1M + 10D "}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>
日付範囲を選択します
検索する日付の範囲を選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 日付の範囲を選択し、</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#from」）.datepicker（{
defaultDate： "+ 1ワット」、
changeMonth：trueの場合、
NUMBEROFMONTHS：3、
OnCloseの：関数（selectedDate）{
$（ "#to」）.datepicker（「オプション」、「MinDateプロパティ」、selectedDate）。
}
}）;
$（ "#to」）.datepicker（{
defaultDate： "+ 1ワット」、
changeMonth：trueの場合、
NUMBEROFMONTHS：3、
OnCloseの：関数（selectedDate）{
$（ "#from」）.datepicker（「オプション」、「maxDateの」、selectedDate）。
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
< "から" =のラベル> </ label>は
<input type = "text"のid =名 "から" = "から">
<= "へ"のラベル> </ label>はへ
<input type = "text" ID = "に"名前= "へ">
</ BODY>
</ HTML>
今年のショーの週
DatePickerのは、今年の最初の数週間を表示することができます。 月曜日から始まる週、年の最初の木曜日が含まれている年の最初の週：デフォルトは、ISO 8601の定義に従って計算されます。 これは一年で週の日の別のカップルであり得ることを意味します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UI日付ピッカー（日付ピッカー） - 年の最初の数週間を表示する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#datepicker」）.datepicker（{
showWeek：trueの場合、
firstDay：1
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<P>日付：の<input type = "text"のid = "DatePickerの"> </ P>
</ BODY>
</ HTML>