Lightning コンポーネント開発者ガイド
j日時項目
日時項目では、クライアント側のローカライズ、日付ピッカー、共通のキーワードイベントとマウスイベントがサポートされます。このような項目コンポーネントから出力を表示する場合は、それぞれの ui:output コンポーネントを使用します。たとえば、ui:inputDate コンポーネントの出力を表示するには、ui:outputDate を使用します。
日時項目は、次のコンポーネントで表されます。
| データ型 | 説明 | 関連コンポーネント |
|---|---|---|
| 日付 | text 型の日付を入力するための入力項目。 |
ui:inputDate ui:outputDate |
| 日時 | text 型の日時を入力するための入力項目。 |
ui:inputDateTime ui:outputDateTime |
日時項目の使用
次に、日付ピッカーを使用した日付項目の基本設定を示します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:inputDate aura:id="dateField" label="Birthday" value="2000-01-01" displayDatePicker="true"/>この例の結果、次の HTML になります。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="uiInput uiInputDate">
18 <label class="uiLabel-left uiLabel">
19 <span>Birthday</span>
20 </label>
21 <input placeholder="MMM d, yyyy" type="text" class="uiInput uiInputDate">
22 <a class="datePicker-openIcon" aria-haspopup="true">
23 <span class="assistiveText">Date Picker</span>
24 </a>
25 <div class="uiDatePicker">
26 <!--Date picker set to visible when icon is clicked-->
27 </div>
28</div>項目値のバインド
{!v.myAttribute.Name} または {!v.myAttribute.namespace__MyField__c} などの式を使用し、Apex コントローラで入力値を保存することで、オブジェクトの項目に項目値をバインドできます。「スタンドアロン Lightning アプリケーションを作成する」の例を参照してください。
日時項目のスタイル設定
日時項目の外観と、コンポーネントの CSS リソースでの出力のスタイルを設定できます。
次の例は、myStyle セレクタを使用して ui:inputDateTime コンポーネントにスタイルを設定します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Component markup -->
18<ui:inputDateTime class="myStyle" label="Date" displayDatePicker="true"/>
19
20/* CSS */
21.THIS .myStyle {
22 border: 1px solid #dce4ec;
23 border-radius: 4px;
24}