Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

SharePoint SPServices Format Date

Posted on 2014-10-13
2
Medium Priority
?
1,635 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I recently came across an issue with a MOSS 2007 deployment where access into some sub-sites were denied, even for the MOSS farm administrators. A bit of background to the setup of this MOSS farm; this was a three server setup, consisting of a fr…
Summary In SharePoint 2010 it is easy to create custom color themes to jazz up a site. Theme colors can also be created in PowerPoint 2010 with a few clicks. But how do the chosen colors actually look in the SharePoint site? The attached PowerPoint…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

705 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