« ダイアログ | トップページ | 入力チェック »

2007年7月24日 (火)

時間指定

時間を指定するための画面部品を作成できる。カレンダーと同様に、その場で表示されるTimePickerと、ボタンを押すと表示されるDropdownTimePickerの2つがある。

TimePicker

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

TimePickerの選択は、onValueChangedイベントとして受け取ることができる。選択した日付の値は、TimePicker widgetオブジェクトのtimeプロパティにより、Dateオブジェクトとして取得できる。

以下に示す例では、時間を選択すると入力フォームに選択した時間が入力されます。

<script type="text/javascript">
function init(){
    dojo.event.connect(dojo.widget.byId('tp'),'onValueChanged', 'getTimePickerValue');
}
function getTimePickerValue(){
  dojo.byId('tpinput').value = dojo.widget.byId('tp').time;
}
dojo.addOnLoad(init);
</script>

<div dojoType="TimePicker" id="tp"></div>
<input id="tpinput"  size="35">

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

属性概要
lang ロケールを指定することで、AM/PMの文字が変わる。"en-us", "nl-nl", "zh-cn", "zh-tw", "ja-jp", "fi-fi", "sv-se" を指定できる。指定しないとブラウザのロケールに従って表示される
useDefaultTime trueを指定すると現在の時(hour)が設定される
useDefaultMinutes trueを指定すると現在の分(minutes)が設定される
storedTime 2005-06-30T08:05 のように、表示される時刻をRFC 3339の形式で設定する

DropdownTimePicker

DropdownTimePickerは、input要素に対して dojoType="dropdowntimepicker" を指定して作成する。DropdownTimePickerで選択した値は自動生成された入力フォームに表示されるので、入力フォームから容易に値を取り出すことが出来る。
<script type="text/javascript">
dojo.require("dojo.widget.DropdownTimePicker");
</script>

<input id="ddt" dojoType="dropdowntimepicker">

DropdownTimePickerは、以下の属性を指定できる。

属性概要
value12:00のようにデフォルト値を指定できる
containertoggleDropdownTimePickerを表示するときの効果として、wipe, explode, fadeを指定できる
containerToggleDurationcontainertoggleで指定した効果の実行時間をミリ秒単位で指定する
langロケール
displayFormatHH:mmのように入力フォームに表示するときのフォーマットを指定する

« ダイアログ | トップページ | 入力チェック »

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 時間指定:

« ダイアログ | トップページ | 入力チェック »