Skip to Content

how to change time format in sap.ui.table

hi,everyone!,i am new for sapui5,and i create a table in a file view.xml ,but the time shows Sat Mar 31 2018 08:00:00 GMT+0800 (中国标准时间),and i want it shows that likes 2018-01-01.and anyone could give me some advice?

thanks advance!

view of xml

<mvc:View 
	 xmlns:core="sap.ui.core"
	 xmlns:mvc="sap.ui.core.mvc" 
	 xmlns="sap.m"  
	 xmlns:l="sap.ui.layout" 
	 xmlns:f="sap.ui.layout.form"
	 xmlns:t="sap.ui.table"
	 controllerName="ZTASK_LIST.controller.TaskListManage" 
	 xmlns:html="http://www.w3.org/1999/xhtml">
	 <!-- <core:Fragment   fragmentName="ZTASK_LIST.views.TaskNewDialog" type="XML" /> -->
	<Page title="任务清单管理" class="sapUiContentPadding">
		<content>
			<Panel id="Panel" headerText="任务清单管理" width="auto">
				<IconTabBar
						id="idIconTabBar"
						expandable="false"
						showOverflowSelectList="true"
						enableTabReordering="true"
						class="sapUiResponsiveContentPadding"
						selectedKey="1234"
						select="1234">
						<items>
							<IconTabFilter
								text="任务清单管理" 
								
								press="onData">
								<!-- 任务清单管理-->
								<f:Form editable="true"  >
									<f:layout>
										<f:ResponsiveGridLayout 
											labelSpanL="2"
											labelSpanM="0" 
											emptySpanL="0" 
											emptySpanM="4" 
											columnsL="3"
											columnsM="10" />
									</f:layout>
									<f:FormContainer>
										<f:formElements>
											<f:FormElement label="">
												<f:fields>
													<Button icon="sap-icon://create" width="100%" text="新建任务" press="Task_New" />
													<Button icon="sap-icon://upload" width="101%" text="项目清单导入" press="Task_Upload_From_Project" />
												</f:fields>
											</f:FormElement>
										</f:formElements>
									</f:FormContainer>																	
									<f:formContainers>
										<f:FormContainer>
											<f:formElements>
												<f:FormElement label="人员">
													<f:fields>
														<SearchField
															placeholder="请输入员工号"
															value="{ui>/globalFilter}"
															search="searchPerson"
															width="15rem"/>															
													</f:fields>
												</f:FormElement>
											</f:formElements>
										</f:FormContainer>
										<f:FormContainer>
											<f:formElements>
												<f:FormElement label="日期">
													<f:fields>
														<DatePicker 
															valueFormat="yyyyMMdd" 
															displayFormat="yyyy-MM-dd" 
															id="Task_Date"
															width="50%"
															value="{path:'/head/IEndDate',type:'sap.ui.model.type.DateTime',formatOptions:{ 
															pattern:'yyyy-MM-dd',UTC:true,style:'medium',strictParsing: false}}" />
													</f:fields>
												</f:FormElement>
											</f:formElements>
										</f:FormContainer>			
									</f:formContainers>	
								</f:Form>
								
								<t:Table 
									id = "otable"
									rows="{/Z11192_DEMOSet}"
									width="auto"																
									title="任务清单"
									selectionMode="None"
									filter="filterPrice"
									sort="sortDeliveryDate"
									visibleRowCount="12"
									items="{
										path: '/Products',
										sorter: {
											path: 'ProductName',
											descending: false
										}
									}">
																
									<t:columns>
										<t:Column>
											<Label text="任务编号"/>
											<t:template>
												<Text text="{ZtaskNum}" wrapping="false" />
											</t:template>
										</t:Column>
										<t:Column>
											<Label text="任务类型" />
											<t:template>
												<Label text="{ZtaskType}" />
											</t:template>
										</t:Column>									
										<t:Column>
											<Label text="汇报周期" />
											<t:template>
												<Label text="{ZtaskCycle}" />
											</t:template>
										</t:Column>
										<t:Column filterProperty="ZtaskToId">
											<Label text="分配人员" />
											<t:template>
												<Input value="{ZtaskToId}" />
											</t:template>
										</t:Column>
										<t:Column>
											<Label text="任务内容" />
											<t:template>
												<Label value="{ZtaskContent}" wrapping="false" />
											</t:template>
										</t:Column>
										<t:Column>
											<Label text="任务进度" />
											<t:template>
												<Label text="{ZtaskSchedule}" />
											</t:template>
										</t:Column>	
										<t:Column>
											<Label text="计划开始日期 "/>
											<t:template>
												<Text text="{ZtaskPlanEndTime}" wrapping="false" />											
											</t:template>
										</t:Column>																			
										<t:Column>
											<Label text="计划结束日期 "/>
											<t:template>
												<Text text="{ZtaskPlanEndTime}" wrapping="false" />
											</t:template>
										</t:Column>
										<t:Column>
											<Label text="实际结束日期"/>
											<t:template>
												<Text text="{ZtaskActualEndTime}" wrapping="false" />
											</t:template>
										</t:Column>
										<t:Column>
											<Label text="汇报"/>
											<t:template>
												<Text text="{ZtaskActualEndTime}" wrapping="false" />
											</t:template>
										</t:Column>
										<t:Column >
											<Label text="评价"/>
											<t:template>
												<Text text="{ZtaskActualEndTime}" wrapping="false" />
											</t:template>
										</t:Column>																												
									</t:columns>								
								</t:Table>					
							</IconTabFilter>		
						</items>
				</IconTabBar>
			</Panel>
		</content>
	</Page>
</mvc:View>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Apr 02, 2018 at 06:47 AM

    hello,

    this is what i have done in javascript within a template declaration, i use expression binding, no need for a custom formatter, i guess it would work in the xml view as well

    new Text({ text: { path: 'ECOMBPOST>ZDatePacked', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'MM/dd/yyyy' } } })

    you need to add this under in the bootstrap section of the index.html to activate expression binding

    data-sap-ui-xx-bindingSyntax="complex" 
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 02, 2018 at 05:29 AM

    hi huang Lin,

    Use formatter to change

    //code

    <Text text="{path: 'ZtaskActualEndTime', formatter: '.myFormatterDate'}/>

    //You can call formatter function inside your controller or you can call as a separate file

    myFormatterDate : function(value){

    var d = new Date(value),month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear();

    if (month.length < 2) month = '0' + month;

    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');

    }

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 02, 2018 at 06:40 AM

    hello,

    you can use same format options for Text control as well, as how you have used for Datepicker, i.e.

    <Text text="{path: 'ZtaskPlanEndTime', type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'yyyy-MM-dd'}}"></Text>

    Add comment
    10|10000 characters needed characters exceeded