Ajaxフレームワーク UI部品リファレンス

2.4.3 CalendarButton

CalendarButtonは、PopupCalendarを表示するボタン部品です。PopupCalendarと組み合わせて指定します。

• 表示例
• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API

ボタンをクリックすること、またはフォーカス時にEnterキーまたはスペースキーを押すことで、PopupCalendarが表示されます。

■表示例

■記述形式

<div rcf:type="CalendarButton" rcf:target="popupCalendar1" ... ></div>

または

<span rcf:type="CalendarButton" rcf:target="popupCalendar1" ... ></span>

子要素は指定できません。

本部品は、以下のように表示されます。

• <div>タグの場合:前後に改行コードが挿入されます。
• <span>タグの場合:前後に改行コードは挿入されません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
alt	String	画像の代替テキストを指定します。	可	CalendarButton	値、バインド	可	不可
enabled	Boolean	ボタンの利用を許可するかどうか指定します。 true:許可する false:許可しない	可	true	値、バインド	可	不可
target	String	表示するPopupCalendarのIDを指定します。	不可	-	値	不可	不可
tabIndex	Number	Tabキーで移動するフォーカスの順番を指定します。 HTMLのtabindex属性と同様の指定ができます。1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。 FocusManagerによるフォーカス移動には関係しません。	可	0	値	可	不可

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

記述例

PopupCalendarやDateInputを組み合わせて表示するための記述例を、以下に示します。

 ...
<span rcf:type="DateInput" rcf:date="{model1.date}"></span>
<span rcf:type="CalendarButton" rcf:target="popupCalendar1"></span>
<div rcf:type="PopupCalendar" rcf:id="popupCalendar1" rcf:selectedDate="{model1.date}"></div>
 ...
<div rcf:type="Model" rcf:id="model1" ... ></div>
 ...

入力手順を以下に示します。

1. CalendarButtonをクリックします。
   ⇒PopupCalendarが表示されます。
2. PopupCalendarで日付を選択します。
   ⇒model1.dateを介してDateInputに日付が入力されます。

■スタイルプロパティ

パーツ名	プレフィックス	クラス名	指定可能なスタイル
部品全体	なし	rcf-CalendarButton	ボーダー verticalAlign

verticalAlignについて説明します。

名前	データ型	説明	省略値
verticalAlign	String	行内の上下の表示位置を指定します。 CSSのvertical-alignプロパティの値を指定できます。	baseline

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onFocus	部品がフォーカスを得たときに呼ばれます。	ActionEvent
onBlur	部品がフォーカスを失ったときに呼ばれます。

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

dblclickイベントは発生しません。最初のクリックでPopupCalendar(モーダル)が開くためです。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。