datepickerにおけるオプション(datepicker)

これまで、datepicker()を以下のように引数なしで使用してきました。

$('.datepicker').datepicker();

しかし、datepickerにはたくさんのオプションが用意されており、そのオプションの
設定を引数で行います。

オプションは以下のように、json形式で指定します。

$('.datepicker').datepicker({
    オプション名1:'値1',
    オプション名2:'値2',
    オプション名3:'値3'
});

オプションには以下のものがあります。

オプション名 デフォルト 説明
showButtonPanel Boolean false カレンダーの左下に「Today」
カレンダーの右下に「Done」
を表示するか否かを設定する
appendText String “” カレンダーの入力フォームの後ろに出力されただけ。
changeMonth Boolean false trueにするとカレンダー表示の月の部分がドロップダウンになる。
changeYear Boolean false changeMonthと一緒だね
closeText

String “Done” showButtonPanelでtrueにすると出てくる右下のボタンの
表示名を変える。(クローズするためのボタン見たい)
altField Selector, jQuery, Element “”

http://alphasis.info/2011/06/jquery-ui-datepicker-altformat/

ここに詳しく載っている?

#getSetSinglePickerのフォームで日付を選択すると、altFieldで
指定された#actualDateのフォームに、altFormatで指定された形式で
情報が入力される。

$(‘#getSetSinglePicker’).datepicker({
dateFormat: ‘yy/mm/dd (D)’,
altField: ‘#actualDate’,
altFormat: ‘mm/dd’,
});

buttonImage String “”

http://alphasis.info/2011/06/jquery-ui-datepicker-buttonimage/

showOnオプションに”button”が選択されているときに有効になる。
showOnオプションを有効にしただけだと、単なるボタンがでてくるだけだが、
buttonImageオプションで画像を指定すればそれがボタン代わりとなる。

buttonImageOnly Boolean false

http://www.bugspray.co.jp/2011/06/jquery-datepicker.html

これがfalseだと、buttonImageで設定した画像がボタン上に表示される。

buttonText String “…” showOnを”button”で表示されるボタンの文字列を設定する。
buttonImageが有効であれば意味がない。
calculateWeek Function $.datepicker.
iso8601Week
年の初めから何週目かを計算する関数を登録する。
showWeekをtrueに設定すると何週目かの情報が表示されるようになるので、
これを設定していないと意味がない。
constrainInput Boolean true
currentText String “Today” showButtonPanelで表示される、カレンダーの左下にあるボタンの表示を設定する。
dateFormat String mm/dd/yy 日付の出力形式を設定する
yy:年
mm:月
dd:日
DD:曜日(ロング)
D:曜日(短縮形)
dayNames Array ["Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"]
曜日のロング名を設定する。
月曜日とか火曜日とか
dateFormatで”DD”に置き換わる文字列
dayNamesMin Array ["Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"]
曜日の最短表示名
dayNamesShort Array ["Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"]
曜日の短い表示名
dateFormatで”D”に置き換わる文字列
defaultDate Date, Number, String null 最初からハイライトしておきたい日付を指定する。
+7とかすると、現在から7日後
defaultDate: ‘+1m +1w’
上記のようにすると1ヵ月と1週間後をデフォルト日に設定する
mは月、yは日
duration String, Number “normal” カレンダーの表示スピードを設定する。
数値でミリ秒で設定するか、”slow”, “normal”, “fast”で設定する。
firstDay Number 0 週の最初の曜日を設定する。
日曜が0、月曜が1となる。
gotoCurrent Boolean false showButtonをtrueにした時に出てくるカレンダーの左下のcurrentボタンを
押したときに、今日の日付月に行くか、現在設定されている月に行くか。
trueだと現在設定されている月に行く。
hideIfNoPrevNext Boolean false 来月、or、先月がmaxDate, minDateで設定した有効範囲外だった場合、
next or prevリンクを隠すかどうか。
trueだと隠れる
minDate,maxDate Date, Number, String null 有効範囲を決める。
minDate:’-7d’,
maxDate:’+1m’
isRTL Boolean false 通常左から右に文字や部品が配置されていくが、
これをtrueにすると右から左になる。
まーつかわんか
monthNames Array ["January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"]
月の表示方法を変更する。↓こんな感じで設定。
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
カレンダーの上部に表示される。
“MM”で指定する
monthNamesShort Array ["Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"]
月の表示方法を変更する。↓こんなかんじで設定
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
“M”で指定する。

ここらへんのフォーマットは以下を参照する。

http://docs.jquery.com/UI/Datepicker/formatDate

navigationAsDateFormat Boolean false よくわからん
nextText, prevText String “Next”, “Prev” カレンダー上部の左右に表示される、次の月、および、前の月へのリンクに
カーソルを合わせた時に出てくる文字列の設定。
numberOfMonths Number, Array 1 表示するカレンダーの数。
showOtherMonths Boolean false 月ごとのカレンダーの余白に、前の月、及び次の月の終わりや最後の日付で埋めるか
どうか?
trueだと埋まる。
selectOtherMonths Boolean false showOtherMonthsをtrueにして見えるようになった、前後の月の日付を選択可能にするかどうか。
trueだと選択可能となる。
shortYearCutoff String, Number “+10″
showAnim String “show” カレンダー表示時のアニメーションを設定する。

“slideDown”, “fadeIn”, “show”など
以下を参照

http://docs.jquery.com/UI/Effects

showMonthAfterYear Boolean false 年月日の順で表示されるようになる。
showOn String focus “button”, “focus”, “both”が選択できる。
“button”を設定すると、フォームの右にボタンが出現し、
それを押すとカレンダーが表示される。
“focus”を設定すると、フォームをフォーカスした時に
カレンダーが表示される。
“both”の場合は上記のいずれの場合でもカレンダーが表示される。
showWeek Boolean false trueにすると、週の左に年始から数えて何週目かカレンダーの
各週(行)の右側に表示される。
stepMonths Number 1 prev or nextを押したときに何か月分移動するかを設定する。
weekHeader String Wk showWeekをしたときに表示される数値の一番上のタイトルとして
表示する文字列を設定する。
yearRange String “c-10:c+10″ changeYearをtrueにすると、カレンダーの年表示がドロップダウン
形式になる。
そのドロップダウンで表示される範囲を設定する。
yearRange: ’2012:2015′
yearSuffix String “” カレンダー上部に表示される年の右につける文字列を設定する。
どういうときにつかうんすかね?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>