Datepicker

http://api.jqueryui.com/1.10/datepicker/

カレンダーから日付を選択するUI機能を提供します。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

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

<p id="test"></p>

</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Animations</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    $( "#anim" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
    });
  });
  </script>
</head>
<body>

<p>日付: <input type="text" id="datepicker" size="30" /></p>

<p>アニメーション:<br />
  <select id="anim">
    <option value="show">Show (default)</option>
    <option value="slideDown">Slide down</option>
    <option value="fadeIn">Fade in</option>
    <option value="blind">Blind (UI Effect)</option>
    <option value="bounce">Bounce (UI Effect)</option>
    <option value="clip">Clip (UI Effect)</option>
    <option value="drop">Drop (UI Effect)</option>
    <option value="fold">Fold (UI Effect)</option>
    <option value="slide">Slide (UI Effect)</option>
    <option value="">None</option>
  </select>
</p>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Dates in other months</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display button bar</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display inline</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

日付: <div id="datepicker"></div>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display multiple months</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 3,
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Format date</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
</head>
<body>

<p>日付: <input type="text" id="datepicker" size="30" /></p>

<p>フォーマット:<br />
  <select id="format">
    <option value="mm/dd/yy">デフォルト - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">短縮 - d M, y</option>
    <option value="d MM, y">通常 - d MM, y</option>
    <option value="DD, d MM, yy">完全 - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">テキスト付き - 'day' d 'of' MM 'in the year' yy</option>
  </select>
</p>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "/demo/js/jqueryui/widgets/datepicker/images/calendar.gif",
      buttonImageOnly: true
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Localize calendar</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="/demo/js/jqueryui/widgets/datepicker/jquery.ui.datepicker-ja.js"></script>
  <script src="/demo/js/jqueryui/widgets/datepicker/jquery.ui.datepicker-ar.js"></script>
  <script src="/demo/js/jqueryui/widgets/datepicker/jquery.ui.datepicker-fr.js"></script>
  <script src="/demo/js/jqueryui/widgets/datepicker/jquery.ui.datepicker-he.js"></script>
  <script src="/demo/js/jqueryui/widgets/datepicker/jquery.ui.datepicker-zh-TW.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $( "#datepicker" ).datepicker();
    $( "#locale" ).change(function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  });
  </script>
</head>
<body>

<p>日付: <input type="text" id="datepicker" />&nbsp;
  <select id="locale">
    <option value="ja" selected="selected">Japanese(日本語)</option>
    <option value="ar">Arabic (‫(لعربي</option>
    <option value="zh-TW">Chinese Traditional (繁體中文)</option>
    <option value="fr">French (Français)</option>
    <option value="he">Hebrew (‫(עברית</option>
  </select></p>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Populate alternate field</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy"
    });
  });
  </script>
</head>
<body>

<p>日付: <input type="text" id="datepicker" />&nbsp;<input type="text" id="alternate" size="30" /></p>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
</head>
<body>

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


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Show week of the year</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showWeek: true,
      firstDay: 1
    });
  });
  </script>
</head>
<body>

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


</body>
</html>

jQuery UIのDatepickerはページに高機能なカレンダー型の日付選択のUIを追加します。オプションによって、日付フォーマットや言語の選択、選択できる日付の範囲の制限、ボタンやナビゲーションの追加などのカスタマイズをすることが出来ます。

デフォルト設定では、関連付けられたテキストフィールドにフォーカスされた場合に DatePickerはカレンダーを小さなオーバーレイで開きます。インラインカレンダーについては、単純にdivまたはspanにDatePickerを指定してください。

DatePickerはいくつかの機能的なCSSを必要とします。このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。

キーボード操作のサポートについて

カレンダーが開いている場合、下記のキーコマンドが利用可能なります。

PAGE UP: 前の月に移動します。
PAGE DOWN: 次の月に移動します。
Ctrl + PAGE UP: 前の年に移動します。
Ctrl + PAGE DOWN: 次の年に移動します。
Ctrl + HOME: 現在の月を開きます。もし、カレンダーが閉じていれば開きます。
Ctrl + [←]: 前の日に移動します。
Ctrl + [→]: 次の日に移動します。
Ctrl + [↑]: 前の週に移動します。
Ctrl + [↓]: 次の週に移動します。
Enter: フォーカスされている日を選択します。
Ctrl + END: カレンダーを閉じ、日付を消去します。
ESCAPE: 未選択でカレンダーを閉じます。

汎用的な機能について

$.datepicker.setDefaults( settings )

全てのdatepickerの初期設定を行います。個別のdatepickerの設定を変更するには、optionメソッドを使用してください。

下記例は、全てのdatepickerがフォーカスが当たった時、またはアイコンをクリックした際に開くように初期設定しています。

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

下記例は、全てのdatepckerのテキストが日本語になるように初期設定しています。

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

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

指定された日付フォーマットで、日付文字列を設定します。
下記例は、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 )

指定された形式の文字列値から日付を抽出します。
下記に該当する場合、例外がスローされます。(nnは、原因が何文字目なのかを示します)

例外	詳細
'Invalid arguments'	値またはフォーマットがnull
'Missing number at position nn'	フォーマットに合致しない数値を指定
'Unknown name at position nn'	フォーマットに合致しない曜日名、または月名を指定
'Unexpected literal at position nn'	フォーマットに合致しないリテラル値を指定
'Invalid date'	'2007/02/31'のような、不正な日付値を指定

$.datepicker.iso8601Week( date )

与えられた日付の年の週を、1～53の値で判定します。

この関数はISO8601の週についての定義を使用しています。(週始まりは月曜で、第1週は1/4を含む) そのため、第1週に前年の3日が含まれれば、それは本年の週の曜日として扱われ、本年の3日が前年の最終週に含まれれば、前年の週の曜日として扱われます。

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

下記例では、指定した日付が第何週なのかを調べてます。

$.datepicker.iso8601Week( new Date( 2007, 1-1, 26 ) );
// 1-1はjavaScriptの月が0始まりなための対応

$.datepicker.noWeekends

beforeShowDayのような設定で使用する関数で、週末を選択されるのを防ぎます。

beforeShowDayオプション内で使用され、noWeekends()関数が全ての週末日を算出し、その日付が選択出来るか否かを示すtrue/falseの配列を返します。

下記例は、datepickerが週末が選択できないように設定をしています。

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

依存関係

UI Core(jquery.ui.core.js)
Effects Core(jquery.ui.effect.js, showAnimオプションで使用)

引数に指定できる日付フォーマットの一覧です。

フォーマット	説明
d	日(0詰め無し)
dd	日(0詰め有り)
o	年間通算日(年,0詰め無し)
oo	年間通算日(年,3桁の0詰め)
D	曜日(略名)
DD	曜日
m	月(0詰め無し)
mm	月(0詰め有り)
M	月名(略名)
MM	月名
y	年(2桁)
yy	年(4桁)
@	Unixタイムスタンプ(マイクロ秒:1970/01/01～)
!	Windows時計(?) (100ns:0001/01/01～)
'...'	リテラルテキスト
''	シングルクォート
それ以外	リテラルテキスト

$.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と同じ)

Datepickerは言語別の表示、日付フォーマット等のローカライズ機能を提供してくれます。それぞれのローカライズはそれぞれの言語コード付きのファイルに含まれています。(日本語ならjquery.ui.datepicker-ja.js) ローカライズファイルはDatepickerの本体のファイルの後に読み込まなければいけません。

Datepicker日本語化に必要なローカライズファイルは「i18n」フォルダ内に格納されています。 (訳注: ダウンロードして解凍したフォルダ内に、/jquery-ui-1.x.x/development-bundle/ui/i18n/jquery.ui.datepicker-ja.jsとして含まれています。)

日本語化するには、この中の日本語用のファイルを読み込み、「$.datepicker.setDefaults」で日本の言語コードを指定する必要があります。

<script src="jquery.ui.datepicker-ja.js"></script>

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

$.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[ "ja" ] );

オプション	説明
altField	型：`Selector` or `jQuery` or `Element` 初期値：`""` ここで指定したinput要素に、datepickerで選択した日付が入力・更新されます。 altFormatオプションにフォーマットを指定すれば、そのフォーマットが適用されます。 `$( ".selector" ).datepicker({ altField: "#actualDate" });` `// getter var altField = $( ".selector" ).datepicker( "option", "altField" ); // setter $( ".selector" ).datepicker( "option", "altField", "#actualDate" );`
altFormat	型：`String` 初期値：`""` dateFormatオプションは、altFieldオプションのために使用されます。指定可能な日付のフォーマットを参照してください。
appendText	型：`String` 初期値：`""` 日付テキストフィールドの後ろに添えるテキストを指定します。
autoSize	型：`Boolean` 初期値：`false` 現在の日付フォーマットに合わせてテキストフィールドのサイズを自動的に調整します。
beforeShow	型：`Function( Element input, Object inst)` 初期値：`null` この関数はテキストフィールド要素とDatePickerのインスタンスを取得し、 DatePickerに与えるオプションオブジェクトを返すことでDatePickerを更新します。 DatePickerが表示される直前に呼び出されます。
beforeShowDay	型：`Function(Date date)` 初期値：`null` この関数は日付パラメータを取得し、戻り値として配列を返さなければなりません。 [0]はその日付を選択できるか否かを示す値(true/false)を指定します。 [1]はCSSのclass名を指定します。""を指定すると、デフォルト指定で表示されます。 [2]はその日付のための任意のポップアップツールチップになります。この関数は各日付をDatePicker内に表示する直前に呼び出されます。
buttonImage	型：`String` 初期値：`""` ボタン上に表示する画像のURLを指定します。もし指定されれば、buttonTextオプションはaltの値になり、直接表示されなくなります。
buttonImageOnly	型：`Boolean` 初期値：`false` ボタン画像を指定された画像だけを表示するか、ボタン内に表示するかを指定します。
buttonText	型：`String` 初期値：`"..."` ボタンに表示するテキストを指定します。 showOnオプションの"button"または"both"と連動して使用します。
calculateWeek	型：`Function()` 初期値：`jQuery.datepicker.iso8601Week` 与えられた日付から1年のうちの週を計算する関数を指定します。デフォルトの設定では、ISO 8601に定義されている、週が月曜始まりとして、年の始まりは最初の木曜日を含む週として計算されます。
changeMonth	型：`Boolean` 初期値：`false` 月をテキストの代わりにドロップダウンを表示するか否かを指定します。
changeYear	型：`Boolean` 初期値：`false` 年をテキストの代わりにドロップダウンを表示するか否かを指定します。 yearRangeオプションによって選択できる年を制御することが出来ます。
closeText	型：`String` 初期値：`"Done"` 閉じるリンクに表示するテキストを指定します。 showButtonPanelオプションの指定によってボタンを表示します。
constrainInput	型：`Boolean` 初期値：`true` trueの場合、dateFomartで指定された形式でしか、入力値を受け付けないようになります。
currentText	型：`String` 初期値：`"Today"` 当日のリンクに表示するテキストを指定します。 showButtonPanelオプションを指定するとこのボタンを表示します。
dateFormat	型：`String` 初期値：`"mm/dd/yy"` 解析と表示をする日付のフォーマットを指定します。指定可能なフォーマットについては、日付フォーマットの項目を参照してください。
dayNames	型：`Array` 初期値：`["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]` 長め曜日名のリストを指定します。開始は日曜日からになります。
dayNamesMin	型：`Array` 初期値：`[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]` 短縮された曜日名のリストを指定します。開始は日曜からになります。カレンダーのヘッダーで使用されます。
dayNamesShort	型：`Array` 初期値：`[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]` 短めの曜日名のリストを指定します。開始は日曜日からになります。
defaultDate	型：`Date` or `Number` or `String` 初期値：`null` ページが開かれた際に、テキストフィールドが空だった場合、ハイライトされる日付を指定します。指定には日付オブジェクト、当日を基準に数値での指定(例: +7)、日付フォーマットに沿った文字列、または文字列による値と期間区切りを使用した指定('y'は年、'm'は月、'w'は週、'd'は日　例:'+1m+7d')をすることが出来ます。また、nullが指定されると当日が設定されます。 Date 指定する日付オブジェクト Number 当日を基準とした数値を指定します。例えば2は当日から2日後を、-1は昨日を表します。 String dateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。(例:"+1m +7d"は当日から1ヶ月と7日後が指定されます。)
duration	型：`String` 初期値：`"normal"` DatePickerが表示されるスピードを指定します。ミリ秒単位の数値、または用意されている"slow", "normal", "fast"の3つのうちの 1つを指定します。
firstDay	型：`Integer` 初期値：`0` 週の始まりの曜日を指定します。 0なら日曜日、1なら月曜日になります。
gotoCurrent	型：`Boolean` 初期値：`false` trueが指定されると、「当日リンク」先が当日の代わりに選択されている日付に移動するようになります。
hideIfNoPrevNext	型：`Boolean` 初期値：`false` 標準では、次の月へと前の月へのリンクは有効でなければ無効化状態になります。(詳細はminDateとmaxDateのオプション参照) このオプションにtrueを指定すれば、この場合に非表示になります。
isRTL	型：`Boolean` 初期値：`false` 現在の言語を右から左に表示するか否かを指定します。
maxDate	型：`Date` or `Number` or `String` 初期値：`null` 選択可能な最大日付を指定します。 nullを指定すると無制限になります。 Date 指定する日付オブジェクト Number 当日を基準とした数値を指定します。例えば2は当日から2日後を、-1は昨日を表します。 String dateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。(例:"+1m +7d"は当日から1ヶ月と7日後が指定されます。)
minDate	型：`Date` or `Number` or `String` 初期値：`null` 選択可能な最大日付を指定します。 nullを指定すると無制限になります。 Date 指定する日付オブジェクト Number 当日を基準とした数値を指定します。例えば2は当日から2日後を、-1は昨日を表します。 String dateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。(例:"+1m +7d"は当日から1ヶ月と7日後が指定されます。)
monthNames	型：`Array` 初期値：`[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]` 月のフルネームのリストを指定します。
monthNamesShort	型：`Array` 初期値：`[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]` 短めの月名のリストを指定します。
navigationAsDateFormat	型：`Boolean` 初期値：`false` prevTextとnextTextのオプションを日付フォーマットに沿って変換したものを表示するか否かを指定します。
nextText	型：`String` 初期値：`"Next"` 次の月へのリンクのテキストを指定します。標準のThemeRollerのスタイルであれば、この値はアイコンに置き換えられます。
numberOfMonths	型：`Number` or `Array` 初期値：`1` 1度に表示する月の数を指定します。 Number 1つの行に表示する月の数を指定します。 Array 表示する行と列の数を指定します。 `$( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] );`
onChangeMonthYear	型：`Function(Integer year, Integer month, Object inst)` 初期値：`null` DatePickerが新しい月、または年に移動した際に呼び出さしたい関数を指定します。この関数は指定した年、月(1～12)、また、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。
onClose	型：`Function( String dateText, Object inst )` 初期値：`null` 日付が選択された、されないに関わらずDatePickerが閉じられた際に呼び出したい関数を指定します。この関数は日付文字列(未選択時は"")と、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。
onSelect	型：`Function( String dateText, Object inst )` 初期値：`null` 日付が選択された際に呼び出したい関数を指定します。この関数は日付文字列と、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。
prevText	型：`String` 初期値：`"prev"` 前の月へのリンクのテキストを指定します。標準のThemeRollerのスタイルであれば、この値はアイコンに置き換えられます。
selectOtherMonths	型：`Boolean` 初期値：`false` 現在の月の前、または後ろに表示される他の月の日付を選択可能にするか否かの指定をします。 showOtherMonthsオプションがtrueの場合のみ、適用されます。
shortYearCutoff	型：`Number` or `String` 初期値：`"+10"` dateFormatで'y'(年を2桁)を使用した場合、世紀を切り替える基準を設定します。入力値が指定された値と同じまたはそれ以下であれば、今世紀(2000年)とみなされ、それより大きい値であれば、前の世紀(1900年)とみなされます。 Number 0～99の切り離す年を指定します。 String 現在の年の相対で指定します。(例:"+3", "-5")
showAnim	型：`String` 初期値：`"show"` DatePickerが表示／非表示される際のアニメーション名を指定します。 "show"(デフォルト)、"slideDown"、"fadeIn"やjQuery UI Effectで定義されているものを使用します。空文字列を指定すると、アニメーションがオフになります。
showButtonPanel	型：`Boolean` 初期値：`false` ボタンパネルを表示するか否かを指定します。
showCurrentAtPos	型：`Number` 初期値：`0` numberOfMonthsを通して複数の月を表示する際に、現在の月をどの位置に表示するかを指定します。
showMonthAfterYear	型：`Boolean` 初期値：`false` ヘッダー内で年の後ろに月を表示するか否かを指定します。
showOn	型：`String` 初期値：`"focus"` DatePickerが表示されるイベントを指定します。フォーカスがあたった際に表示するならば"focus"、ボタンが押された際に表示するならば"button"、両方のイベントで表示したいのであれば"both"を指定します。
showOptions	型：`Object` 初期値：`{}` showAnimオプションでjQuery UI Effectの指定を使用した場合、このオプションを通して更に追加の設定を行うことが可能です。
showOtherMonths	型：`Boolean` 初期値：`false` 他の月の日付を現在の月の最初と終わりに表示するか否かを指定します。(選択不可) selectOtherMonthsオプションを指定することで、選択可能になります。
showWeek	型：`Boolean` 初期値：`false` trueを指定すると年による週を表示するカラム行を追加します。 calculateWeekオプションによって週をどのように計算するか指定することが出来ます。また、firstDayオプションによって開始日を変更することも可能です。
stepMonths	型：`Number` 初期値：`1` 次へ／前へリンクをクリックした際に、移動する月数を指定します。
weekHeader	型：`String` 初期値：`"Wk"`
yearRange	型：`String` 初期値：`"c-10:c+10"` 年選択のドロップダウンに表示する範囲を指定します。また、このオプションが影響するのはドロップダウンに対してのみであり、選択可能な日付を制限したいのであれば、minDateとmaxDateオプションを使用してください。 "-nn:+nn" 現在の年の相対を指定 "c-nn:c+nn" 選択されている年の相対を指定 "nnnn:-nn" 上記の組み合わせで指定
yearSuffix	型：`String` 初期値：`""` 月のヘッダーに表示する年の後ろに続く文字列を指定します。

メソッド	説明
destroy()	DatePickerの機能を完全に削除します。 `$( ".selector" ).datepicker( "destroy" );`
dialog(date [, onSelect ] [, settings ] [, pos ])	DatePickerをダイアログボックスで開きます。 date 型:`String` or `Date` 初期値となる日付を指定します。 onSelect 型:`Function()` 日付を選択した際のコールバック関数を指定します。この関数はパラメータとして、日付テキストとDatePickerインスタンスを受け取ります。 settings 型:`Options` DatePickerに指定した新しい設定を適用します。 pos 型:`Number[2]` or `MouseEvent` ダイアログの表示位置を指定します。 [x,y]の配列でtop/leftの位置、または座標情報を含むマウスイベントを指定します。指定がない場合は、スクリーンの中心に表示されます。
getDate()	戻り値:`Date` 選択している日付の値を返します。未選択の場合は、nullを返します。
hide()	開かれているDatePickerを閉じます。
isDisabled()	戻り値:`Boolean` DatePickerがdisable状態か否かを調べます。
option( optionName )	戻り値：`Object` optionNameに指定したオプションの現在の値を取得します。 optionName 型：`String` 取得したいオプションの名前を指定します。
option()	戻り値：`PlainObject` オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName, value )	引数のoptionNameのオプションに値を設定します。 optionName 型：`String` 設定したいオプションの名前を指定します。 value 型：`Object` 設定したい値を指定します。
option( options )	オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 option 型：`Object` 設定したいオプションのキーと名前のペアを指定します。
refresh()	DatePickerの再描画します。
setDate(date)	DatePickerに設定する日付を指定します。 date 型:`String` or `Date` Dateオブジェクト、もしくは日付フォーマットに従った文字列(例:"01/26/2009")、または当日からの相対を数値で(例:+7)、または各日付区切りでの文字列での指定 ("y"は年, "m"は月, "w"は週, "d"は日例:"+1m +7d")が可能です。 nullを指定すると設定した日付がクリアされます。 `$(".selector").datepicker("setDate", "10/12/2012");`
show()	DatePickerを表示します。テキストフィールドに紐付けている場合は、テキストフィールドが表示されいている状態にしてください。
widget()	戻り値：`Object` DatePickerを含めたjQueryオブジェクトを返します。