Microsoft 365 : SharePoint Online – Date Column formatting – changing the display of date in datetime list column

Hi All,

Greetings for the day!!!

Today new learning 🙂

Details / Use Case

• One of our user has SharePoint Online site and list
• List having multiple date columns
• Our respective user wants to change the display of date column and hence this article
• Here, for demo purpose I am creating demo list as

• SharePoint shows date format as per the locale selected in Regional Settings – https://knowledgejunction1.sharepoint.com/sites/Demo/_layouts/15/regionalsetng.aspx (Site Settings >> Regional Settings) as

Our user requirement

• Our user want to show date format in “dd – month name – year” as “24 – Jan – 2023”
• To fulfil this requirement we are using “Column Formatting” option
• To change the “Column Formatting” we need to edit the column
• To edit column – we need to go to List Settings and click on column as

Updating Column Formatting

• Column formatting is used to change display of the column
• We use JSON to update the formatting of column
• Here, we need to change the display of column – DateFormat
• Following is the JSON used to update the display of DateFormat column

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

Note : The above sample JSON is for only reference. If we copy-paste from here, it may not work. I would copy from – https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Once we update formatting our display of DateFormat column changes as

Thanks for reading! HAVE A FANTASTIC TIME AHEAD 😊