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