Format Date field in Smart Table SAP Ui5

0
votes

How to format the Date field in Smart Table?

Oct 17, 2017 to 17/10/2017

2
dateannotationsformattingsapui5
Please don't ask someone else to do your work. You could easily get information about formatting date fields in sapui5 by searching through the SAPUI5 Demokit or just by searching through google. If you tried something and something doesn't work after searching and developing for your own, then it's the right time to ask a question here. - Thomas L.
My question is about smart table..I know how to use formatters.. - Anoop

2 Answers

0
votes

The only way I found was by making it a customData and formmatting it

        <customData>
            <core:CustomData key="p13nData" value='\{"columnKey": "Erdat",  "leadingProperty": "Erdat"}' />
        </customData>

then

        <Text text="{parts: ['Erdat'],formatter: '.formatDate'} " />

this way I was able to format my data

0
votes

You may also use sap annotation sap:display-format='Date' for this:

<Property
  sap:label="Test Date"
  Name="ZDATE"
  Type="Edm.DateTime"
  sap:display-format="Date"
  Precision="0"/>

which results in

Date display sample

Or via customData and composite binding with constraints option of sap.ui.model.odata.type.DateTime which allows you not to create custom formatter:

<Table>
    <columns>
        <Column hAlign="Begin">
            <customData>
                <core:CustomData key="p13nData"
                  value='\{"columnKey": "TEST_DATE",
                    "columnIndex":"9",
                    "leadingProperty": "ZDATE",
                    "width": "10%"
                  }'/>
              </customData>
              <Text text="Test Date Custom"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Text text="{
                  path: 'ZDATE',
                  type: 'sap.ui.model.odata.type.DateTime',
                  constraints: { displayFormat: 'Date' }
                }"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>