SelectorTipsアイコン一覧CSSフレームワークイージングDatepickerhttp://api.jqueryui.com/1.10/datepicker/カレンダーから日付を選択するUI機能を提供します。UIのDatepickerはページに高機能なカレンダー型の日付選択のUIを追加します。ボタンやナビゲーションの追加などのカスタマイズをすることが出来ます。DatePickerはカレンダーを小さなオーバーレイで開きます。インラインカレンダーについては、単純にdivまたはspanにDatePickerを指定してください。DatePickerはいくつかの機能的なCSSを必要とします。このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。キーボード操作のサポートについてカレンダーが開いている場合、下記のキーコマンドが利用可能なります。UP前の月に移動します。DOWN次の月に移動します。UP前の年に移動します。DOWN次の年に移動します。HOME現在の月を開きます。カレンダーが閉じていれば開きます。[←]前の日に移動します。[→]次の日に移動します。[↑]前の週に移動します。[↓]次の週に移動します。Enterフォーカスされている日を選択します。ENDカレンダーを閉じ、日付を消去します。ESCAPE未選択でカレンダーを閉じます。)全てのdatepickerの初期設定を行います。個別のdatepickerの設定を変更するには、optionメソッドを使用してください。下記例は、全てのdatepickerがフォーカスが当たった時、またはアイコンをクリックした際に開くように初期設定しています。"Calendar"});下記例は、全てのdatepckerのテキストが日本語になるように初期設定しています。)指定された日付フォーマットで、日付文字列を設定します。下記例は、ISO日付フォーマットに沿った"2007-01-26"という文字列を出力します。2007"を出力します。)指定された形式の文字列値から日付を抽出します。下記に該当する場合、例外がスローされます。)与えられた日付の年の週を、1~53の値で判定します。この関数はISO8601の週についての定義を使用しています。本年の3日が前年の最終週に含まれれば、前年の週の曜日として扱われます。この関数はcalculateWeekオプションのデフォルト関数です。下記例では、指定した日付が第何週なのかを調べてます。1-1はjavaScriptの月が0始まりなための対応$.datepicker.noWeekendsbeforeShowDayのような設定で使用する関数で、週末を選択されるのを防ぎます。その日付が選択出来るか否かを示すtrue/falseの配列を返します。下記例は、datepickerが週末が選択できないように設定をしています。showAnimオプションで使用)引数に指定できる日付フォーマットの一覧です。(100ns:0001/01/01~)'...'リテラルテキスト''シングルクォートそれ以外リテラルテキスト$.datepickerに事前定義されていて利用可能な書式は下記のとおりです。8601と同じ)Datepickerは言語別の表示、日付フォーマット等のローカライズ機能を提供してくれます。それぞれのローカライズはそれぞれの言語コード付きのファイルに含まれています。ローカライズファイルはDatepickerの本体のファイルの後に読み込まなければいけません。Datepicker日本語化に必要なローカライズファイルは「i18n」フォルダ内に格納されています。ダウンロードして解凍したフォルダ内に、/jquery-ui-1.x.x/development-bundle/ui/i18n/jquery.ui.datepicker-ja.jsとして含まれています。)日本語化するには、この中の日本語用のファイルを読み込み、「$.datepicker.setDefaults」で日本の言語コードを指定する必要があります。);$.datepicker.regionalは、言語コードを指定するローカライゼーション用の配列で、空文字を指定するとデフォルトの英語が参照されます。この値は下記の項目に影響を与えます。closeTextprevTextnextTextcurrentTextmonthNamesmonthNamesShortdayNamesdayNamesShortdayNamesMinweekHeaderdateFormatfirstDayisRTLshowMonthAfterYearyearSuffixデフォルトのローカライゼーションに戻したい場合は、下記のように指定します。);特定のカレンダーだけローカライゼーションを別に指定したい場合は、下記のように指定します。Element初期値:""ここで指定したinput要素に、datepickerで選択した日付が入力・更新されます。altFormatオプションにフォーマットを指定すれば、そのフォーマットが適用されます。);altFormat型:String初期値:""dateFormatオプションは、altFieldオプションのために使用されます。指定可能な日付のフォーマットを参照してください。appendText型:String初期値:""日付テキストフィールドの後ろに添えるテキストを指定します。autoSize型:Boolean初期値:false現在の日付フォーマットに合わせてテキストフィールドのサイズを自動的に調整します。DatePickerに与えるオプションオブジェクトを返すことでDatePickerを更新します。DatePickerが表示される直前に呼び出されます。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年のうちの週を計算する関数を指定します。年の始まりは最初の木曜日を含む週として計算されます。changeMonth型:Boolean初期値:false月をテキストの代わりにドロップダウンを表示するか否かを指定します。changeYear型:Boolean初期値:false年をテキストの代わりにドロップダウンを表示するか否かを指定します。yearRangeオプションによって選択できる年を制御することが出来ます。closeText型:String初期値:"Done"閉じるリンクに表示するテキストを指定します。showButtonPanelオプションの指定によってボタンを表示します。constrainInput型:Boolean初期値:truetrueの場合、dateFomartで指定された形式でしか、入力値を受け付けないようになります。currentText型:String初期値:"Today"当日のリンクに表示するテキストを指定します。showButtonPanelオプションを指定するとこのボタンを表示します。dateFormat型:String初期値:"mm/dd/yy"解析と表示をする日付のフォーマットを指定します。指定可能なフォーマットについては、日付フォーマットの項目を参照してください。"Saturday"]長め曜日名のリストを指定します。開始は日曜日からになります。]短縮された曜日名のリストを指定します。開始は日曜からになります。カレンダーのヘッダーで使用されます。]短めの曜日名のリストを指定します。開始は日曜日からになります。String初期値:nullページが開かれた際に、テキストフィールドが空だった場合、ハイライトされる日付を指定します。例:'+1m+7d')をすることが出来ます。nullが指定されると当日が設定されます。Date指定する日付オブジェクトNumber当日を基準とした数値を指定します。2は当日から2日後を、-1は昨日を表します。StringdateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。+7d"は当日から1ヶ月と7日後が指定されます。)duration型:String初期値:"normal"DatePickerが表示されるスピードを指定します。firstDay型:Integer初期値:0週の始まりの曜日を指定します。0なら日曜日、1なら月曜日になります。gotoCurrent型:Boolean初期値:falsetrueが指定されると、「当日リンク」先が当日の代わりに選択されている日付に移動するようになります。hideIfNoPrevNext型:Boolean初期値:false標準では、次の月へと前の月へのリンクは有効でなければ無効化状態になります。このオプションにtrueを指定すれば、この場合に非表示になります。isRTL型:Boolean初期値:false現在の言語を右から左に表示するか否かを指定します。String初期値:null選択可能な最大日付を指定します。nullを指定すると無制限になります。Date指定する日付オブジェクトNumber当日を基準とした数値を指定します。2は当日から2日後を、-1は昨日を表します。StringdateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。+7d"は当日から1ヶ月と7日後が指定されます。String初期値:null選択可能な最大日付を指定します。nullを指定すると無制限になります。Date指定する日付オブジェクトNumber当日を基準とした数値を指定します。2は当日から2日後を、-1は昨日を表します。StringdateFormatオプションで定義された日付の文字列か、相対日付の文字列を指定します。相対日付は期間区切りを含む組み合わせを含む必要があります。+7d"は当日から1ヶ月と7日後が指定されます。]月のフルネームのリストを指定します。]短めの月名のリストを指定します。navigationAsDateFormat型:Boolean初期値:falseprevTextとnextTextのオプションを日付フォーマットに沿って変換したものを表示するか否かを指定します。nextText型:String初期値:"Next"次の月へのリンクのテキストを指定します。標準のThemeRollerのスタイルであれば、この値はアイコンに置き換えられます。Array初期値:11度に表示する月の数を指定します。Number1つの行に表示する月の数を指定します。Array表示する行と列の数を指定します。inst)初期値:nullDatePickerが新しい月、または年に移動した際に呼び出さしたい関数を指定します。この関数は指定した年、月(1~12)、また、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。)初期値:null日付が選択された、されないに関わらずDatePickerが閉じられた際に呼び出したい関数を指定します。この関数は日付文字列(未選択時は"")と、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。)初期値:null日付が選択された際に呼び出したい関数を指定します。この関数は日付文字列と、DatePickerのインスタンスを引数として受け取ります。関数内のthisは関連しているinputフィールドを参照します。prevText型:String初期値:"prev"前の月へのリンクのテキストを指定します。標準のThemeRollerのスタイルであれば、この値はアイコンに置き換えられます。selectOtherMonths型:Boolean初期値:false現在の月の前、または後ろに表示される他の月の日付を選択可能にするか否かの指定をします。showOtherMonthsオプションがtrueの場合のみ、適用されます。String初期値:"+10"dateFormatで'y'(年を2桁)を使用した場合、世紀を切り替える基準を設定します。それより大きい値であれば、前の世紀(1900年)とみなされます。Number0~99の切り離す年を指定します。String現在の年の相対で指定します。"-5")showAnim型:String初期値:"show"DatePickerが表示/非表示される際のアニメーション名を指定します。Effectで定義されているものを使用します。空文字列を指定すると、アニメーションがオフになります。showButtonPanel型:Boolean初期値:falseボタンパネルを表示するか否かを指定します。showCurrentAtPos型:Number初期値:0numberOfMonthsを通して複数の月を表示する際に、現在の月をどの位置に表示するかを指定します。showMonthAfterYear型:Boolean初期値:falseヘッダー内で年の後ろに月を表示するか否かを指定します。showOn型:String初期値:"focus"DatePickerが表示されるイベントを指定します。両方のイベントで表示したいのであれば"both"を指定します。このオプションを通して更に追加の設定を行うことが可能です。showOtherMonths型:Boolean初期値:false他の月の日付を現在の月の最初と終わりに表示するか否かを指定します。selectOtherMonthsオプションを指定することで、選択可能になります。showWeek型:Boolean初期値:falsetrueを指定すると年による週を表示するカラム行を追加します。calculateWeekオプションによって週をどのように計算するか指定することが出来ます。firstDayオプションによって開始日を変更することも可能です。stepMonths型:Number初期値:1次へ/前へリンクをクリックした際に、移動する月数を指定します。weekHeader型:String初期値:"Wk"yearRange型:String初期値:"c-10:c+10"年選択のドロップダウンに表示する範囲を指定します。"-nn:+nn"現在の年の相対を指定"c-nn:c+nn"選択されている年の相対を指定"nnnn:-nn"上記の組み合わせで指定yearSuffix型:String初期値:""月のヘッダーに表示する年の後ろに続く文字列を指定します。メソッド説明destroy()DatePickerの機能を完全に削除します。])DatePickerをダイアログボックスで開きます。Date初期値となる日付を指定します。onSelect型:Function()日付を選択した際のコールバック関数を指定します。この関数はパラメータとして、日付テキストとDatePickerインスタンスを受け取ります。settings型:OptionsDatePickerに指定した新しい設定を適用します。MouseEventダイアログの表示位置を指定します。[x,y]の配列でtop/leftの位置、または座標情報を含むマウスイベントを指定します。指定がない場合は、スクリーンの中心に表示されます。getDate()戻り値:Date選択している日付の値を返します。未選択の場合は、nullを返します。hide()開かれているDatePickerを閉じます。isDisabled()戻り値:BooleanDatePickerがdisable状態か否かを調べます。)戻り値:ObjectoptionNameに指定したオプションの現在の値を取得します。optionName型:String取得したいオプションの名前を指定します。option()戻り値:PlainObjectオプションの各キーと値がペアとなったオブジェクトを返します。)引数のoptionNameのオプションに値を設定します。optionName型:String設定したいオプションの名前を指定します。value型:Object設定したい値を指定します。)オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。option型:Object設定したいオプションのキーと名前のペアを指定します。refresh()DatePickerの再描画します。setDate(date)DatePickerに設定する日付を指定します。+7d")が可能です。nullを指定すると設定した日付がクリアされます。DatePickerを表示します。テキストフィールドに紐付けている場合は、テキストフィールドが表示されいている状態にしてください。widget()戻り値:ObjectDatePickerを含めたjQueryオブジェクトを返します。