How To Convert Datetime String To Date In Sapui5?

I am trying to convert String to Date in SAPUI5 var Fdate = '2020-08-01T00:00:00'; var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({ pattern: 'dd/MM/yyyy' }); fd

Solution 1:

In JS

// DateFormat required from "sap/ui/core/format/DateFormat"const dt = DateFormat.getDateTimeInstance({ pattern: "dd/MM/yyyy" });
const jsDateObject = dt.parse("2020-08-01T00:00:00"); // returns: Sat Aug 01 2020 00:00:00 <timezone information>const dayMonthYear = dt.format(jsDateObject) // returns: "01/08/2020"

• If the string contains date and time, parse it via a date time instance.
• .parse awaits a string value and converts it into a JS date (e.g. for storing it in a model).
• .format awaits a JS date and converts it into a string representation (e.g. for displaying it in the UI).

---

In Two Way data binding (Model-View-ViewModel pattern)

Similar to https://stackoverflow.com/a/63131534/5846045:

<DatePickervalue="{
  path: '/MyDateTimeString',
  type: 'sap.ui.model.type.Date',
  formatOptions: {
    source: {
      pattern: 'yyyy-MM-ddTHH:mm:ss'
    }
  }
}" />

The framework will then use .format and .parse automatically. I.e. users can pick or enter a date in the UI, and the input will be then parsed and stored as a JS date in the model without writing a single line of JS code.

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel", // sample model. Works also with ODataModel.
], (XMLView, MyModel) =>XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc">
    <VBox xmlns="sap.m" class="sapUiTinyMargin">
      <DatePicker
        width="12rem"
        value="{
          path: '/MyDateTimeString',
          type: 'sap.ui.model.type.Date',
          formatOptions: {
            source: {
              pattern: 'yyyy-MM-ddTHH:mm:ss'
            }
          }
        }"
      />
      <ObjectAttribute
        title="Model"
        text="&#34;{/MyDateTimeString}&#34;"
      />
    </VBox>
  </mvc:View>`,
  models: newMyModel({ // e.g. v2.ODataModelMyDateTimeString: "2020-08-01T00:00:00", // Type="Edm.String"
  }),
}).then(control => control.placeAt("content"))));

<scriptid="sap-ui-bootstrap"src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-libs="sap.ui.core,sap.m"data-sap-ui-theme="sap_fiori_3"data-sap-ui-async="true"data-sap-ui-compatversion="edge"data-sap-ui-xx-waitfortheme="init"
></script><bodyid="content"class="sapUiBody sapUiSizeCompact"></body>

Solution 2:

The formater function expects a date object.

varFdate = "2020-08-01T00:00:00";
var date = newDate(Fdate);
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({
    pattern: "dd/MM/yyyy"
});
fdateFormatted = dateFormat.format(date);