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

ui:outputDate

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

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

1<aura:attribute name="myDate" type="Date" default="2014-09-29"/>
2<ui:outputDate value="{!v.myDate}"/>

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

1<span class="uiOutputDate">Sep 29, 2014</span>

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

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

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(component, event, helper) {
19        var today = new Date();
20        component.set('v.today', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
21        component.set('v.deadline', today);
22    },
23    
24    setOutput : function(component, event, helper) {
25    	var el = component.find("msg");
26    	$A.util.removeClass(el.getElement(), 'hide');
27        var expdate = component.find("expdate").get("v.value");
28        
29        var oDate = component.find("oDate");
30        oDate.set("v.value", expdate);
31        
32    }
33})

属性

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

イベント

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

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

ui:outputDate

属性

イベント