複合コンポーネントは、<input> タグと同じサイズおよび形状を持ち、 入力フィールドは、それに設定されたその他の設定 (例えば入力支援) を保持します。
コンポーネントは DateTimeConverter と同じカレンダーを使用します。
JSFDatePicker コンポーネントは、カレンダーのオープンおよびその後の日付の選択に使用できる入力フィールドに、 ヘルパー・ボタンを追加します。
ヘルパー・ボタンは、入力フィールドの右側に追加されます。入力フィールドの 元の特性はすべて、ヘルパー・ボタンが追加された後もその制約内で維持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。このボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。
カレンダーを含むポップアップの振る舞いは、 Windows® ポップアップと同じです。 ポップアップで日付をクリックすると、ポップアップが表示されなくなります。ポップアップの外側のページで任意の場所を クリックすると、ポップアップが表示されなくなります。ポップアップは通常、 入力フィールドの下に、左端に位置合わせして表示されます。ポップアップが入力フィールドの下に 収まらない (例えば、入力フィールドがウィンドウの下部付近にある) 場合、 入力フィールドの上に表示されます。これは、CSS クラスを介してスタイル設定できます。
JSFDatePicker では DateTimeConverter が必要です。 コンバーターは、入力フィールドの値 (ストリング) を JavaScript™ 日付オブジェクトに変換する場合、またはその逆を行う場合に使用されます。 また、カレンダーに表示される月、年、および曜日のフォーマットにも使用されます。 コンバーターを構成してから日付ピッカーを構成し、 コンバーターの ID を日付ピッカーに渡す必要があります。入力フィールドは DateTimeValidator や DateTimeAssist コンポーネントに関連付けることもできます。 バリデーターは、入力フィールドに関連付けられる場合、 (コンストラクターの属性として) JSFDatePicker に渡される必要があります。支援が 入力フィールドに関連付けられる場合は、JSFDatePicker に関連付ける必要はありません。
<hx:inputText>
<input type="text">
日付ピッカーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合、 ピッカーは初期値を持ちません。
型テキストの入力に関連付けられたすべての属性が サポートされています。
型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。
hX_5.addComponent("id", new hX_5.JSFDatePicker(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
button-border |
入力フィールドに対するポップアップ・ボタンの表示方法を制御します。 |
button-color |
ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。 |
css-prefix |
カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。 |
converter |
構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。 |
first-day-of-week |
週の 1 日目として処理される曜日。 ゼロにすると、日曜日になります。 |
multi-line |
true の場合、 カレンダー上部のヘッダーが 2 行 (年と月) で表示され、 月と年を制御するボタンが、それぞれ別に表示されます。 false の場合、年と月は 1 行で表示され、 月のみを制御するボタンが表示されます。 |
validator |
構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。 |
ピッカーの CSS は複雑です。入力タグに適用されるクラスは入力フィールドをスタイル設定し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定します。2 番目の独立したクラスのセットは、 ポップアップをスタイル設定します。css-prefix 属性を使用して個々のポップアップの表示を オーバーライドしない限り、このクラスのセットは、ページ内のすべてのポップアップに適用されます。 ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の基底クラス名があり、 ポップアップのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。
デフォルトでは、カレンダーは、基底クラス inputText_DatePicker を使用してスタイル設定されます。 css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。
入力フィールドで指定されるクラスは、 入力フィールドおよび関連付けられたボタンをスタイル設定します。 個々のコンポーネントで css-prefix 属性が指定されない限り、 ページ内のすべての日付ピッカー・ポップアップはクラス inputText_DatePicker (および関連付けられたサブクラス) によって スタイル設定されます。
CSS クラス名 |
説明 |
---|---|
base_DatePicker |
カレンダーを含む div のスタイルを設定します。 div のサイズ (幅/高さ) を設定しても、 その内部のカレンダーのサイズは変更されませんので、 注意してください。 カレンダーのサイズを変更するには、<base>-Size を使用します。 |
<base>-DatePicker-Size |
カレンダーを表示する表のスタイルを設定します。 この表は、 それを収容するポップアップ div の内側に埋め込まれます。 表の幅と高さを変更すると、 カレンダーのサイズが変更されます (収容 div のサイズも、 この表に合わせて変更されます)。 |
<base>_DatePicker-Header |
カレンダー表の内側にある、3 つの ヘッダー行 (年の行、月の行、曜日の行) を含む表のスタイルを設定します。 |
<base>_DatePicker-HeaderLine1 |
ヘッダー・テーブル内で、 表の 1 行目 (年の行) にある、年を含まないセルのスタイルを設定します。 |
<base>_DatePicker-HeaderLine2 |
ヘッダー・テーブル内で、 表の 2 行目 (月の行) にある、月を含まないセルのスタイルを設定します。 |
<base>_DatePicker-HeaderWeekday |
ヘッダー・テーブル内で、 表の 3 行目 (曜日の行) にあるセルのスタイルを設定します。 |
<base>_DatePicker-HeaderYear |
ヘッダー・テーブル内で、 中央の表の 1 行目にある、年を含むセルのスタイルを設定します。 |
_DatePicker<base>-HeaderMonth |
ヘッダー・テーブル内で、 中央の表の 2 行目にある、月を含むセルのスタイルを設定します。 |
<base>_DatePicker-Button |
ヘッダー・テーブル内で、1 行目と 2 行目にある、4 つの ボタン (カレンダーのスクロールに使用します) の スタイルを設定します。 |
<base>_DatePicker-Body |
カレンダー表の内側にある、日付を含む表のスタイルを設定します。 |
<base>_DatePicker-CurrentMonth |
本文の表内で、 現在の月の日付を含む、表のセルのスタイルを設定します。 |
<base>_DatePicker-OtherMonth |
本文の表内で、 現在の月ではない月の日付 (例えば、現在選択されている月の 日付の前後に表示する必要がある、前月/翌月の最後の日付) を含む、 表のセルのスタイルを設定します。 |
<base_>DatePicker-InvalidDay |
本文の表内で、 日付に付加されるバリデーターによって許可されないために、 選択できない日付を含む、表のセルのスタイルを設定します。 |
<base>_DatePicker-CurrentDay |
本文の表内で、 現在選択されている日付を含む、表のセルのスタイルを設定します。 |
<base>_DatePicker-Today |
本文の表内で、 今日の日付を表す、表のセルのスタイルを設定します。 |
<base>_DatePicker-CurrentToday |
本文の表内で、 現在選択されている日が今日の日付と同じである場合、 今日の日付と現在の選択内容の両方を表す、 表のセルのスタイルを設定します。 |
<base>_DatePicker-Hover |
ある日付が マウスまたはキーボードでフォーカスされている場合に、 その日付のスタイルに追加されるスタイルを定義します。 |
-moz-opacity: .9; opacity: .9;
スタイルが Mozilla および Internet Explorer (IE) で レンダリングできるように、どちらのプロパティーも提供する必要があります。不透明の値は、 0 と 1 の間でなければなりません。
outline-color: #E4E4E5; outline-width: 1px; -moz-outline-color: #E4E4E5; -moz-outline-width: 1px;
Mozilla および IE ブラウザーが メニューをレンダリングするには、どちらのプロパティーのセットも提供される必要があります。色は、 立体の影の最も濃い部分の色を指定します。幅は、立体の影付けの幅を指定します (最小 1)。影は、メニューの右側と下部に描画されます。
filter:progid:DXImageTransform.Microsoft.Inset(duration=.4);
フィルターが検出された場合、フィルターはメニューが表示されるまで保留されます (再生されません)。 例えば、フィルターは、メニューのスタイルが可視に変更される前に適用され、 その後で「再生」されます。
Microsoft® は 現在、トランジションが任意の種類のテキストに適用されている場合は、トランジション・フィルターの使用を推奨していません。 これは、トランジションの実行中にテキストが太字および黒で 表示されるという、ClearType コードのバグがあるためです。 (これは、ClearType サブピクセル・レンダリング・アルゴリズム内の本質的な弱点によるもので、修正できません。 ClearType は、LCD/プラズマ・ディスプレイを使用するマシンでのみ使用可能なので、 ユーザーはオンになっている状態を見たことがないかもしれません。)
API 呼び出し |
説明 |
---|---|
redraw() |
基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。 |
uirelease() |
コンポーネントに関連付けられたアクティブ UI をリリースします。 |
setValue(string) |
コンポーネントの値を設定し、提供された値が有効であることを確認します。 |
object = getValue(boolean) |
コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript の 日付/時刻オブジェクトとして、値が戻されます。 |
object = setAttribute(attribute) |
属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。 |
string = getAttribute(attribute-name) |
属性の現行値を取得します。 |
日付ピッカーは完全に キーボードでアクセス可能です。入力フィールドと日付ピッカー・ボタンはどちらも、 タブ順序に組み込まれています。入力フィールドでは、上矢印および下矢印キーを使用して、 1 日ずつ日付を増分/減分することができます。上/下矢印を押すと、 キーを放すまで、日付が 1 日ずつ増分してスピンします。 ボタンにフォーカスがある場合、スペース・バーまたは改行を押すとカレンダーが表示され、 カレンダー内の現在の選択にフォーカスが移動します。カレンダーにフォーカスがある場合、 スペース・バーまたは改行を押すと、現在選択されている日付が選択されます (カレンダーは閉じて、フォーカスがボタンに戻されます)。 ESC を押すとカレンダーが閉じ、 フォーカスがボタンに戻され、値は変更されません。 左、右、上、および下の矢印キーを押すと、選択される日が変更されます。 SHIFT と左/右の矢印キーを押すと月が変わり、SHIFT と 上/下の矢印キーを押すと選択される年が変わります。
日付ピッカーでは 現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。これは早急に追加されます。
日付のフォーマットが MMM d,yyyy であるフィールドに日付ピッカーを追加します。有効な日付を、 2 月を開始点として、1 カ月おきの日付のみに制限します。
<input type="text" id="form1:text01" class="inputText" size="20" value="Feb 3, 2006" /> <script> hX.addConverter("c", new hX.DateTimeConverter("strict:1", "format:MMM d, yyyy")); hX.addValidator("20", new hX.DateTimeValidator("constraint-expression:@testValue.month==1 || @testValue.month==3 || @testValue.month==5 || @testValue.month==7 || @testValue.mongth==9 || @testValue.month==11")); hX.addComponent("form1:text01", new hX.JSFDatePicker("converter:c","validator:20", "first-day-of-week:0")); </script>