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

ui:outputDateTime

ユーザのロケールに基づいた指定またはデフォルト形式で日時を表示します。

ui:outputDateTime コンポーネントは、HTML span タグでラップされた日時出力を表します。このコンポーネントは、日付入力を取り込む ui:inputDateTime と共に使用できます。ui:outputDateTime は、ブラウザのロケール情報を取得し、それに従って日付を表示します。日時を表示する場合、属性値を使用して ui:outputDateTime コンポーネントにバインドできます。

1<aura:attribute name="myDateTime" type="Date" default="2014-09-29T00:17:08z"/>
2<ui:outputDateTime value="{!v.myDateTime}"/>

前の例によって次の HTML が表示されます。

1<span class="uiOutputDateTime">Sep 29, 2014 12:17:08 AM</span>

次の例は、ui:inputDateTime コンポーネントのデータをバインドする方法を示します。

1<aura:component>
2 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3 <aura:attribute name="today" type="Date" default=""/>
4 
5    <ui:inputDateTime aura:id="today" label="Time" class="field" value="" displayDatePicker="true" />
6    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
7 
8    <div aura:id="msg" class="hide">
9  You entered: <ui:outputDateTime aura:id="oDateTime" value=""  />
10 </div>
11</aura:component>

1({
2    doInit : function(component, event, helper) {
3        var today = new Date();
4        component.set('v.today', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
5    },
6    
7    setOutput : function(component, event, helper) {
8    	var cmpMsg = component.find("msg");
9    	$A.util.removeClass(cmpMsg, 'hide');
10    	
11        var todayVal = component.find("today").get("v.value");
12        var oDateTime = component.find("oDateTime");
13        oDateTime.set("v.value", todayVal);
14      
15    }
16})

属性

属性名	属性型	説明	必須項目
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`format`	String	value 属性の日時の形式設定に使用される文字列 (パターン文字は java.text.SimpleDateFormat で定義されます)。
`langLocale`	String	日付値の形式設定に使用される言語ロケール。
`timezone`	String	タイムゾーン ID (America/Los_Angeles など)。
`value`	String	日時を表す ISO8601 形式の文字列。	はい

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。

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

ui:outputDateTime

属性

イベント