Lightning Aura Components JavaScript – Compatible Version of moment.js with Locker Service

I want to reliably find the days between two dates in a Lightning Component and https://momentjs.com/ has this capability. But does it work with the July 2017 Locker Service?

This Moment JS format returns function string in Lightning Spring 17 could be interpreted as saying that it should.

But it is not listed in this February 2017 LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components and is mentioned in the comments as being a source of some difficulty.

Best Answer

Just played around with the latest version of Moment.js , 2.18.1 and seems to play nicely with locker .

Summer 17 whitelisted InstanceOf operator in locker API and that seems to have made Moment.js compatible with locker .

Here are the functions and components that i just tested and seemed to work fine 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<ltng:require scripts="{!$Resource.momentJS}"
afterScriptsLoaded="{!c.afterScriptsLoaded}" />

The Controller class

({
afterScriptsLoaded : function(component, event, helper) {
    console.log(moment().format('MMMM Do YYYY, h:mm:ss a')); // July 11th 2017, 11:23:19 am
    console.log(moment().format('dddd'));                    // Tuesday
    console.log(moment().format("MMM Do YY"));               // Jul 11th 17
    console.log(moment().format('YYYY [escaped] YYYY'));     // 2017 escaped 2017
    console.log(moment().format());                          // 2017-07-11T11:23:19-04:00
    console.log(moment("20111031", "YYYYMMDD").fromNow()); // 6 years ago
    console.log(moment("20120620", "YYYYMMDD").fromNow()); // 5 years ago
    console.log(moment().startOf('day').fromNow());        // 11 hours ago
    console.log(moment().endOf('day').fromNow());          // in 13 hours
    console.log(moment().startOf('hour').fromNow());       // 27 minutes ago
    console.log(moment().subtract(10, 'days').calendar()); // 07/01/2017
    console.log(moment().subtract(6, 'days').calendar());  // Last Wednesday at 11:28 AM
    console.log(moment().subtract(3, 'days').calendar());  // Last Saturday at 11:28 AM
    console.log(moment().subtract(1, 'days').calendar());  // Yesterday at 11:28 AM
    console.log(moment().calendar());                      // Today at 11:28 AM
    console.log(moment().add(1, 'days').calendar());       // Tomorrow at 11:28 AM
    console.log(moment().add(3, 'days').calendar());       // Friday at 11:28 AM
    console.log(moment().add(10, 'days').calendar());      // 07/21/2017
    console.log(moment.locale());         // en
    console.log(moment().format('LT'));   // 11:29 AM
    console.log(moment().format('LTS'));  // 11:29:23 AM
    console.log(moment().format('L'));    // 07/11/2017
    console.log(moment().format('l'));    // 7/11/2017
    console.log(moment().format('LL'));   // July 11, 2017
    console.log(moment().format('ll'));   // Jul 11, 2017
    console.log(moment().format('LLL'));  // July 11, 2017 11:29 AM
    console.log(moment().format('lll'));  // Jul 11, 2017 11:29 AM
    console.log(moment().format('LLLL')); // Tuesday, July 11, 2017 11:29 AM
    console.log(moment().format('llll'));
    var now = moment();
    console.log(now);
    var day = moment(1318781876406);
     console.log(day);
    }
 })

The console seems to print all the results as expected

enter image description here

Here is a sample MomentJs code that works under locker to find difference between dates

var now = "04/09/2013 15:00:00";
    var then = "02/09/2013 14:20:30";
    var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
    var d = moment.duration(ms);
    var s = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss");
    console.log(s);
Related Topic