CSS を介して、ミニ・カレンダーにスタイルを適用できます。 コンポーネントによって、DateTimeConverter と同じ方法でカレンダーを処理します。
<hx:inputMiniCalendar>
<input type="text" id="id_INPUT"><div id="id">
カレンダーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合、カレンダーは初期値を持ちません。
カレンダーに関連付けるイベント・ハンドラーは、 入力フィールドで設定する必要があります。 現在のところ、onfocus、onblur、および onchange のみが サポートされています。
JSFCalendar コンポーネントによって、 ミニ・カレンダーと関連する (不可視の) 入力フィールドを 表示します。
カレンダーの値 (カレンダー内で現在選択されている値) は、 この入力フィールドに保持されます。 入力フィールドはアクティブになっているため、 ページの送信時に、このフィールド内のサーバー間で、 選択された値が伝送されます。
可視状態のカレンダーは、div として表示されます。 そのスタイルは、以下のリストにある CSS クラスの セットを介して設定されます。
このカレンダーでは、DateTimeConverter を介して、 すべてのカレンダー・タイプ (グレゴリオ暦など) を サポートしています。 入力フィールドの 値 (ストリング) を JavaScript™ データ・ オブジェクトに変更する場合、またはその逆を行う場合に、 コンバーターが使用されます。 また、カレンダーに表示される月、年、 および曜日のフォーマットにも使用されます。 カレンダーが構成されて、 コンバーターの ID がカレンダーに渡される前に、 コンバーターを構成しておく必要があります。 入力フィールドは、DateTimeValidator にも関連付けることができます。 バリデーターは、入力フィールドに関連付けられる 場合、(コンストラクターの属性として) カレンダーに 渡される必要があります。
hX_5.addComponent("id", new hX_5.JSFCalendar(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
css-prefix |
カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。 |
converter |
構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。 |
disabled |
オブジェクトを使用可能にするかどうかを指定します。 |
first-day-of-week |
週の 1 日目として処理される曜日。 ゼロにすると、日曜日になります。 |
multi-line |
true の場合、 カレンダー上部のヘッダーが 2 行 (年と月) で表示され、 月と年を制御するボタンが、それぞれ別に表示されます。 false の場合、年と月は 1 行で表示され、 月のみを制御するボタンが表示されます。 |
validator |
構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。 |
クラス構造は、カレンダーが使用しないサイズ・クラスを除き、 日付ピッカーと同じです。
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 呼び出し |
説明 |
---|---|
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>