Formatting a Joda LocalDateTime variable with Js Joda Library in Angular 10

Question

Good Morning,

I have an Angular 10 application in which I try to print some LocalDateTime variables in an HTML page. The LocalDateTime variable are correctly fetched from the BackEnd and are of type Joda.LocalDateTime, the serialization happens correctly as I can see the variable in response field in postman, for example:

"data_start_act": {
    "year": 2020,
    "dayOfMonth": 19,
    "chronology": {
        "zone": {
            "fixed": true,
            "id": "UTC"
        }
    },
    "dayOfWeek": 6,
    "dayOfYear": 263,
    "era": 1,
    "weekyear": 2020,
    "centuryOfEra": 20,
    "monthOfYear": 9,
    "weekOfWeekyear": 38,
    "yearOfEra": 2020,
    "yearOfCentury": 20,
    "millisOfSecond": 0,
    "secondOfMinute": 0,
    "minuteOfHour": 0,
    "hourOfDay": 0,
    "millisOfDay": 0,
    "fields": [
        {
            "lenient": false,
            "leapDurationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "rangeDurationField": null,
            "minimumValue": -292275054,
            "maximumValue": 292278993,
            "durationField": {
                "unitMillis": 31556952000,
                "precise": false,
                "name": "years",
                "type": {
                    "name": "years"
                },
                "supported": true
            },
            "name": "year",
            "type": {
                "durationType": {
                    "name": "years"
                },
                "rangeDurationType": null,
                "name": "year"
            },
            "supported": true
        },
        {
            "lenient": false,
            "leapDurationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "rangeDurationField": {
                "unitMillis": 31556952000,
                "precise": false,
                "name": "years",
                "type": {
                    "name": "years"
                },
                "supported": true
            },
            "minimumValue": 1,
            "maximumValue": 12,
            "durationField": {
                "unitMillis": 2629746000,
                "precise": false,
                "name": "months",
                "type": {
                    "name": "months"
                },
                "supported": true
            },
            "name": "monthOfYear",
            "type": {
                "durationType": {
                    "name": "months"
                },
                "rangeDurationType": {
                    "name": "years"
                },
                "name": "monthOfYear"
            },
            "supported": true
        },
        {
            "rangeDurationField": {
                "unitMillis": 2629746000,
                "precise": false,
                "name": "months",
                "type": {
                    "name": "months"
                },
                "supported": true
            },
            "minimumValue": 1,
            "maximumValue": 31,
            "lenient": false,
            "unitMillis": 86400000,
            "durationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "name": "dayOfMonth",
            "type": {
                "durationType": {
                    "name": "days"
                },
                "rangeDurationType": {
                    "name": "months"
                },
                "name": "dayOfMonth"
            },
            "supported": true,
            "leapDurationField": null
        },
        {
            "range": 86400000,
            "rangeDurationField": {
                "unitMillis": 86400000,
                "precise": true,
                "name": "days",
                "type": {
                    "name": "days"
                },
                "supported": true
            },
            "maximumValue": 86399999,
            "lenient": false,
            "unitMillis": 1,
            "durationField": {
                "name": "millis",
                "type": {
                    "name": "millis"
                },
                "supported": true,
                "unitMillis": 1,
                "precise": true
            },
            "minimumValue": 0,
            "name": "millisOfDay",
            "type": {
                "durationType": {
                    "name": "millis"
                },
                "rangeDurationType": {
                    "name": "days"
                },
                "name": "millisOfDay"
            },
            "supported": true,
            "leapDurationField": null
        }
    ],
    "fieldTypes": [
        {
            "durationType": {
                "name": "years"
            },
            "rangeDurationType": null,
            "name": "year"
        },
        {
            "durationType": {
                "name": "months"
            },
            "rangeDurationType": {
                "name": "years"
            },
            "name": "monthOfYear"
        },
        {
            "durationType": {
                "name": "days"
            },
            "rangeDurationType": {
                "name": "months"
            },
            "name": "dayOfMonth"
        },
        {
            "durationType": {
                "name": "millis"
            },
            "rangeDurationType": {
                "name": "days"
            },
            "name": "millisOfDay"
        }
    ],
    "values": [
        2020,
        9,
        19,
        0
    ]
}

In the Angular component is imported the @js-joda/core library in order to wrap the variables.

In the HTML the whole LocalDateTime variable could not be printed by using the interpolation as [Object Object] is printed instead of the variable value, so {{data_start_act}} doesn't work, but I can print fields inside it using the interpolation, for example {{data_start_act.year}} or {{data_start_act.dayOfMonth}} work.

So I tried to format it using the DateTimeFormatter class of the JsJoda library, declared as a local variable in the component in this way: dateTimeFormatter: DateTimeFormatter = DateTimeFormatter.ofPattern('d M y');.

In particular it is used:

Formatter Function

  stringifyLocalDateTime(date: LocalDateTime): string {
    return this.dateTimeFormatter.format(date);
  }

Interpolation directive in HTML file

{{stringifyLocalDateTime(lotto.data_start_act)}}

This way I end up in an error logged in console:

core.js:4197 ERROR TypeError: this._temporal.getLong is not a function
    at DateTimePrintContext.getValue (js-joda.esm.js:3888)
    at NumberPrinterParser.print (js-joda.esm.js:5023)
    at CompositePrinterParser.print (js-joda.esm.js:4742)
    at DateTimeFormatter._formatTo (js-joda.esm.js:6897)
    at DateTimeFormatter.format (js-joda.esm.js:6887)
    at ListaBatchAnnualeComponent.stringifyLocalDateTime (lista-batch-annuale.component.ts:63)
    at ListaBatchAnnualeComponent_div_18_div_12_Template (lista-batch-annuale.component.html:127)
    at executeTemplate (core.js:7303)
    at refreshView (core.js:7172)
    at refreshEmbeddedViews (core.js:8280)

By searching the net I don't find anyone who has had the same or a similar problem. No errors are given at compilation time by Angular.

The question now is: there is something wrong in what I am doing? There is an alternative to display Joda LocalDateTime as a String in an Angular HTML template which do not implies the use of a formatter (the method toString doesn't worked)?

Answer 1

I happened across the same issue and know what caused it for me now.

When I got my response JSON, I thought it was being correctly cast to the correct type ie LocaTime from the @Joda-js/core when in fact my data was being marshalled as string.

It was a little baffling as I had created a custom pipe for formatting the time of day, and also explicitly stating LocalTime as the argument for the function, no errors were being thrown about passing a string instead of a LocalTime.