0

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?

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

  • I tried...String.format("{0:MMM} {0:dd} {0:yyyy}",new Date($(this).attr("ows_Date"))); But it is not working it is showing NAN – Dheeraj May 24 '17 at 9:54
  • gotcha , have updated answer. Can you check now ? – Gautam Sheth May 24 '17 at 10:08
  • If the date is December 31 2017...It is showing as January 31 2018... – Dheeraj May 24 '17 at 10:37
  • xMonth modified to xMonth-1...It is working fine now...Thanks – Dheeraj May 24 '17 at 10:47
  • oh cool ! Was about to do that ! – Gautam Sheth May 24 '17 at 10:53
1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.