ui:inputDate | Lightning コンポーネント開発者ガイド

ui:inputDate コンポーネントは、デスクトップ上に text 型の HTML input タグとして表示される、日付の入力項目を表します。Lightning Design System のスタイル設定を適用するには、ui:inputDate の代わりに lightning:input を使用し、type="date" を指定することをお勧めします。

携帯電話およびタブレットで実行される Web アプリケーションは、Internet Explorer を除くすべてのブラウザで date 型の入力項目を使用します。値は、$Locale.dateFormat で返されるブラウザのロケールに基づいて表示されます (たとえば、MMM d, yyyy など)。

ロケール形式に基づいて項目値 Jan 30, 2014 を表示する、日付ピッカーアイコンがある日付項目の基本設定を次に示します。デスクトップ上で、input タグは form タグでラップされます。

1<ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true"/>

モバイルデバイスでの日付の選択

モバイルまたはタブレットに表示する場合、ui:inputDate コンポーネントはネイティブの日付ピッカーを使用します。この場合、format 属性はサポートされません。入力項目の日付値の変更は、値変更ハンドラを使用して取得することをお勧めします。iOS デバイスでは、日付ピッカーで日付を選択すると、コンポーネントで変更ハンドラがトリガされますが、値は blur イベントでのみバインドされます。この例では、日付値を値変更ハンドラにバインドします。

1<aura:component>
2    <aura:attribute name="myDate" type="Date" />
3    <!-- Value change handler -->
4    <aura:handler name="change" value="{!v.myDate}" action="{!c.handleValueChange}"/>
5    
6    <ui:inputDate aura:id="mySelectedDate" 
7                  label="Select a date" displayDatePicker="true" 
8                  value="{!v.myDate}"/>
9</aura:component>

次の例は、ui:inputDate コンポーネントで今日の日付を設定し、その値を取得し、ui:outputDate を使用して値を表示します。Lightning Design System のスタイル設定を適用するには、ui:inputDate の代わりに lightning:input を使用し、type="date" を指定することをお勧めします。init ハンドラは、コンポーネントで日付を初期化し、設定します。

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>

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        var expdate = component.find("expdate").get("v.value");
11
12        var oDate = component.find("oDate");
13        oDate.set("v.value", expdate);
14
15    }
16})

No content provided

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`displayDatePicker`	Boolean	日付ピッカーをトリガするアイコンを項目に表示するかどうかを示します。デフォルトは false です。
`errors`	List	表示するエラーのリスト。
`format`	String	java.text.SimpleDateFormat スタイル形式の文字列。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`langLocale`	String	非推奨。日時の書式設定に使用される言語ロケール。ロケール値プロバイダによって提供される値のみを使用できます。これ以外の場合は、$Locale.langLocale の値に戻ります。この属性は今後のリリースで廃止されます。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	String	ISO 文字列としての日付/時間の入力値。

イベント

イベント名	イベントタイプ	説明
`select`	COMPONENT	ユーザが何らかのテキストを選択すると起動されるイベント。
`blur`	COMPONENT	ユーザがコンポーネントから離れると起動されるイベント。
`focus`	COMPONENT	ユーザがコンポーネントにフォーカスを移動すると起動されるイベント。
`keypress`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すまたは押したままにすると起動されるイベント。
`keyup`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを放すと起動されるイベント。
`keydown`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すと起動されるイベント。
`dblclick`	COMPONENT	ユーザがコンポーネントをダブルクリックすると起動されるイベント。
`mouseover`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`mouseout`	COMPONENT	ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。
`mouseup`	COMPONENT	ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。
`mousemove`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`click`	COMPONENT	ユーザがコンポーネントをクリックすると起動されるイベント。
`mousedown`	COMPONENT	ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。
`cut`	COMPONENT	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。