2

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.

3 Answers 3

2

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

1
  • Perfect solution! Thanks. Aug 27, 2020 at 10:07
0

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"]
    }
}

  
1
  • Thanks for the response, However, I am formatting a whole view and not one single column, so I can't use "@currentField". I have to refer to the column [$Date]. Aug 25, 2020 at 14:24
0

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"
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.