カレンダー

<input type='text'> および <div> を ミニ・カレンダーに変更して、表示させることができます。 このカレンダーには、関連する不可視の入力フィールドが付いており、 カレンダーの値 (現在選択されている日付) が保持されています。

CSS を介して、ミニ・カレンダーにスタイルを適用できます。 コンポーネントによって、DateTimeConverter と同じ方法でカレンダーを処理します。

コンポーネントを発行する JSF タグ

<hx:inputMiniCalendar>

基本 HTML

<input type="text" id="id_INPUT"><div id="id">

カレンダーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合、カレンダーは初期値を持ちません。

カレンダーに関連付けるイベント・ハンドラーは、 入力フィールドで設定する必要があります。 現在のところ、onfocus、onblur、および onchange のみが サポートされています。

JSFCalendar コンポーネントによって、 ミニ・カレンダーと関連する (不可視の) 入力フィールドを 表示します。

カレンダーの値 (カレンダー内で現在選択されている値) は、 この入力フィールドに保持されます。 入力フィールドはアクティブになっているため、 ページの送信時に、このフィールド内のサーバー間で、 選択された値が伝送されます。

可視状態のカレンダーは、div として表示されます。 そのスタイルは、以下のリストにある CSS クラスの セットを介して設定されます。

このカレンダーでは、DateTimeConverter を介して、 すべてのカレンダー・タイプ (グレゴリオ暦など) を サポートしています。 入力フィールドの 値 (ストリング) を JavaScript™ データ・ オブジェクトに変更する場合、またはその逆を行う場合に、 コンバーターが使用されます。 また、カレンダーに表示される月、年、 および曜日のフォーマットにも使用されます。 カレンダーが構成されて、 コンバーターの ID がカレンダーに渡される前に、 コンバーターを構成しておく必要があります。 入力フィールドは、DateTimeValidator にも関連付けることができます。 バリデーターは、入力フィールドに関連付けられる 場合、(コンストラクターの属性として) カレンダーに 渡される必要があります。

JavaScript コンストラクター

hX_5.addComponent("id", new hX_5.JSFCalendar(attributes)); 各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

属性

表 1. JSFCalendar 属性

属性名

説明

css-prefix

カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。

converter

構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。

disabled

オブジェクトを使用可能にするかどうかを指定します。

first-day-of-week

週の 1 日目として処理される曜日。 ゼロにすると、日曜日になります。

multi-line

true の場合、 カレンダー上部のヘッダーが 2 行 (年と月) で表示され、 月と年を制御するボタンが、それぞれ別に表示されます。 false の場合、年と月は 1 行で表示され、 月のみを制御するボタンが表示されます。

validator

構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。

CSS クラス

クラス構造は、カレンダーが使用しないサイズ・クラスを除き、 日付ピッカーと同じです。

表 2. JSFCalendar CSS クラス

CSS クラス名

説明

base

カレンダーを含む最外部の div のスタイルを設定します。 カレンダーのサイズを明示的に制御するには、 このクラスの幅 (高さ) のプロパティーを指定します。

<base>-size

カレンダーをヘッダーと本文の領域に編成する、 最外部の表のスタイルを設定します。

<base>-Header

カレンダー表の内側にある、3 つの ヘッダー行 (年の行、月の行、曜日の行) を含む表のスタイルを設定します。

<base>-HeaderLine1

ヘッダー・テーブル内で、 表の 1 行目 (年の行) にある、年を含まないセルのスタイルを設定します。

<base>-HeaderLine2

ヘッダー・テーブル内で、 表の 2 行目 (月の行) にある、月を含まないセルのスタイルを設定します。

<base>-HeaderWeekday

ヘッダー・テーブル内で、 表の 3 行目 (曜日の行) にあるセルのスタイルを設定します。

<base>-HeaderYear

ヘッダー・テーブル内で、 中央の表の 1 行目にある、年を含むセルのスタイルを設定します。

<base>-HeaderMonth

ヘッダー・テーブル内で、 中央の表の 2 行目にある、月を含むセルのスタイルを設定します。

<base>-Button

ヘッダー・テーブル内で、1 行目と 2 行目にある、4 つの ボタン (カレンダーのスクロールに使用します) の スタイルを設定します。

<base>-Body

カレンダー表の内側にある、日付を含む表のスタイルを設定します。

<base>-CurrentMonth

本文の表内で、 現在の月の日付を含む、表のセルのスタイルを設定します。

<base>-OtherMonth

本文の表内で、 現在の月ではない月の日付 (例えば、現在選択されている月の 日付の前後に表示する必要がある、前月/翌月の最後の日付) を含む、 表のセルのスタイルを設定します。

<base>-InvalidDay

本文の表内で、 日付に付加されるバリデーターによって許可されないために、 選択できない日付を含む、表のセルのスタイルを設定します。

<base>-CurrentDay

本文の表内で、 現在選択されている日付を含む、表のセルのスタイルを設定します。

<base>-Today

本文の表内で、 今日の日付を表す、表のセルのスタイルを設定します。

<base>-CurrentToday

本文の表内で、 現在選択されている日が今日の日付と同じである場合、 今日の日付と現在の選択内容の両方を表す、 表のセルのスタイルを設定します。

<base>-Hover

ある日付が マウスまたはキーボードでフォーカスされている場合に、 その日付のスタイルに追加されるスタイルを定義します。

API 呼び出し

表 3. JSF カレンダー API 呼び出し

API 呼び出し

説明

redraw()

基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。

uirelease()

コンポーネントに関連付けられたアクティブ UI をリリースします。

setValue(string)

コンポーネントの値を設定し、提供された値が有効であることを確認します。

object = getValue(boolean)

コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript の 日付/時刻オブジェクトとして、値が戻されます。

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

アクセシビリティ

カレンダーには、キーボードによるアクセスが可能です。 カレンダーは、(単一エントリーとして) ページ内のタブ順序に組み込まれます。 カレンダーにキーボード・フォーカスがある場合 (例えば、 タブ・キーやマウス・クリックなどによって、 カレンダーが選択された場合)、現在選択されている日付を (物理的フォーカスを保持する) 入力フィールドの値として、 スクリーン・リーダーで使用することができます。 カレンダーがフォーカスされているときに スペース・バー (または改行キー) を押すと、 現在選択されている日が選択されます。 左、右、上、および下の矢印キーを押すと、選択される日が変更されます。 SHIFT と左/右の矢印キーを押すと月が変わり、SHIFT と 上/下の矢印キーを押すと選択される年が変わります。 PgUp または PgDn を押すと月が変わります。 Home または End を押すと、月の初日または最終日に移動します。

現在のところ、カレンダーでは XML 役割または状態のレポートを 作成していません (XHTML には準拠しています)。

制限

サンプル・コード

ヒジュラ暦のカレンダーを、ページに追加します。 有効な日付を、ヒジュラ暦 1427 年の日付のみに制限します。

<input type="text" id="form1:calendar1_INPUT" value="Muharram 01, 1427 AH" />
<div id="form1:calendar1" />
<script>
hX.addConverter("A", new hX.DateTimeConverter("strict:1", "ICU4J", "epoch:i", format:MMMM dd, yyyy G"));
hX.addValidator("B", new hX.DateTimeValidator("minimum-bound:20060130000000", "maximum-bound:20070118000000"));
hX.addComponent("form1:calendar1_CAL_DIV", new hX.JSFCalendar("converter:A","validator:B", "first-day-of-week:6", "multi-line:false"));
</script>

フィードバック