Datepickersは、ユーザーがカレンダーを使用して日付を選択するのに役立ちます。 これにより、ほとんどの場合、不適切な書式設定などの不正な日付入力に起因するエラーが回避されます。 JQueryプラグインを使用すると、入力フィールドにdatepickerを簡単に追加できます。 利用可能な多くのdatepickerプラグインがありますが、jQuery UI Datepickerは多くのカスタマイズオプションがあるため、最高のものの1つです。このチュートリアルでは、jQueryを使用して入力フィールドにdatepickerを追加する方法を紹介します。 このdatepickerを使用すると、特定の入力フィールドがクリックされるたびにカレンダーが開きます。 ユーザーは、このカレンダー、日付（日、月、年）から選択することができます。
Jquery UI
まず、その関数を使用するにはjQuery UIライブラリを含める必要があります。
基本的なDatepicker機能
この例では、入力フィールドにdatepickerを追加する方法を示します。
Javascriptコード
入力フィールドのIDをdatepickerセレクタとして指定する必要があります。P>
$(function(){ $("#datepicker").datepicker();});
HTMLコード
入力フィールドに焦点を当てると、インタラクティブなカレンダーが開きます。
<p>Date: <input type="text"></p>
Datepickerの高度な機能
次の行では、Datepickerが提供する複数のオプションを使用して、Datepickerをより高度に使用する方法を説明します。
日付形式の変更
デフォルトでは、プラグインはMM/DD/YYYY形式を使用します。 DateFormatオプションを使用すると、必要に応じて日付形式を変更できます。
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
月と年を選択
デフォルトでは、左と右の矢印で月と年を変更します。 ChangeMonthとchangeYearオプションを使用すると、月と年を選択するメニューを表示することができます。
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
日付範囲を制限する
Datepickerでは任意の日付を選択できますが、これを制限したい場合は、minDateとmaxDateオプションを使用できます。p>
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker from to
次の例では、ユーザーが日付と日付を入力する必要があるdatepickerを実装する方法を示します。 このスクリプトのクラムは、日付から、日付よりも早くすることはできませんということです。
HTMLコード
ユーザーはFromフィールドで任意の日付を選択できますが、Toフィールドの前の値と同じかそれ以上のもののみを選択できます。 p>
<p>Date: <input type="text"> TO <input type="text"></p>