Format dates in VBCS page using functions

You can use oj-input-date or oj-input-date-time components for showing formatted date and use convertor options

But when using above component only for read-only purpose to show some values in grid or table, it doesn’t make sense to use input fields.

Instead we can use oj-bind-text field and pass data using following JavaScript function.

The JavaScript function will add necessary formatting to the date and return the value as string.

Live code preview

We can use date convertor functions to format the date in required format

JavaScript function

define(["ojs/ojconverter-datetime"], (datetimeConverter) => {
  "use strict";

  class PageModule {
    convertDateToStr(customDate) {
        let dateConvertor = new datetimeConverter.IntlDateTimeConverter({
          pattern: "dd-MMM-yyyy",
        });
      return dateConvertor.format(customDate);
    }
  }

  return PageModule;
});

Patterns examples

References –

jsDoc for IntlDateTimeConverter ( to view all convertor options )

https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.IntlDateTimeConverter.html

Live application URL ( to try out few configs )

https://khalil232.com/apps/ojet-apps/?ojr=date-format-sample