Adaptive Card Date Format dd/MM/yyyy - adaptive-cards

Question

I'm trying to format an Adaptive card date to dd/MM/yyyy
using this data:
{
"Due_Date": "2020-09-20T06:08:00Z",
}
I tried these formats:
{
"type": "TextBlock",
"text": "Due Date: {{DATE(${$root.Due_Date}, COMPACT)}} "
},
{
"type": "TextBlock",
"text": "Due Date: ${formatDateTime(Due_Date, 'dd/MM/yyyy')}"
}
and I got this render from AC Studio:
When I use the designer I get this result:
Using:
{
"title": "Date Only",
"value": "{{DATE(${start}, COMPACT)}}"
},
This is the problem I am having with my card rendering as MM/dd/yyyy.
So AC Viewer is using my locale but the browser is using some other locale.
Even more interesting look at the time. that time has had 12 hours added on to it!
I'd like to tell this card that to use my locale, can I configure the SDK to use my locale. Why is the browser not using my locale?
Using AC Studio My locale is EN-AU , I don't think it's using it at all :-(
Rendered using Javascript SDK and AC Studio in VS Code, same in AC Designer
TIA. all suggestions welcome

Answer 1

There's various ways to format dates on AdaptiveCards when using Adaptive Expressions.
There's a nice sample card here: https://www.madewithcards.io/cards/adaptive-expressions-playing-with-dates
[{
"title": "Date Only",
"value": "${formatDateTime(start, 'yyyy-MM-dd')}"
}, {
"title": "Time Only",
"value": "${formatDateTime(start, 'HH:mm')}"
}, {
"title": "Date and Time",
"value": "${formatDateTime(start, 'dd.MM.yyyy HH:mm')}"
}, {
"title": "Long Date",
"value": "${formatDateTime(start, 'dddd dd. MMMM yyyy')}"
}, {
"title": "Short Date",
"value": "${formatDateTime(start, 'MM MMMM y')}"
}, {
"title": "Short Date with Time",
"value": "${formatDateTime(start, 'dd.MM.yy - hh:mm')}"
}]

Answer 2

I have submitted this as an Issue for the Javascript SDK https://github.com/microsoft/AdaptiveCards/issues/4842