« コンボボックス | トップページ | ダイアログ »

2007年7月22日 (日)

カレンダー

カレンダーを表示して日付を選択させることができる。カレンダーには、その場で表示されるDatePickerと、ボタンを押すと表示されるDropdownDatePickerの2つがある。

DatePicker

<script type="text/javascript">
dojo.require("dojo.widget.DatePicker");
</script>

<div dojoType="datepicker" widgetId="foo">

DatePickerの日付選択は、onValueChangedイベントとして受け取ることができる。 選択した日付の値を取得するには、DatePickerのwidgetに対して、getValue()またはgetDate()メソッドを実行する。getValue()では日付を文字列として取得し、getDate()ではDateオブジェクトとして取得できる。

setValue()、setDate()で日付を指定することで、DatePickerにおいて指定した日付を選択させることもできる。

以下に示す例では、DatePickerで日付を選択するとその文字列を入力フォームに表示する。また、ボタン「setDate」を押すと入力フォームに入力した日付が、DatePicker上で選択される。

<script type="text/javascript">
dojo.addOnLoad(init);
function init(){
  dojo.event.connect(dojo.widget.byId('cl'),'onValueChanged','setInput');
  dojo.event.connect(dojo.byId('setDate'),'onclick','setDatePicker');
};

function setInput(){
  var checked = dojo.widget.byId('cl').getDate();
  dojo.byId('date').value = dojo.date.format(checked, {formatLength:'medium',selector:'dateOnly', locale:'ja-jp'});
}

function setDatePicker(){
  var date = dojo.date.parse(dojo.byId('date').value, {formatLength:'medium', locale:'ja-jp'});
  dojo.widget.byId('cl').setDate(date);
}


<div dojoType="datepicker" widgetId="cl">

dojoType="DatePicker"を指定した要素では、以下の属性を指定できる。

属性概要
lang ロケールを指定することで、カレンダーの月と曜日の文字が変わる。"en-us", "nl-nl", "zh-cn", "zh-tw", "ja-jp", "fi-fi", "sv-se", "xx"を指定できる。xxを指定すると全て数字で表示される。指定しないとブラウザのロケールに従って表示される
displayWeeks 何週目まで表示するかを固定で指定する
staticDisplay trueを指定すると月や年を変更できなくなる
value "2005-12-25"のように、指定した日が選択された状態でカレンダーが表示される。"today"を指定すると今日が選択された状態となる
weekStartsOn 左端が何曜日になるか指定する。0が日曜日、1が月曜(デフォルト)、2が火曜とずれていく
adjustWeeks trueを指定すると、displayWeeksの値がその月の日を全て表示する最小限の行だけが表示されるようになる
startDate 指定した日("2006-09-10")以前の日を選択できなくなる
endDate 指定した日("2006-09-10")以降の日を選択できなくなる

DropdownDatePicker

DropdownDatePickerは、input要素に対して dojoType="dropdowndatepicker" を指定して作成する。DropdownDatePickerで選択した値は入力フォームに表示されるので、入力フォームから値を取り出すことが出来る。

<script type="text/javascript">
dojo.require("dojo.widget.DropdownDatePicker");
</script.

<input id="ddcl" dojotype="dropdowndatepicker" />

DropdownDatePickerは、DatePickerで指定できる属性に加えて、以下の属性を指定できる。

属性概要
containerToggle カレンダーを表示するときの効果として、wipe, explode, fadeを指定できる
containerToggleDuration containerToggleで指定した効果の実行時間をミリ秒単位で指定する
displayFormat 入力フォームに表示するときのフォーマット指定。yyyy/MM/ddなど
formatLength 入力フォームに表示する日付のフォーマットを長さ、long, medium, shortで指定する
saveFormat フォームの値として取り出すときのフォーマット指定。rfc, posix, yyyy/MM/ddなど

« コンボボックス | トップページ | ダイアログ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7235417

この記事へのトラックバック一覧です: カレンダー:

« コンボボックス | トップページ | ダイアログ »