Date format in JSON view formatting

Question

I'm formatting the view of a large list in SharePoint. One of the many columns is a date column.

I'm using the following code:

{
"elmType": "span",
"txtContent": "[$Date]",
"style": {"display": "=if([$Date] == '', 'none', 'block')", "padding-left": "3px"}
}

As a result I get the date along with the hour, for example: "16/11/1988 00:00". I only want to see the date, without "00:00".

Can someone help me please?

Thanks.

Answer 1

Simplest solution is to use toLocaleDateString like this:

{
  "rowFormatter": {
    "elmType": "span",
    "txtContent": "=toLocaleDateString([$Date])",
    "style": {
      "display": "=if([$Date] == '', 'none', 'block')",
      "padding-left": "3px"
    }
  }
}

When the user is in the US, for instance, the above format will look similar to 8/26/2020

---

If you need more control you could also use the getDate, getMonth, and/or the getYear operators. For instance, to just show the shortened month and day you could do this:

{
  "rowFormatter": {
    "elmType": "span",
    "txtContent": "=if(getMonth([$Date])==0,'Jan',if(getMonth([$Date])==1,'Feb',if(getMonth([$Date])==2,'Mar',if(getMonth([$Date])==3,'Apr',if(getMonth([$Date])==4,'May',if(getMonth([$Date])==5,'Jun',if(getMonth([$Date])==6,'Jul',if(getMonth([$Date])==7,'Aug',if(getMonth([$Date])==8,'Sept',if(getMonth([$Date])==9,'Oct',if(getMonth([$Date])==10,'Nov','Dec'))))))))))) + ' ' + getDate([$Date])",
    "style": {
      "display": "=if([$Date] == '', 'none', 'block')",
      "padding-left": "3px"
    }
  }
}

This will result in values like Aug 26 regardless of the user's location.

You can find more samples of using dates in formatting here: https://aka.ms/list-formatting

Answer 2

currently only below options can be used for formatting Date-Time value

• toLocaleString()
• toLocaleDateString()
• toLocaleTimeString()

So your code to format date will be as below

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": {
        "operator": "toLocaleDateString()",
        "operands" : ["@currentField"]
    }
}

  

Answer 3

In addition, you could try following code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "txtContent": "@currentField",
  "style": {
    "display": "=if([$Date] == '', 'none', 'block')",
    "padding-left": "3px"
  }
}