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

ui:inputDateTime コンポーネントは、text 型の HTML input タグとして表示される、日時の入力項目を表します。ブラウザの言語ロケールで指定されたデフォルト形式で値が表示されます。

次に、7/29/2014 1:11 PM 形式で現在の日時を表示する、日付ピッカーがある日付項目の基本設定を示します。

1<!-- Component markup -->
2<aura:attribute name="today" type="DateTime" />
3<ui:inputDateTime aura:id="expdate" label="Expense Date" class="form-control"
4   value="{!v.today}" displayDatePicker="true" />
5   
6/** Client-Side Controller **/
7 var today = new Date(); 
8component.set("v.today", today);

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

1<div class="uiInput uiInputDateTime uiInput--default uiInput--input uiInput--datetime">
2<label class="uiLabel-left form-element__label uiLabel">
3    <span>Expense Date</span>
4</label>
5<form class="form--stacked">
6    <div class="dateTime-inputDate form-element form-element__control">
7        <input class="form-control uiInput uiInputDateTime" placeholder="MMM d, yyy" type="text">
8        <a class="datePicker-openIcon display" aria-haspopup="true">
9            <span class="assistiveText">Date Picker</span>
10        </a>
11    </div>
12    <div class="dateTime-inputTime form-element form-element__control">
13        <div class="input-has-icon input-has-icon--right">
14             <label></label>
15             <input class="fieldinput" aria-describedby="" type="text" placeholder="h:mm a">
16                <a aria-haspopup="true" class="timePicker-openIcon display" href="javascript:void(0);">
17                    <span class="assistiveText">Time Picker</span>
18                </a>
19            </div>
20        </div>
21        <div class="uiInputTimePicker--default uiInputTimePicker" >
22            <div aria-hidden="false" data-selection="time" class="dropdown dropdown--left datepicker datepicker--time scrollable">
23                <ul class="datepicker--time__list" role="menu" ></ul>
24            </div>
25        </div>
26</form>
27</div>
28<div class="DESKTOP uiDatePicker--default uiDatePicker">
29    <!-- Date picker set to visible when icon is clicked -->
30</div>

デスクトップでは、input タグが form タグでラップされ、日付と時間の項目が 2 つの別個の項目として表示されます。フォーム要素 (DESKTOP、MOBILE、PHONE) により、日付ピッカーのサイズが決まります。時間ピッカーには、30 分単位で増分する時間のリストが表示されます。

次の例は、ui:inputDateTime コンポーネントの値を取得し、ui:outputDateTime を使用して値を表示します。

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 スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`displayDatePicker`	Boolean	ui:datePicker が表示されるかどうかを示します。
`format`	String	java.text.SimpleDateFormat スタイル形式の文字列。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`langLocale`	String	日時の書式設定に使用される言語ロケール。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	String	日付/時間の入力値。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`select`	COMPONENT	ユーザが選択を行ったことを示します。
`blur`	COMPONENT	コンポーネントからフォーカスが離れたことを示します。
`focus`	COMPONENT	コンポーネントにフォーカスが置かれたことを示します。
`keypress`	COMPONENT	ユーザがキーボードキーを押したままにしたことを示します。
`keyup`	COMPONENT	ユーザがキーボードキーを放したことを示します。
`keydown`	COMPONENT	ユーザがキーボードキーを押してから放したことを示します。
`cut`	COMPONENT	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。