JqueryUI-日付ピッカー

jQueryUIのDatepickerにより、ユーザーは日付を簡単かつ視覚的に入力できます。日付の形式と言語をカスタマイズし、選択可能な日付範囲を制限し、ボタンやその他のナビゲーションオプションを簡単に追加できます。

jQueryUIには、日付ピッカーを作成し、新しいCSSクラスを追加してページ上のHTML要素の外観を変更する* datepicker（）*メソッドが用意されています。ラップされたセットの<input>、<div>、および<span>要素をdatepickerコントロールに変換します。

'_デフォルトでは、<input>要素の場合、関連付けられたテキストフィールドにフォーカスが移動すると、datepickerカレンダーが小さなオーバーレイで開きます。インラインカレンダーの場合は、日付ピッカーを<div>または<span>要素に添付するだけです。_

構文

datepicker（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_datepicker＃datepicker_options [$（selector、context）.datepicker（options）]メソッド
link：/jqueryui/jqueryui_datepicker＃datepicker_methods [$（selector、context）.datepicker（ "action"、[params]）]メソッド

[datepicker_options]#

$（セレクター、コンテキスト）.datepicker（オプション）メソッド

datepicker（オプション）オプション

構文

$(selector, context).datepicker(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).datepicker({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").datepicker(
   { altField: "#actualDate" }
);
$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
$(".selector").datepicker(
   { autoSize: true }
);


$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
$(".selector").datepicker(
   { buttonImageOnly: true }
);
$(".selector").datepicker(
   { buttonText: "Choose" }
);
$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
$(".selector").datepicker(
   { changeMonth: true }
);
$(".selector").datepicker(
   { changeYear: true }
);
$(".selector").datepicker(
   { closeText: "Close" }
);
$(".selector").datepicker(
   { constrainInput: false }
);
$(".selector").datepicker(
   { currentText: "Now" }
);
$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
$(".selector").datepicker(
   { defaultDate: +7 }
);
$(".selector").datepicker(
   { duration: "slow" }
);
$(".selector").datepicker(
   { firstDay: 1 }
);
$(".selector").datepicker(
   { gotoCurrent: true }
);
$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
$(".selector").datepicker(
   { isRTL: true }
);
$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
$(".selector").datepicker(
   {  nextText: "Later" }
);
$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);



$(".selector").datepicker(
   { prevText: "Earlier" }
);
$(".selector").datepicker(
   { selectOtherMonths: true }
);
$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
$(".selector").datepicker(
   { showAnim: "fold" }
);
$(".selector").datepicker(
   { showButtonPanel: true }
);
$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
$(".selector").datepicker(
   { showMonthAfterYear: true }
);
$(".selector").datepicker(
   { showOn: "both" }
);
$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
$(".selector").datepicker(
   { showOtherMonths: true }
);
$(".selector").datepicker(
   { showWeek: true }
);
$(".selector").datepicker(
   { stepMonths: 3 }
);
$(".selector").datepicker(
   { weekHeader: "W" }
);
$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
$(".selector").datepicker(
   { yearSuffix: "CE" }
);

次のセクションでは、datepicker機能のいくつかの実用例を示します。