Display date in dd-MMM-yyyy format in Modern view

Diwakar Kittur 21

I need to display date in dd-MMM-yyyy (eg: 10-Jan-2020) format in sharepoint online Modern view. I have to use OOTB features, no javascript or SPfx. I can use column formatting or adjust locale settings.

Ray Hernandez 1

Here's code that I modified to remove any "-Dec-" or in my case, "--" strings from the Date column. I just used a replace() operator.

Reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#operators

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "span",  
  "txtContent": "=replace(getDate([$DateFormatting]) + '-' + if(getMonth([$DateFormatting])==0,'Jan',if(getMonth([$DateFormatting])==1,'Feb',if(getMonth([$DateFormatting])==2,'Mar',if(getMonth([$DateFormatting])==3,'Apr',if(getMonth([$DateFormatting])==4,'May',if(getMonth([$DateFormatting])==5,'Jun',if(getMonth([$DateFormatting])==6,'Jul',if(getMonth([$DateFormatting])==7,'Aug',if(getMonth([$DateFormatting])==8,'Sep',if(getMonth([$DateFormatting])==9,'Oct',if(getMonth([$DateFormatting])==10,'Nov',if(getMonth([$DateFormatting])==11,'Dec',''))))))))))) + '-' + getYear([$DateFormatting])),'--','')"  
}

Ray Hernandez 1

Here's code that I modified to remove any "-Dec-" or in my case, "--" strings from the Date column. I just used a replace() operator.

Reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#operators

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "span",  
  "txtContent": "=replace(getDate([$DateFormatting]) + '-' + if(getMonth([$DateFormatting])==0,'Jan',if(getMonth([$DateFormatting])==1,'Feb',if(getMonth([$DateFormatting])==2,'Mar',if(getMonth([$DateFormatting])==3,'Apr',if(getMonth([$DateFormatting])==4,'May',if(getMonth([$DateFormatting])==5,'Jun',if(getMonth([$DateFormatting])==6,'Jul',if(getMonth([$DateFormatting])==7,'Aug',if(getMonth([$DateFormatting])==8,'Sep',if(getMonth([$DateFormatting])==9,'Oct',if(getMonth([$DateFormatting])==10,'Nov',if(getMonth([$DateFormatting])==11,'Dec',''))))))))))) + '-' + getYear([$DateFormatting])),'--','')"  
}

2 answers

Allen Xu_MSFT 13,776 Reputation points

2021-03-11T01:50:01.02+00:00
Hi @Diwakar Kittur ,

To display date in "dd-mmm-yyyy", please use the following JSON code to format your column.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "txtContent": "=getDate([$DateFormatting]) + '-' + if(getMonth([$DateFormatting])==0,'Jan',if(getMonth([$DateFormatting])==1,'Feb',if(getMonth([$DateFormatting])==2,'Mar',if(getMonth([$DateFormatting])==3,'Apr',if(getMonth([$DateFormatting])==4,'May',if(getMonth([$DateFormatting])==5,'Jun',if(getMonth([$DateFormatting])==6,'Jul',if(getMonth([$DateFormatting])==7,'Aug',if(getMonth([$DateFormatting])==8,'Sept',if(getMonth([$DateFormatting])==9,'Oct',if(getMonth([$DateFormatting])==10,'Nov','Dec'))))))))))) + '-' + getYear([$DateFormatting])" }

Remember to replace $DateFormatting with the date column name in your end. Test result in my environment:

An another way to achieve this is to create a Calculated(caculation based on other columns) column and use the below formula:

=TEXT([DateColumnName],”dd-mmm-yyyy”)

Test result in my environment:

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Allen Xu_MSFT 13,776 Reputation points

2021-03-15T02:11:59.477+00:00

@Diwakar Kittur ,

I'm checking to see how things are going on this thread. Please let me know if you would like further assistance. If the reply is helpful to you, you could accept it as answer.

Allen Xu_MSFT 13,776 Reputation points

2021-03-18T05:46:12.197+00:00

@Diwakar Kittur ,

If the issue is resolved, you could accept the helpful answer. It will be beneficial to others in this forum who meet the same issue in the future. Thanks for your understanding.

Allen Xu_MSFT 13,776 Reputation points

2021-03-24T08:59:49.043+00:00

@Diwakar Kittur ,

If an answer is helpful to you, please remember to accept it as answer. Thanks for your understanding.

keerthana k 1 Reputation point

2021-09-25T15:34:18.183+00:00

Hi @Allen Xu_MSFT ,

I too have the same requirement as Diwakar. I just tried your Json code by replacing the date column with mine (start_Q3). I am getting the below output.

F

what I need is, if there is no value in the date column it should be blank. Kindly help me if to modify my JSON code as I have multiple date columns in my list.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "span",
"txtContent": "=getDate([$Start_Q3]) + '-' + if(getMonth([$Start_Q3])==0,'Jan',if(getMonth([$Start_Q3])==1,'Feb',if(getMonth([$Start_Q3])==2,'Mar',if(getMonth([$Start_Q3])==3,'Apr',if(getMonth([$Start_Q3])==4,'May',if(getMonth([$Start_Q3])==5,'Jun',if(getMonth([$Start_Q3])==6,'Jul',if(getMonth([$Start_Q3])==7,'Aug',if(getMonth([$Start_Q3])==8,'Sept',if(getMonth([$Start_Q3])==9,'Oct',if(getMonth([$Start_Q3])==10,'Nov','Dec'))))))))))) + '-' + getYear([$Start_Q3])"
}

Ashesh Sharma 1 Reputation point

2022-01-19T22:11:19.13+00:00

Hi @Allen Xu_MSFT

Could you share a solution for this, even I am facing the same situation. For blank dates it displays -Dec-
Thanks
Ashesh

Diksha Kumari 1 Reputation point

2022-03-14T06:39:07.857+00:00

Hi @Allen Xu_MSFT
,
I tried your above JSON code, but it is showing one day previous date.

Eg when I provided 10/03/2022, it automatically returned 09/03/2022.

Would you please help me how to fix this?
Sign in to comment
Ashesh Sharma 1 Reputation point

2022-02-03T16:39:28.47+00:00

Hi Diwakar here is the updated code, I just used this for mine- I added "-TBD-" when its blank

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "span",
"txtContent": "=getDate([$Start_Q3]) + '-' + if(getMonth(([$Start_Q3])=='','TBD-',if([$Start_Q3])==0,'Jan',if(getMonth([$Start_Q3])==1,'Feb',if(getMonth([$Start_Q3])==2,'Mar',if(getMonth([$Start_Q3])==3,'Apr',if(getMonth([$Start_Q3])==4,'May',if(getMonth([$Start_Q3])==5,'Jun',if(getMonth([$Start_Q3])==6,'Jul',if(getMonth([$Start_Q3])==7,'Aug',if(getMonth([$Start_Q3])==8,'Sept',if(getMonth([$Start_Q3])==9,'Oct',if(getMonth([$Start_Q3])==10,'Nov','Dec'))))))))))) + '-' + getYear([$Start_Q3])"
}

Let me know if this helps
Please sign in to rate this answer.
Ray Hernandez 1 Reputation point

2022-08-10T05:04:32.38+00:00

@Ashesh Sharma

You can use the replace() operator to replace any "-TBD-" strings with a blank.

Reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#operators

Your code should look like:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "txtContent": "=replace(getDate([$Start_Q3]) + '-' + if(getMonth(([$Start_Q3])=='','TBD-',if([$Start_Q3])==0,'Jan',if(getMonth([$Start_Q3])==1,'Feb',if(getMonth([$Start_Q3])==2,'Mar',if(getMonth([$Start_Q3])==3,'Apr',if(getMonth([$Start_Q3])==4,'May',if(getMonth([$Start_Q3])==5,'Jun',if(getMonth([$Start_Q3])==6,'Jul',if(getMonth([$Start_Q3])==7,'Aug',if(getMonth([$Start_Q3])==8,'Sept',if(getMonth([$Start_Q3])==9,'Oct',if(getMonth([$Start_Q3])==10,'Nov','Dec'))))))))))) + '-' + getYear([$Start_Q3]),'-TBD-','')" }

Kirsten Johnson 0 Reputation points

2023-12-22T21:47:06.4733333+00:00

I was having some issues with this, getting errors and having the year dropped off any dates that were in January. I found a fix. Putting it here in case it helps anyone. There is no -Dec- result or NaN errors.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "span", "txtContent": "=getDate([$DateColumn]) + '-' + if(getMonth([$DateColumn])==0,'Jan',if(getMonth([$DateColumn])==1,'Feb',if(getMonth([$DateColumn])==2,'Mar',if(getMonth([$DateColumn])==3,'Apr',if(getMonth([$DateColumn])==4,'May',if(getMonth([$DateColumn])==5,'Jun',if(getMonth([$DateColumn])==6,'Jul',if(getMonth([$DateColumn])==7,'Aug',if(getMonth([$DateColumn])==8,'Sept',if(getMonth([$DateColumn])==9,'Oct',if(getMonth([$DateColumn])==10,'Nov',if(getMonth([$DateColumn])==11,'Dec','-')))))))))))) + '-' + getYear([$DateColumn])" }
Sign in to comment