Search code examples
datepickermicrosoft-teamsdate-formattingadaptive-cards

Given a UTC date, how do you correctly set value for Adaptive Card - Date Picker?


Here is the card template:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Given Date 1",
                    "value": "${string(dueDate)}"
                },
                {
                    "title": "Formatted Date 1",
                    "value": "{{DATE(${string(dueDate)}, COMPACT)}}"
                },
                {
                    "title": "Given Date 2",
                    "value": "${dueDateTicks}"
                },
                {
                    "title": "Formatted Date 2",
                    "value": "${formatTicks(int(dueDateTicks), 'yyyy-MM-dd')}"
                }
            ]
        },
        {
            "type": "Input.Date",
            "id": "date",
            "value": "${formatDateTime(dueDate, 'yyyy-MM-dd')}"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

And here's the sample given data:

{
    "dueDate": "2020-11-30T21:00:00Z",
    "dueDateTicks": "637423668000000000"
}

When you try this on the designer preview, it renders correctly (local @ GMT+8): 2020-12-01

Given Date 1
2020-11-30T21:00:00Z
Formatted Date 1
12/1/2020

Given Date 2
637423668000000000
Formatted Date 2
2020-12-01

DatePicker Value
12/01/2020

see here

But on teams, the Date Picker and formatted date values are off (local @ GMT+8): 2020-11-30

Given Date 1
11/30/2020 21:00:00
Formatted Date 1
12/1/2020

Given Date 2
637423668000000000
Formatted Date 2
2020-11-30

DatePicker Value
30 Nov 2020

see here


Solution

  • The Activity class has a "LocalTimestamp" field that you should use to instantiate the date according the user's locale. See here for more info. Dealing with this is obviously platform specific (you haven't said what platform you're on), but for C#, for instance, you can deal with this via the DateTimeOffset.