June 14, 2019

lightning:relativeDateTime

When you provide a timestamp or JavaScript Date object, lightning:relativeDateTime displays a string that describes the relative time between the current time and the provided time.

Sample code:

Component:

  1. <aura:component implements = "force:appHostable">  
  2.       
  3.     <aura:attribute name="pastDay" type="Object"/>  
  4.     <aura:attribute name="today9AM" type="Object"/>  
  5.     <aura:attribute name="now" type="Object"/>  
  6.     <aura:attribute name="futureday" type="Object"/>  
  7.     <aura:handler name="init" value="{! this }" action="{! c.init }" />      
  8.       
  9.     <div class="slds-box slds-theme_default">   
  10.   
  11.         <div class="slds-m-vertical_small">  
  12.             Past Date:  
  13.             <strong><lightning:relativeDateTime value="{! v.pastDay }"/></strong>  
  14.         </div>  
  15.       
  16.         <div class="slds-m-vertical_small">  
  17.             Today 9:00 AM:  
  18.             <strong><lightning:relativeDateTime value="{! v.today9AM }"/></strong>  
  19.         </div>  
  20.       
  21.         <div class="slds-m-vertical_small">  
  22.             Right now:  
  23.             <strong><lightning:relativeDateTime value="{! v.now }"/></strong>  
  24.         </div>  
  25.       
  26.         <div class="slds-m-vertical_small">  
  27.             Future Date:  
  28.             <strong><lightning:relativeDateTime value="{! v.futureday }"/></strong>  
  29.         </div>     
  30.           
  31.     </div>   
  32.       
  33. </aura:component>  

Component Controller:

  1. ({  
  2.       
  3.     init: function (cmp) {  
  4.           
  5.         var today = new Date();  
  6.         cmp.set( 'v.pastDay'new Date( '1999-02-01' ) );  
  7.         cmp.set( 'v.today9AM'new Date().setHours( 9,0,0,0 ) );  
  8.         cmp.set( 'v.now', Date.now() );  
  9.         cmp.set( 'v.futureday'new Date( today.getFullYear() + 15, today.getMonth(), today.getDate() ) );  
  10.           
  11.     }     
  12.       
  13. })  

Output:


No comments:

Post a Comment