1.時間選擇器Time Picker

和Data Picker類似，Time Picker允許用戶選擇相應(yīng)的時間。

它有以下一些比較常用的屬性。

• value用于顯示Input中的時間的值，這個屬性只能接受字符串的值，如果是UI5.getInstance()獲取到的時間，需要轉(zhuǎn)化成相應(yīng)的字符串才可以
• valueFormat用于設(shè)置顯示日期的格式，這個格式會影響Input框中的格式，也會影響Time Picker顯示的格式
• placeholder用于顯示提示信息
• maskMode這個通常設(shè)置為true，這樣用戶就只能在輸入框中輸入指定格式的時間，如果輸入字母等其他字符，是不可以輸入進去的。

關(guān)于valueFormat的格式

• HH24小時制的小時
• hh12小時制的小時
• mm分鐘
• ss秒
• a12小時制的情況下使用，用于顯示上午還是下午

相關(guān)事件change
當(dāng)用戶選擇了日期后，會觸發(fā)這個事件，可以在這個事件中獲取到用戶選擇的事件

handleChange: function (oEvent) {
	var sValue = oEvent.getParameter("value"),
	MessageToast.show("The selected time is  " + sValue);
}

具體代碼如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Panel
		width="auto"
		class="sapUiResponsiveMargin"
	>
		<headerToolbar>
			<OverflowToolbar>
				<Title text="maskMode"/>
			</OverflowToolbar>
		</headerToolbar>
		<content>
			<HBox alignItems="Center">
				<Text
					renderWhitespace="true"
					text="maskMode is  "
				/>
				<Switch state="{/maskMode/state}"/>
				<Text
					renderWhitespace="true"
					text="  for all TimePickers below"
				/>
			</HBox>
			<Text
				class="sapUiSmallMarginTop"
				visible="{/maskMode/state}"
				text="When maskMode is 'On', the TimePicker field accepts only the time format predefined by the mask."
			/>
			<Text
				class="sapUiSmallMarginTop"
				visible="{= !${/maskMode/state}}"
				text="When maskMode is 'Off', the users can enter anything in the TimePicker field. The field is still validated. The 'change' event returns two parameters - 'value' (that is entered) and 'valid' (true or false depending on the validity of the 'value')
					."
			/>
		</content>
	</Panel>
	<VBox class="sapUiSmallMargin">
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP1/format}"
		/>
		<TimePicker
			id="TP1"
			value="{/timePickers/TP1/value}"
			valueFormat="{/timePickers/TP1/format}"
			displayFormat="{/timePickers/TP1/format}"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP1/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP2/format}, showCurrentTimeButton: {/timePickers/TP2/showCurrentTimeButton}"
		/>
		<TimePicker
			id="TP2"
			valueFormat="{/timePickers/TP2/format}"
			displayFormat="{/timePickers/TP2/format}"
			showCurrentTimeButton="true"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP2/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="hh:mm a,
				value: {/timePickers/TP3/value}"
		/>
		<TimePicker
			id="TP3"
			change="handleChange"
			value="{/timePickers/TP3/value}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP3/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP4/format}"
		/>
		<TimePicker
			id="TP4"
			valueFormat="{/timePickers/TP4/format}"
			displayFormat="{/timePickers/TP4/format}"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP4/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP5/format}, initialFocusedDateValue: {/timePickers/TP5/initialFocusedDateValue}"
		/>
		<TimePicker
			id="TP5"
			valueFormat="{/timePickers/TP5/format}"
			displayFormat="{/timePickers/TP5/format}"
			change="handleChange"
			initialFocusedDateValue="{/timePickers/TP5/initialFocusedDateValue}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP5/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP6/format}, support2400: {/timePickers/TP6/support2400} (for cases where 24:00:00 indicates the end of the day)"
		/>
		<TimePicker
			id="TP6"
			valueFormat="{/timePickers/TP6/format}"
			displayFormat="{/timePickers/TP6/format}"
			change="handleChange"
			support2400="{/timePickers/TP6/support2400}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			value="{/timePickers/TP6/value}"
			placeholder="{/timePickers/TP6/placeholder}"
		/>
		<Toolbar class="sapUiSmallMarginTop">
			<content>
				<Title text="change event result"/>
			</content>
		</Toolbar>
		<Text
			id="T1"
			class="sapUiSmallMarginTop"
		/>
	</VBox>
</mvc:View>

值得注意的兩個細節(jié)

1. TP3的value為什么需要使用格式化器？

根據(jù)提供的代碼和JSON Model，Id為TP3的元素的value屬性為UI5Date.getInstance()，這里使用的是一個UI5的日期實例。然而，UI5的日期實例并不能直接在界面上顯示，因為它不是一個可顯示的字符串。

要在界面上顯示日期值，需要將日期實例轉(zhuǎn)換為字符串格式，以便TimePicker能夠正確顯示。你可以使用格式化器（Formatter）或者綁定到另一個字符串屬性來實現(xiàn)。

使用格式化器的示例：
在控制器中定義一個格式化函數(shù)：

formatDate: function(value) {
    if (value instanceof Date) {
        var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({ pattern: "yyyy-MM-dd" });
        return oDateFormat.format(value);
    }
    return value;
}

然后在XML視圖中的TimePicker控件中使用格式化器：

<TimePicker
    id="TP3"
    change="handleChange"
    value="{
        path: '/timePickers/TP3/value',
        formatter: '.formatDate'
    }"
    maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
    placeholder="{/timePickers/TP3/placeholder}"
/>

這樣可以將日期實例轉(zhuǎn)換為指定格式的字符串，并顯示在界面上。

另一種方法是在JSON Model中添加一個新的屬性，用于存儲日期的字符串格式。在更新日期時，同時更新這個字符串屬性，并綁定到TimePicker的value屬性。

希望這能幫到你解決問題。如果還有其他疑問，請隨時提問。

2. 那TP5對應(yīng)的VALUE也是UI5Date.getInstance()，為什么不需要格式化器

TP5對應(yīng)的VALUE也是UI5Date.getInstance(2017, 8, 9, 10, 11, 12)，在這種情況下不需要使用格式化器的原因是因為TP5指定了initialFocusedDateValue屬性，該屬性接受一個UI5日期實例作為初始值，并且TimePicker控件會自動將其轉(zhuǎn)換為正確的顯示格式。

initialFocusedDateValue屬性用于在打開TimePicker時設(shè)置初始的選定日期和時間。UI5會自動將UI5日期實例轉(zhuǎn)換為適當(dāng)?shù)娘@示格式，并在TimePicker控件中顯示。

因此，對于TP5，你無需使用格式化器，因為TimePicker會自動處理日期實例的顯示。

希望這解答了你的疑問。如果還有其他問題，請隨時提問。

2.Action List控件

Action List控件可以用于顯示一系列的按鈕操作聚合在一起，方便用戶選擇和使用。

具體代碼如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Button
		text="Open Action Sheet"
		class="sapUiSmallMargin"
		press=".onButtonPress"
		ariaHasPopup="Menu" >
		<dependents>
			<core:Fragment
				fragmentName="sap.ui5.walkthrough.view.ValueHelpDialog"
				type="XML" />
		</dependents>
	</Button>
</mvc:View>

<ActionSheet id="actionSheet"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	core:require="{ MessageToast: 'sap/m/MessageToast' }"
	title="Choose Your Action"
	showCancelButton="true"
	placement="Bottom"
	showScrollbar="false">
	<Button
		text="Accept"
		icon="sap-icon://accept"
		press="handleButtonPress" />
	<Button
		text="Reject"
		icon="sap-icon://decline"
		press="handleButtonPress" />
	<Button
		text="Email"
		icon="sap-icon://email"
		press="handleButtonPress" />
	<Button
		text="Forward"
		icon="sap-icon://forward"
		press="handleButtonPress" />
	<Button
		text="Delete"
		icon="sap-icon://delete"
		press="handleButtonPress" />
	<Button
		text="Other"
		press="handleButtonPress" />
</ActionSheet>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator,
	) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
	
		onButtonPress: function(oEvent) {
			var oButton = oEvent.getSource();
			this.byId("actionSheet").openBy(oButton);
		},

		handleButtonPress: function(oEvent) {
			var oButton = oEvent.getSource();
			var sButtonText = oButton.getText();
			MessageToast.show('Selected action is ' + sButtonText);
		}
		
	});
});

3.NavigationList控件

這個控件用于實現(xiàn)導(dǎo)航欄，還提供了各種特效。


具體代碼如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:tnt="sap.tnt"
	height="100%"
>
	<OverflowToolbar>
		<Button
			text="Toggle Collapse/Expand"
			icon="sap-icon://menu2"
			press=".onCollapseExpandPress"
		/>
		<Button
			text="Show/Hide SubItem 3"
			icon="sap-icon://menu2"
			press=".onHideShowSubItemPress"
		/>
	</OverflowToolbar>
	<tnt:NavigationList
		id="navigationList"
		width="320px"
		selectedKey="subItem3"
	>
		<tnt:NavigationListItem
			text="Item 1"
			key="rootItem1"
			icon="sap-icon://employee"
		>
			<tnt:NavigationListItem text="Sub Item 1" select="onPress"/>
			<tnt:NavigationListItem text="Sub Item 2" />
			<tnt:NavigationListItem
				text="Sub Item 3"
				id="subItemThree"
				key="subItem3"
			/>
			<tnt:NavigationListItem text="Sub Item 4"/>
			<tnt:NavigationListItem
				text="Invisible Sub Item 5"
				visible="false"
			/>
			<tnt:NavigationListItem
				text="Invisible Sub Item 6"
				visible="false"
			/>
		</tnt:NavigationListItem>
		<tnt:NavigationListItem
			text="Invisible Section"
			icon="sap-icon://employee"
			visible="false"
		>
			<tnt:NavigationListItem text="Sub Item 1"/>
			<tnt:NavigationListItem text="Sub Item 2"/>
			<tnt:NavigationListItem text="Sub Item 3"/>
			<tnt:NavigationListItem text="Sub Item 4"/>
		</tnt:NavigationListItem>
		<tnt:NavigationListItem
			text="Item 2"
			icon="sap-icon://building"
		>
			<tnt:NavigationListItem text="Sub Item 1"/>
			<tnt:NavigationListItem text="Sub Item 2"/>
			<tnt:NavigationListItem text="Sub Item 3"/>
			<tnt:NavigationListItem text="Sub Item 4"/>
		</tnt:NavigationListItem>
	</tnt:NavigationList>
</mvc:View>

如果想實現(xiàn)點擊某一個Item會執(zhí)行某一個事件，請使用select事件
例如文章來源地址http://www.zghlxwxcb.cn/news/detail-548359.html

<tnt:NavigationListItem text="Sub Item 1" select="onPress"/>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator,
) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {

		onCollapseExpandPress: function () {
			var oNavigationList = this.byId("navigationList");
			// 獲取導(dǎo)航欄是否是Expand，然后取反即可
			var bExpanded = oNavigationList.getExpanded();

			oNavigationList.setExpanded(!bExpanded);
		},

		onHideShowSubItemPress: function () {
			var oNavListItem = this.byId("subItemThree");
			oNavListItem.setVisible(!oNavListItem.getVisible());
		},

		onPress: function (oEvent) {
			var text = oEvent.getSource().getText();
			MessageToast.show(text + " is selected");
		}

	});
});

到了這里，關(guān)于【SAP UI5 控件學(xué)習(xí)】DAY04 Input組Part IV 完結(jié)&&List組Part I的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！