Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

SharePoint SPServices Format Date

Posted on 2014-10-13
2
Medium Priority
?
1,678 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 2000 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

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

Question has a verified solution.

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

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…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

972 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