Solved

SharePoint SPServices Format Date

Posted on 2014-10-13
2
1,373 Views
Last Modified: 2014-10-23
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
Comment
Question by:brendanlefavre
2 Comments
 
LVL 15

Accepted Solution

by:
colly92002 earned 500 total points
ID: 40379532
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
 

Author Closing Comment

by:brendanlefavre
ID: 40400890
worked perfectly
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When installing SharePoint 2010 RTM I came across a strange error, I was getting timeouts during the installation. I searched the web and found the best solution to be found here (http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010genera…
I used to be SharePoint evangelist in our company, so my Outlook always full of questions about how to do this, or where I can find that. One day I found such an email with the following question: "how to attach 3-State workflow (one of the workflow…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question