Solved

SharePoint SPServices Format Date

Posted on 2014-10-13
2
1,188 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

Backup Your Microsoft Windows Server®

Backup all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Join & Write a Comment

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…
The Scenario: Let’s say you have a quote worksheet in Excel that you use to work up sales figures and such for your clients. You utilize SharePoint to manage and keep track of these documents. You would like values from your worksheet to populate Sh…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

762 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now