Using Moment to format a date from a Sharepoint list

Question

Afternoon

I'm new to using Moment and need to format a date from SharePoint in JavaScript. The variable is LifeCycleStart and I don't know the right way to format it and drop in Moment. Here's what I've got:

call.done(function (data,textStatus, jqXHR){
    $.each(data.d.results, function(index, item) {
        var tempID = item.Id;
        var tempTitle = item.Title;
        var LifeCycleStart = item.DeviceAvailableFrom   
        var LifeCycleStatus = item.LifeCycleStatusValue
        var DeviceOverView = item.Description
        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
});

Answer 1

If you have moment loaded just use moment like this:

var LifeCycleStart = moment(item.DeviceAvailableFrom, "MM-DD-YYYY");

You can look at more formats here in the documentation. There are plenty of formats, and you probably will find what you are looking to output.

Answer 2

As you mentioned in comments that you want to format date to DD-MM-YYYY, you dont require moment js to be loaded. SharePoint itself provides the necessary functions to format date as per your requirement.

Danny Engelman, one of the community's top contributors has provided an excellent answer at the below link:

Changing date format using javascript

So, for your case, you can use it as below:

var LifeCycleStart = String.format('{0:dd}-{0:MM}-{0:yyyy}',new Date(item.DeviceAvailableFrom))

So your overall code would be as below:

call.done(function (data,textStatus, jqXHR){
    $.each(data.d.results, function(index, item) {
        var tempID = item.Id;
        var tempTitle = item.Title;
        var LifeCycleStart = String.format('{0:dd}-{0:MM}-{0:yyyy}',new Date(item.DeviceAvailableFrom));
        var LifeCycleStatus = item.LifeCycleStatusValue;
        var DeviceOverView = item.Description;
        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
});

Based on your comments, can you try below code. I am using the replace method to change the string format:

call.done(function (data,textStatus, jqXHR){
    $.each(data.d.results, function(index, item) {  

        var tempID = item.Id;
        var tempTitle = item.Title;
        var LifeCycleStart = item.DeviceAvailableFrom.replace(/\//g, '-');
        var LifeCycleStatus = item.LifeCycleStatusValue;
        var DeviceOverView = item.Description;
        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
});

Answer 3

Load moment.js and do this:

var date = item.DeviceAvailableFrom;
var LifeCycleStart = moment(date).format('DD-MM-YYYY');