この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

日時項目

日時項���では、クライアント側のローカライズ、日付ピッカー、共通のキーワードイベントとマウスイベントがサポートされます。このような項目コンポーネントから出力を表示する場合は、それぞれの ui:output コンポーネントを使用します。たとえば、ui:inputDate コンポーネントの出力を表示するには、ui:outputDate を使用します。

日時項目は、次のコンポーネントで表されます。

データ型 説明 関連コンポーネント
日付 text 型の日付を入力するための入力項目。 ui:inputDate

ui:outputDate
日時 text 型の日時を入力するための入力項目。 ui:inputDateTime

ui:outputDateTime

日時項目の使用

次に、日付ピッカーを使用した日付項目の基本設定を示します。

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputDate aura:id="dateField" label="Birthday" value="2000-01-01" displayDatePicker="true"/>

この例の結果、次の HTML になります。

1swfobject.registerObject("clippy.codeblock-1", "9");<div class="uiInput uiInputDate">
2  <label class="uiLabel-left uiLabel">
3    <span>Birthday</span>
4  </label>
5  <input placeholder="MMM d, yyyy" type="text" class="uiInput uiInputDate">
6  <a class="datePicker-openIcon" aria-haspopup="true">
7    <span class="assistiveText">Date Picker</span>
8  </a>
9  <div class="uiDatePicker">
10    <!--Date picker set to visible when icon is clicked-->
11  </div>
12</div>

項目値のバインド

{!v.myAttribute.Name} または {!v.myAttribute.namespace__MyField__c} などの式を使用し、Apex コントローラで入力値を保存することで、オブジェクトの項目に項目値をバインドできます。スタンドアロン Lightning アプリケーションを作成する の例を参照してください。

日時項目のスタイル設定

日時項目の外観と、コンポーネントの CSS リソースでの出力のスタイルを設定できます。

次の例は、myStyle セレクタを使用して ui:inputDateTime コンポーネントにスタイルを設定します。

1swfobject.registerObject("clippy.codeblock-2", "9");<!-- 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}