ben tedder

This is more of a follow-up to my post yesterday on how to convert dates from SharePoint to javascript. Today I’ll show you how to pull a list of dates from SharePoint (as well as other fields), push them into an array, and then sort that array by date.

Problem: Pull a list of reservations from a SharePoint and order them chronologically. There are three fields, firstName, lastName, and startTime. We want to pull all three fields, and then output those fields into an unordered list. As an added trick, we have several reservation lists we need to pull from (Elementary School, Middle School, and High School). So all reservations need to be pulled, and then sorted chronologically.

Solution 1: Just modify your CAML query to OrderBy the startTime field. Well, this works fine. But when pulling from multiple lists (using SPServices), the results will essentially be “grouped” by list.

Solution 2: Push all results to a javascript array, then sort the array. The problem here is that SharePoint’s date/time field isn’t very javascript-y. So sorting won’t work.

Solution 3: Use the convertSPDate() function mentioned in yesterday’s post on converting dates from SharePoint to javascript, then follow solution 2!

Here’s the code (commented with explanations):

In a recent project I was looking for a way to sort an array of dates brought back from SharePoint. This worked fine in Chrome, but then I realized it didn’t work in any other browsers! So, by writing a few console.log() lines to test with Safari & FireFox, I discovered that the date that SharePoint passes is seen to javascript as an “invalid date” to almost all browsers. So, here’s a small helper function that just converts what you get from SharePoint into a true javascript Date() object. Hope you find it helpful! I’ve also included it in my code section as a Gist, so grab just the function there if you’d like.

function convertSPDate(d) {
/*
*	A function to convert a standard SharePoint
*	date/time field (YYYY-MM-DD HH:MM:SS) to a
*	javascript Date() object
*
*	Author: Ben Tedder (www.bentedder.com)
*/
    // 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, xDay, xHour, xMin, xSec);
	return dDate;
}

	// create a couple of variables
	var startTime;
	var convertedStartTime;

	// a standard SPServices call
	$().SPServices({
		operation: "GetListItems",
		webURL: myListURL,
		async:false,
		listName: myListName,
		CAMLRowLimit: 1,
		completefunc: function (xData, Status) {
			$(xData.responseXML).SPFilterNode("z:row").each(function(i){
				// set the value of startTime to standard SP date/time field
				startTime = $(this).attr("ows_startTime");
			})
		}
	});

	// set the convertedStartTime to a true javascript date
	convertedStartTime = convertSPDate(startTime);