CalendarButtonは、PopupCalendarを表示するボタン部品です。PopupCalendarと組み合わせて指定します。
ボタンをクリックすること、またはフォーカス時にEnterキーまたはスペースキーを押すことで、PopupCalendarが表示されます。
表示例
記述形式
<div rcf:type="CalendarButton" rcf:target="popupCalendar1" ... ></div>
または
<span rcf:type="CalendarButton" rcf:target="popupCalendar1" ... ></span>
注意
子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。
ポイント
本部品は、以下のように表示されます。
<div>タグの場合:前後に改行コードが挿入されます。
<span>タグの場合:前後に改行コードは挿入されません。
プロパティ
表の項目の意味は、「Text」の「プロパティ」を参照してください。
名前 | データ型 | 説明 | 省略 | 省略値 | 属性指定 | 更新 | 部分更新 |
|---|---|---|---|---|---|---|---|
alt | String | 画像の代替テキストを指定します。 | 可 | CalendarButton | 値、バインド | 可 | 不可 |
enabled | Boolean | ボタンの利用を許可するかどうか指定します。
| 可 | true | 値、バインド | 可 | 不可 |
target | String | 表示するPopupCalendarのIDを指定します。 | 不可 | - | 値 | 不可 | 不可 |
tabIndex | Number | Tabキーで移動するフォーカスの順番を指定します。 | 可 | 0 | 値 | 可 | 不可 |
部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
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>
...入力手順を以下に示します。
CalendarButtonをクリックします。
⇒PopupCalendarが表示されます。
PopupCalendarで日付を選択します。
⇒model1.dateを介してDateInputに日付が入力されます。
スタイルプロパティ
パーツ名 | プレフィックス | クラス名 | 指定可能なスタイル |
|---|---|---|---|
部品全体 | なし | rcf-CalendarButton |
|
verticalAlignについて説明します。
名前 | データ型 | 説明 | 省略値 |
|---|---|---|---|
verticalAlign | String | 行内の上下の表示位置を指定します。 | baseline |
詳細は、「2.9 スタイルプロパティ」を参照してください。
イベントリスナ
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onFocus | 部品がフォーカスを得たときに呼ばれます。 | |
onBlur | 部品がフォーカスを失ったときに呼ばれます。 |
部品共通のイベントリスナもあります。詳細は、「2.8.2 画面部品共通イベントリスナ」を参照してください。
独自のキー操作を設定している場合は、「5.2.3 keypressイベントに関する注意事項 」および「5.2.5 部品に対するキー入力に関する注意事項」を参照してください。
ポイント
dblclickイベントは発生しません。最初のクリックでPopupCalendar(モーダル)が開くためです。
JavaScript API
固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。