• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1734
  • Last Modified:

SharePoint SPServices Format Date

The date is currently being returned using UTC format, and I would like to change it to a more friendly format

Current:
Approved Drafts due to CFM 2014-10-08 00:00:00 - 2014-10-08 23:59:00

Desired:
Approved Drafts due to CFM 10/8/2014 00:00 to 10/8/2014 23:59

JSRequest.EnsureSetup();
   
   var today = new Date();
   var months={"January" : 0,
   "February" : 1,
   "March" : 2,
   "April" : 3,
   "May" : 4,
   "june" : 5,
   "July" : 6,
   "August" : 7,
   "September" : 8,
   "October" : 9,
   "November" : 10,
   "December" : 11
   };
   
   var currDate = new Date();
   var calliHtml;
   var itemURL;
   var eventDuration;
   var date,endDate;
   var currentDate =  null;  
   var calendarDate;
   var siteRelUrl = L_Menu_BaseUrl;
   var currentTime;
   var hours;
   var minutes;
   var lastday;
   var isNextMnth;
   var camlFields;
   var camlQuery;
   var camlOptions;  
   var i;
   var CalenderListName;
   var guid;
   var listUrlName;
   
	$(document).ready(function() {	
		$(".divDatePicker").datepicker();		
		CalLoad();
	});
	function PageLoadFun(IsPageLoad,Isprev,Isnext)
	{		
		CalLoad();	
	}
	$(document).delegate('a.ui-datepicker-next,a.ui-datepicker-prev', 'click', function() {			
		CalLoad();
		//$(".ui-datepicker-prev .ui-icon-circle-triangle-w").removeClass("ui-icon ui-icon-circle-triangle-w").addClass("glyphicon glyphicon-chevron-left").text("");
		//$(".ui-datepicker-next .ui-icon-circle-triangle-e").removeClass("ui-icon ui-icon-circle-triangle-e").addClass("glyphicon glyphicon-chevron-right").text("");
	});
	function CalLoad(){
		FillCalendar(today.getFullYear(), today.getMonth()+1, today.getDate(), false);
        
		$('div[id*=eventPopUp],a.ui-state-default').click(function(event){event.stopPropagation();});  	
	}

    function FillCalendar(year, month, date, isNextMnth){
      calendarDate = year + "-" + month + "-" + date;
      camlFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='Location' /><FieldRef Name='Description' /><FieldRef Name='fRecurrence' /><FieldRef Name='RecurrenceData' /><FieldRef Name='RecurrenceID' /><FieldRef Name='fAllDayEvent' /></ViewFields>";
	  camlQuery = "<Query><CalendarDate>" + calendarDate + "</CalendarDate><Where><DateRangesOverlap><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='RecurrenceID' /><Value Type='DateTime'>Month</Value></DateRangesOverlap></Where><OrderBy><FieldRef Name='EventDate' /></OrderBy></Query>";
      camlOptions = "<QueryOptions><CalendarDate>" + calendarDate + "</CalendarDate><RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion><ExpandRecurrence>TRUE</ExpandRecurrence><DateInUtc>FALSE</DateInUtc></QueryOptions>";

    $().SPServices({
    //webURL:url,
	operation: "GetListItems",
	async: false,
	listName: "{9FAC1A53-A3AC-4447-B842-31DC9068AD1F}", 
	CAMLViewFields: camlFields,
	CAMLQuery: camlQuery,
	CAMLQueryOptions: camlOptions,
	completefunc: processResult
	});
 }


function processResult(xData, status) {	
$("#UpcomingEvents").html("");	
    lastday = new Date();
    i = 7 - (currDate.getDay()+1);
    lastday.setDate(lastday.getDate()+i);    
	
	$("div[id*=_eventPopUp]").remove();				
	
    $(xData.responseXML).find("z\\:row, row").each(function() {
    date = new Date($(this).attr("ows_EventDate").substring(0,4), 
    				$(this).attr("ows_EventDate").substring(5,7)-1, 
    				$(this).attr("ows_EventDate").substring(8,10), 
    				$(this).attr("ows_EventDate").substring(11,13), 
    				$(this).attr("ows_EventDate").substring(14,16), 
    				$(this).attr("ows_EventDate").substring(17,19));
    endDate = new Date($(this).attr("ows_EndDate").substring(0,4), 
    				$(this).attr("ows_EndDate").substring(5,7)-1, 
    				$(this).attr("ows_EndDate").substring(8,10), 
    				$(this).attr("ows_EndDate").substring(11,13), 
    				$(this).attr("ows_EndDate").substring(14,16), 
    				$(this).attr("ows_EndDate").substring(17,19));
	if(date.getMonth() == months[$(".ui-datepicker-month").text()]){
		$("#UpcomingEvents").append('<li class="divCalendarLI"><a class="anchCalLi" href="' + siteRelUrl + '/Lists/Calendar/DispForm.aspx?ID=' + $(this).attr("ows_ID") + '" target="_blank">' + $(this).attr("ows_Title") + '</a> ' + $(this).attr("ows_EventDate") + ' - ' + $(this).attr("ows_EndDate") + '</li>');
	}
    while(endDate >= date ){
	if(date.getMonth() == months[$(".ui-datepicker-month").text()]){
	if(date.getDate()){    	
    	itemURL=siteRelUrl + "/Lists/Calendar/DispForm.aspx?ID=" + $(this).attr("ows_ID");
    if($(this).attr("ows_fAllDayEvent") == '1'){
    eventDuration = "(All day event)";
    }
    else{
    eventDuration = '(' + getFormattedTime($(this).attr("ows_EventDate")) + ' - ' + getFormattedTime($(this).attr("ows_EndDate")) + ')';
    }   
               
    $('.ui-datepicker-calendar a').removeClass("has-event");
    
    $('.ui-datepicker-calendar a')
    .filter(function(index){
            return  $(this).text() == date.getDate() && 
                    $(this).parent('td').attr("data-year") == date.getFullYear() && 
                    $(this).parent('td').attr("data-month") == date.getMonth();
       }).css("border", "2px solid #2989d1");            
            
    if(currentDate == null){
        CreatePopUp(date, eventDuration, itemURL, $(this).attr("ows_Title"));        
	 }
    
    else if(date.getDate() != currentDate.getDate()){
        CreatePopUp(date, eventDuration, itemURL, $(this).attr("ows_Title"));
     }
     
     else if(date.getDate() == currentDate.getDate()){
        calliHtml = '<li class="divCalendarLI"><a class="anchCalLi" href="' + itemURL + '" target="_blank">' + $(this).attr("ows_Title") + '</a> ' + eventDuration + '</li>';
        $("#" + date.getDate() + "_eventPopUp" + " .divCalendarUL").append(calliHtml);
		
    }
   }
   date.setDate(date.getDate() + 1); 
   }
   else
   {
   break;
   }
	}
	
       
  }); 
}   


    function getFormattedTime(eventDate){
    currentTime = new Date(eventDate.substring(0,4), eventDate.substring(5,7)-1, eventDate.substring(8,10), eventDate.substring(11,13), eventDate.substring(14,16), eventDate.substring(17,19));
    hours = currentTime.getHours();
    minutes = currentTime.getMinutes();
    if (minutes < 10){
    minutes = "0" + minutes;
    }
    if(hours > 11){
      if(hours > 12){
      return (hours - 12) + ":" + minutes + " "+ "PM";
      }
      else{
      return hours + ":" + minutes + " " + "PM";
      }
    } 
    else {
    return hours + ":" + minutes + " " + "AM";
    }
    }

 function CreatePopUp(eventDate, eventDuration, itemURL, title){
  
    
    //if($("#" + date.getDate() + "_eventPopUp").html()!=null){
    //    $("#" + date.getDate() + "_eventPopUp").empty();
    //}
    
  	$('.ui-datepicker-calendar a')
       .filter(function(index){
            return  $(this).text() == date.getDate() && 
                    $(this).parent('td').attr("data-year") == date.getFullYear() && 
                    $(this).parent('td').attr("data-month") == date.getMonth();
       }).parent('td').append("<div class='eventPopUpDiv' id='" + date.getDate() + "_eventPopUp' style='display:none'></div> ");
          
    $('.ui-datepicker-calendar a')
       .filter(function(index){
            return  $(this).text() == date.getDate() && 
                    $(this).parent('td').attr("data-year") == date.getFullYear() && 
                    $(this).parent('td').attr("data-month") == date.getMonth();
            }).parent('td').mouseover(function(){
            document.getElementById($(this).find('a').first().text() + "_eventPopUp").style.display = "inline";
       });           
 
     
      $('.ui-datepicker-calendar a')
       .filter(function(index){
            return  $(this).text() == date.getDate() && 
                    $(this).parent('td').attr("data-year") == date.getFullYear() && 
                    $(this).parent('td').attr("data-month") == date.getMonth();
            }).parent('td').mouseout(function(){
            document.getElementById($(this).find('a').first().text() + "_eventPopUp").style.display = "none";
      });    		
       
       calliHtml = '<li class="divCalendarLI"><a class="anchCalLi" href="' + itemURL + '" target="_blank">' + title + '</a> ' + eventDuration + '</li>';       
       
       $("#" + date.getDate() + "_eventPopUp").append("<h3 class='calHead'>" + date.toLocaleDateString() + "</h3 >");
       $("#" + date.getDate() + "_eventPopUp").append("<ul class = 'divCalendarUL'>"); 
       $("#" + date.getDate() + "_eventPopUp" + " .divCalendarUL").append(calliHtml);   
       if($("#" + date.getDate() + "_eventPopUp").html()!=null)
       {       
       		var ind=$("#" + date.getDate() + "_eventPopUp").html().indexOf("><h3");
       		if(ind > -1){
      			var first=$("#" + date.getDate() + "_eventPopUp").html().substring(0,ind);
      			$("#" + date.getDate() + "_eventPopUp").empty()      		  	        
	      	    $("#" + date.getDate() + "_eventPopUp").append(first);
	      	    
       		}
       }
  } 

Open in new window

0
brendanlefavre
Asked:
brendanlefavre
1 Solution
 
colly92002Commented:
You should be able to do this in jQuery or use javascript Date.parse().

Found a solution in here:
http://stackoverflow.com/questions/6525538/convert-utc-date-time-to-local-date-time-using-javascript

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime()+date.getTimezoneOffset()*60*1000);

    var offset = date.getTimezoneOffset() / 60;
    var hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate;   
}

Open in new window


Usage:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received));

Open in new window


Display the date based on the client local setting:

date.toLocaleString();

Open in new window

0
 
brendanlefavreAuthor Commented:
worked perfectly
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now