Hello friends, In this post, I will provide an example, that shows you how we can set date or datetime format in lightning:datatable. Lightning datatable is widely used in lightning components and lightning web components. so this post will help lots of people who are beginner with lightning datatable. So let's get started,

Datetime and Date format in lightning:datatable

Here i am give a code example that help to modify format of date and date/time fields in lightning datatable.

For Datetime field:

 {label: 'Datetime field label', fieldName: 'Datetimefield',type: 'date',
 typeAttributes:{day:'numeric',month:'short',year:'numeric',
 hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:true}}
OR 
 {label: 'Datetime field label', fieldName: 'Datetimefield',type: 'date',
 typeAttributes:{day:'2-digit',month:'2-digit',year:'2-digit',
 hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:true}}
For Date field:
 {label: 'Date field label', fieldName: 'Datefield',type: 'date',
 typeAttributes:{day:'numeric',month:'short',year:'numeric'}}
OR 
 {label: 'Date field label', fieldName: 'Datefield',type: 'date',
 typeAttributes:{day:'2-digit',month:'2-digit',year:'numeric'}}

Note: Above date or date/time format syntaxes is also applicable in Lightning Web Components.

Code Example:

DatatableHandler.apxc 

 public class DatatableHandler {    
    @AuraEnabled
    public static List<Account> getAccounts(){
        return [SELECT Id,Name,Industry,AccountNumber,DOB__c,CreatedDate FROM Account];                       
    }    
 }
DateTimeinDatatable.cmp
 <aura:component controller="DatatableHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
	<aura:attribute name="results" type="Account[]"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:layout multipleRows="true" horizontalAlign="center">
        <lightning:layoutItem padding="around-small" size="12">             
            <lightning:datatable keyField="id" data="{!v.results}"
                                 columns="{!v.mycolumns}"
                                 resizeColumnDisabled="true"
                                 hideCheckboxColumn="true"
                                />            
        </lightning:layoutItem>       
    </lightning:layout>   
 </aura:component>
DateTimeinDatatableController.js
 ({
    doInit : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Name', fieldName: 'Name',type: 'text'},
            {label: 'Industry', fieldName: 'Industry',type: 'text'},
            {label: 'AccountNumber', fieldName: 'AccountNumber',type: 'text'},
            {label: 'Date of Birth', fieldName: 'DOB__c',type: 'date',
            typeAttributes:{month: "2-digit",day: "2-digit",year: "numeric"}},
            {label: 'Created Date', fieldName: 'CreatedDate',type: 'date',
             typeAttributes:{day:'numeric',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:true}}
        ]);
        var action=component.get("c.getAccounts");
        action.setCallback(this,function(e){            
            if(e.getState()=='SUCCESS'){
                var results=e.getReturnValue(); 
                console.log(results);
                if(results.length>0){
                    component.set('v.results', results);                                          
                }
            }
        });
        $A.enqueueAction(action);
    },    
 })

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.