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
| Patterns | Input – date string | Output – formatted date |
|---|---|---|
| dd-MMM-yyyy | 2024-01-18T13:59:23+05:30 | 18-Jan-2024 |
| dd-MM-yyyy | 2024-01-18T13:59:23+05:30 | 18-01-2024 |
| MM/dd/yyyy | 2024-01-18T13:59:23+05:30 | 01/18/2024 |
| MM/dd/yyyy hh:mm:ss | 2024-01-18T13:59:23+05:30 | 01/18/2024 01:59:23 |
| MM/dd/yyyy hh:mm:ss a | 2024-01-18T13:59:23+05:30 | 01/18/2024 01:59:23 PM |
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
good!!!