Format Date columns in SharePoint

Column formatting in SharePoint has been around for a while but today I was asked about making how to format date columns to appear appear like yyyy-MM-dd.

The requirements

In my SharePoint library I’ve got a date field that currently displays as 03/06/2025 (3 June 2025), now we want to display this as 2025-06-03. Yes you could update your locale settings in your site for some reformatting but there are some limitations with that as well.

Functions needed to format date columns

For the solution we need a few functions. For the full reference to the available functions please check out the Microsoft documentation. If only we had a formatdatetime function like we have in Power Automate and Power Apps. Unfortunately we will have to do a bit more work in column formatting.

GetMonth – this will get the month number from a date column

GetDate – this will get the day number from a date column

GetYear – gets the year from the date column.

If – allows you to generate output depending on a condition

Length – checks the length of a text

ToString – converts numbers or date data in to text fields

Get the current column

As we want to format a column we could reference the column using the following syntax: [$ColumnName]

However to get to the current column you can also use @CurrentField. This means that if you want to apply this field formatting to your lost you can simply copy the code I have included in this post. For all examples I have used the current field reference.

Formatting the date column

Now that we have looked at the functions and column names, we can create the full column formatting json script. Please notice that the txtContent property doesn’t allow any formatting. all the json has to be included in a single text without any new lines.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "span",  
  "txtContent": "=if(length(toString(@currentField)) == 0, '', toString(getYear(@currentField)) + '-' +  toString(getMonth(@currentField)+1) + '-' + toString(getDate(@currentField)) )"
}  

Once I apply this in the settings to my date field, I’m seeing the new data format appear as we want the dates to appear. The initial check for the length of the data field is to make sure that we haven’t got an empty value. Empty values we simply want to appear as an empty text. If you prefer to display a text like No date provided then that is possible as well. Simply replace the ‘ ‘ with whatever text you like to appear.

Adding leading zeros

In the above screenshot we can see that we are nearly there. In our example we can see that the day and the month numbers appear without leading zeros.

To get the leading zeros into the month and date. This is why I used the slightly confusing date of 03/06 ( this is 6 March in the US and 3 June in the rest of the world)

To get the leading zeros in the following small update to our code will help:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "txtContent": "=if(length(toString(@currentField)) == 0, '', toString(getYear(@currentField)) + if(getMonth(@currentField) > 9,'-', '-0') +   toString(getMonth(@currentField)+1),  + if(getDate(@currentField) > 9,'-', '-0') + toString(getDate(@currentField)) )"
}

This change results in the date column being formatted as shown below in my library