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

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

次に、項目値 1/30/2014 を表示する、日付ピッカーがある日付項目の基本設定を示します。format="MMMM d, yyyy" を指定すると、項目値が January 30, 2014 と表示されます。

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

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

1<div class="uiInput uiInputDate">
2  <label class="uiLabel-left uiLabel">
3    <span>Birthday</span>
4  </label>
5  <input placeholder="M/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  <a class="clearIcon">
10    <span class="assistiveText">Clear Button</span>
11  </a>
12  <div class="uiDatePicker">
13    <!--Date picker set to visible when icon is clicked-->
14  </div>
15</div>

次の例は、ui:inputDate コンポーネントで今日の日付を設定し、その値を取得し、ui:outputDate を使用して値を表示します。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>

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 スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追��されます。
`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`	Date	日付/時間の入力値。

イベント

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