日付ピッカー

<input type="text"> を、隣にボタンを含むフィールドに変更します。 このボタンは、日付選択カレンダーを開くのに使用できます。ユーザーは、入力エリアに日付を 入力するか、またはピッカー・ボタンをクリックしてカレンダーから日付を選択することができます。

複合コンポーネントは、<input> タグと同じサイズおよび形状を持ち、 入力フィールドは、それに設定されたその他の設定 (例えば入力支援) を保持します。

コンポーネントは DateTimeConverter と同じカレンダーを使用します。

JSFDatePicker コンポーネントは、カレンダーのオープンおよびその後の日付の選択に使用できる入力フィールドに、 ヘルパー・ボタンを追加します。

ヘルパー・ボタンは、入力フィールドの右側に追加されます。入力フィールドの 元の特性はすべて、ヘルパー・ボタンが追加された後もその制約内で維持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。このボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。

カレンダーを含むポップアップの振る舞いは、 Windows® ポップアップと同じです。 ポップアップで日付をクリックすると、ポップアップが表示されなくなります。ポップアップの外側のページで任意の場所を クリックすると、ポップアップが表示されなくなります。ポップアップは通常、 入力フィールドの下に、左端に位置合わせして表示されます。ポップアップが入力フィールドの下に 収まらない (例えば、入力フィールドがウィンドウの下部付近にある) 場合、 入力フィールドの上に表示されます。これは、CSS クラスを介してスタイル設定できます。

JSFDatePicker では DateTimeConverter が必要です。 コンバーターは、入力フィールドの値 (ストリング) を JavaScript™ 日付オブジェクトに変換する場合、またはその逆を行う場合に使用されます。 また、カレンダーに表示される月、年、および曜日のフォーマットにも使用されます。 コンバーターを構成してから日付ピッカーを構成し、 コンバーターの ID を日付ピッカーに渡す必要があります。入力フィールドは DateTimeValidator や DateTimeAssist コンポーネントに関連付けることもできます。 バリデーターは、入力フィールドに関連付けられる場合、 (コンストラクターの属性として) JSFDatePicker に渡される必要があります。支援が 入力フィールドに関連付けられる場合は、JSFDatePicker に関連付ける必要はありません。

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

<hx:inputText>

基本 HTML

<input type="text">

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

型テキストの入力に関連付けられたすべての属性が サポートされています。

型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。

JavaScript コンストラクター

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

id

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

属性

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

属性

表 1. 日付ピッカー属性

属性名

説明

button-border

入力フィールドに対するポップアップ・ボタンの表示方法を制御します。

button-color

ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。

css-prefix

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

converter

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

first-day-of-week

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

multi-line

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

validator

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

CSS クラス

ピッカーの CSS は複雑です。入力タグに適用されるクラスは入力フィールドをスタイル設定し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定します。2 番目の独立したクラスのセットは、 ポップアップをスタイル設定します。css-prefix 属性を使用して個々のポップアップの表示を オーバーライドしない限り、このクラスのセットは、ページ内のすべてのポップアップに適用されます。 ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の基底クラス名があり、 ポップアップのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。

デフォルトでは、カレンダーは、基底クラス inputText_DatePicker を使用してスタイル設定されます。 css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。

入力フィールドで指定されるクラスは、 入力フィールドおよび関連付けられたボタンをスタイル設定します。 個々のコンポーネントで css-prefix 属性が指定されない限り、 ページ内のすべての日付ピッカー・ポップアップはクラス inputText_DatePicker (および関連付けられたサブクラス) によって スタイル設定されます。

表 2. 日付ピッカー CSS クラス

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

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

注:
  • 古いバージョンの日付ピッカーはクラス <base>-CurrentOtherDay を使用していました。 ピッカーの変更のため、このクラスは使用されなくなりました。
  • ポップアップをスタイル設定する基底クラスは、一部のブラウザーでポップアップ div に適用される 3 種類の効果をサポートします。 すべてのブラウザーがこれらの効果をサポートしているわけではありません。ブラウザーが効果をサポートしていない場合、 その効果は描画されません。
    メニューの背景を透明にする (背景のみ、前景のテキストは透明にしない) には、次のようにします。
    -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)。影は、メニューの右側と下部に描画されます。

    IE (のみ) で、トランジション効果をメニューに適用できます (例えば、所定の位置にスライドできます)。これは、IE フィルター効果を使用して指定します。 例えば、次のようにします。
    filter:progid:DXImageTransform.Microsoft.Inset(duration=.4);

    フィルターが検出された場合、フィルターはメニューが表示されるまで保留されます (再生されません)。 例えば、フィルターは、メニューのスタイルが可視に変更される前に適用され、 その後で「再生」されます。

    Microsoft® は 現在、トランジションが任意の種類のテキストに適用されている場合は、トランジション・フィルターの使用を推奨していません。 これは、トランジションの実行中にテキストが太字および黒で 表示されるという、ClearType コードのバグがあるためです。 (これは、ClearType サブピクセル・レンダリング・アルゴリズム内の本質的な弱点によるもので、修正できません。 ClearType は、LCD/プラズマ・ディスプレイを使用するマシンでのみ使用可能なので、 ユーザーはオンになっている状態を見たことがないかもしれません。)

API 呼び出し

表 3. 日付ピッカー API 呼び出し

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>

フィードバック