How to Display Live Date/Time in Aura Components

In Salesforce Lightning Components, it is often necessary to display live, up-to-date date and time information. Whether it’s for a real-time dashboard, a countdown timer, or any other time-sensitive functionality, having an accurate representation of the current date and time is crucial. In this blog post, we will guide you through the process of setting up live date and time in Salesforce Lightning Components using JavaScript and Aura framework.

Uses and Applications:

Live date and time functionality can be beneficial in various scenarios within Salesforce Lightning Components. Here are a few common use cases:

1. Real-time Dashboards: When building dynamic dashboards, it’s important to display the current date and time to provide users with the most up-to-date information. This allows users to make informed decisions based on real-time data.
2. Countdown Timers: Countdown timers are often used in applications that require time-based actions, such as event registration deadlines, product promotions, or time-limited offers. Displaying a live countdown timer helps create a sense of urgency and improves user engagement.
3. Activity Feeds and Notifications: Live date and time can enhance the user experience by displaying the time when an activity occurred. For example, showing the timestamp of a recent comment or update in an activity feed or notification can provide context and improve the overall user experience.

Component Markup (MyComponent.cmp):

<aura:component>
    <aura:attribute name="getCurrentTime" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

    <div>
        <p>Time: <b>{!v.getCurrentTime}</b></p>
    </div>
</aura:component>

Controller JavaScript (MyComponentController.js):

({
    doinit : function(component, event, helper) {
        // calling helper method to get current time
        helper.updateCurrentTime(component);
    }
})

Helper JavaScript (MyComponentHelper.js):

({
    updateCurrentTime : function(component) {
        let currentTime = new Date();
        currentTime = currentTime.toLocaleTimeString();
        component.set("v.getCurrentTime", currentTime);

        // Call the same function again after 1 second
        setTimeout(function() {
            this.updateCurrentTime(component);
        }.bind(this), 1000);
    }
})

Summary:

Setting live date and time in Salesforce Lightning Components is a valuable feature that enhances the functionality and user experience of your applications. By utilizing JavaScript and the Aura framework, you can easily update the date and time in real-time.

In the provided code snippet, an Aura attribute named “getCurrentTime” is used to store the current time value. The “doinit” function is called on the component’s initialization and triggers the helper method “updateCurrentTime,” which updates the current time using JavaScript’s Date object. The updated time is then displayed in the Lightning component using the “{!v.getCurrentTime}” expression.

To continuously update the time, the “setTimeout” function is used with a delay of 1 second. This ensures that the time is refreshed every second, providing an accurate and live representation of the current time.

Implementing this approach allows you to integrate live date and time functionality into your Salesforce Lightning Components, empowering you to create dynamic, real-time applications that meet your users’ needs.

Hits: 0