<mvc:View controllerName="sap.m.sample.TimePicker.TimePicker"
	height="100%"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">

	<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="{/timePickers/TP3/format}, dateValue: {/timePickers/TP3/dateValue}" />
		<TimePicker
				id="TP3"
				valueFormat="{/timePickers/TP3/format}"
				displayFormat="{/timePickers/TP3/format}"
				change="handleChange"
				dateValue="{/timePickers/TP3/dateValue}"
				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>
