Format date in SharePoint 2013

Question

I have a date field in SharePoint 2013 list. Using SP Service am retrieving the date field value. The value is retrieved as 2017-5-24 00:00:00. I want to format the date as May 5 2017. Can this be done using jquery?

Answer 1

Try below code:

String.format("{0:MMM} {0:dd} {0:yyyy}",new Date(ows_Date)); 

In the new Date()function, pass the column name of the date field

Excellent reference - Changing date format using javascript

Update - you need to write a custom function as below:

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

function convertSPDate(d) {

    // split apart the date and time
    var xDate = d.split(" ")[0];
    var xTime = d.split(" ")[1];

    // split apart the hour, minute, & second
    var xTimeParts = xTime.split(":");
    var xHour = xTimeParts[0];
    var xMin = xTimeParts[1];
    var xSec = xTimeParts[2];

    // split apart the year, month, & day
    var xDateParts = xDate.split("-");
    var xYear = xDateParts[0];
    var xMonth = xDateParts[1];
    var xDay = xDateParts[2];

    var dDate = new Date(xYear, xMonth-1, xDay, xHour, xMin, xSec);
    return dDate;
}

This will return the spservices column to a date object.

After that, you can use it as below:

var convertedDate = convertSPDate($(this).attr("ows_Date"));

var formattedDate = monthNames[convertedDate.getMonth()] + ' ' + convertedDate.getDate() + ' ' + convertedDate.getFullYear();

Modified from here - jQuery function for formatting dates in SharePoint with SPServices

xMonth modified to xMonth-1

Answer 2

You do not need a library in order to display it like that.

var dateString = "2017-5-24 00:00:00";
var date = new Date(dateString);
date.toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' }); // May 24, 2017

For further options you may also take a look at this post about date formatting.

Answer 3

You can do that using moment.js. Please go to the site https://momentjs.com/ , get moment.js from the site and add its reference to your code. You can convert your date in the expected format shown on the home page.