Column Format - Time!

I was working further on this. I think the UTC time adjustment might be useful depending on what one wants to achieve.

I was working on a workaround using to toLocaleTimeString (top band of view) and it displays the Aussie time (see Test Date) as +2. I'm in New Zealand. So I think it's working to the locale on my computer because the locale in the group is Australia. (I have yet to schedule time with a colleague in Australia to see what they see!) - Displaying things in people's local time clearly could have its uses.

Here's the code but note there's some rubbish in there as I'm trying to keep track of things:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-direction": "column",
    "width": "60px",
    "margin": "5px",
    "display": "=if(@currentField,'flex','none')"
  },
  "children": [
    {
      "elmType": "div",
      "title": "Displays month",
      "txtContent": "=if(indexOf(toLocaleTimeString(@currentField) + '^', '^') == 10,substring(toLocaleTimeString(@currentField),0,4),substring(toLocaleTimeString(@currentField),0,5)) + ' ' + if(endsWith(toLocaleTimeString(@currentField),'am') == 'true','am','pm')",
      "description": "=if([$State]=='WA','COB',if([$State]=='NZ',12,if([$State]=='SA','COB',if([$State]=='QLD',0,0))))",
      "style": {
        "display": "flex",
        "justify-content": "center",
        "align-items": "center",
        "width": "100%",
        "height": "20px",
        "border": "1px solid",
        "background-color": "#ec6602",
        "margin-bottom": "-1px"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-borderColor-themePrimary ms-fontWeight-bold"
      }
    },
    {
      "elmType": "div",
      "description": "centre portion needs to display weekday and date",
      "style": {
        "display": "flex",
        "justify-content": "center",
        "align-items": "center",
        "width": "58px",
        "border": "1px solid",
        "border-color": "#ec6602",
        "color": "#ec6602",
        "height": "30px"
      },
      "children": [
        {
          "elmType": "span",
          "description": "Displays weekday",
          "forEach": "weekday in split('0,1,2,3,4,5,6',',')",
          "style": {
            "white-space": "nowrap"
          },
          "attributes": {
            "class": "ms-fontWeight-bold"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "=if([$weekday]=='0','Sat',if([$weekday]=='1','Sun',if([$weekday]=='2','Mon',if([$weekday]=='3','Tue',if([$weekday]=='4','Wed',if([$weekday]=='5','Thu',if([$weekday]=='6','Fri',''))))))",
              "style": {
                "padding": "1px",
                "display": "=if((getMonth(@currentField)+1)>2,if(((getDate(@currentField)+floor(26*(getMonth(@currentField)+1+1)/10)+Number(substring(toString(getYear(@currentField)),2,4))+floor(Number(substring(toString(getYear(@currentField)),2,4))/4)+floor(Number(substring(toString(getYear(@currentField)),0,2))/4)-2*Number(substring(toString(getYear(@currentField)),0,2)))%7)==Number([$weekday]),'','none'),if(((getDate(@currentField)+floor(26*(getMonth(@currentField)+1+12+1)/10)+Number(substring(toString(getYear(@currentField)-1),2,4))+floor(Number(substring(toString(getYear(@currentField)-1),2,4))/4)+floor(Number(substring(toString(getYear(@currentField)-1),0,2))/4)-2*Number(substring(toString(getYear(@currentField)-1),0,2)))%7)==Number([$weekday]),'','none')"
              }
            }
          ]
        },
        {
          "elmType": "span",
          "description": "Displays date",
          "txtContent": "=getDate(@currentField)",
          "style": {
            "padding": "1px"
          }
        }
      ],
      "attributes": {
        "class": "ms-fontWeight-bold ms-fontSize-14"
      }
    },
    {
      "elmType": "div",
      "description": "Displays time - time zone issue",
      "children": [
        {
          "elmType": "span",
          "txtContent": "=padStart(toString(floor(((Number(@currentField)+Number([$UTC])*3600000)%86400000)/3600000)),2,'0')",
          "options": "hour: 'numeric', dayPeriod: 'short'",
          "Description": "Intl.DateTimeFormat('en-US',options).format(@currentField)"
        },
        {
          "elmType": "span",
          "txtContent": ":"
        },
        {
          "elmType": "span",
          "txtContent": "=padStart(toString(floor(((Number(@currentField)+Number([$UTC])*3600000)%86400000)%3600000/60000)),2,'0')"
        }
      ],
      "style": {
        "display": "flex",
        "justify-content": "center",
        "align-items": "center",
        "width": "100%",
        "height": "20px",
        "border": "1px solid",
        "background-color": "#ec6602",
        "margin-bottom": "-1px"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-borderColor-themePrimary ms-fontWeight-bold"
      }
    }
  ]
}

I'll post anything new that comes to light.

Christine