Date column showing incorrect value for different timezone using javascript object model in SharePoint 2013

When you have multiple users in different zones, you will see the date value varies based on different timezone. The date which we are getting using javascript object model shows the local computer time and not the server time.

Suppose I have a list with column named "DateCompleted". I have added a new row with DateCompleted as 3/16/2015 12:00 AM.

When you use javascript client object model and display the date in web page. The result for teh below lines varies by differnt timezone.

var dateCompleted = oListItem.get_item('DateCompleted');

EST Timezone = > dateCompleted =  3/16/2015 12:00 AM.   (Server time)

PST Timezone = > dateCompleted =  3/15/2015 09:00 PM. 

To resolve the issue and display always the server time, you need to query the list again and use SP.Utilities.Utility.formatDateTime function. 

Below is the code you can refer to get the server time.

1:    var ctx = new SP.ClientContext(spotTargetSiteUrl);  
2:    var web = ctx.get_web();  
3:    var dateCompleted = oListItem.get_item('DateCompleted');  
4:    var dateStr = SP.Utilities.Utility.formatDateTime(ctx, web, dateCompleted, SP.Utilities.DateTimeFormat.dateOnly);  
5:    ctx.executeQueryAsync(  
6:       function (sender, data) {  
7:            // the below line will give you the server time  
8:           var serverDateCompleted = new Date(dateStr.m_value);  
9:       },  
10:       function (sender, args) {  
11:         ULSOnError(args.get_message(), document.location.href, 0);  
12:       }  
13:       );  

The line 8 above will give you the server time.

Hope this post will help you in resolving the date issue for different timezone.

Happy coding!!!!

How to perform operations using Javascript Object Model and SharePoint

A good collection of "How to" article using Javascript object model (JSOM) on MSDN. It will be useful in developing apps in SharePoint 2013.

• How to: Work with Websites Using JavaScript
• How to: Retrieve List Items Using JavaScript
• How to: Create, Update, and Delete List Items Using JavaScript
• How to: Retrieve Lists Using JavaScript
• How to: Create, Update, and Delete Lists Using JavaScript
• How to: Work with Users and Groups Using JavaScript
• How to: Work with Roles Using JavaScript
• How to: Break Role Assignment Inheritance Using JavaScript
• How to: Add and Modify User Custom Actions Using JavaScript
• How to: Work with Web Parts on a Page Using JavaScript

Paging in list items using javascript object model in SharePoint 2013

Paging can be useful when you want to improve the performance of page. Using javascript object model, you can implement the paging in apps or in any custom page. Below is the example of paging with page size 2 and paging can be perform by Load more button.

Html code to be added in web page.

 <div id="divMain"></div>  
 <input id="btnMore" type="button" value="Load More" onclick="LoadMore()"></input>  

Javascript code to perform paging using javascipt object model and jQuery

 var context;  
 var oList;  
 var oListItems;  
 var query;  
 jQuery(function($) {  
       var scriptbase = _spPageContextInfo.webServerRelativeUrl + "_layouts/15/";   
      $.getScript(scriptbase + "SP.js", GetListItems);  
 });  
 function GetListItems() {  
   context = SP.ClientContext.get_current();  
   oList = context.get_web().get_lists().getByTitle('Colors');  
   query = new SP.CamlQuery();  
   //Do specify the row limit  
   query.set_viewXml("<View><ViewFields><FieldRef Name='Title'/></ViewFields><RowLimit>2</RowLimit></View>");  
   oListItems = oList.getItems(query);  
   context.load(oListItems);  
   context.executeQueryAsync(onQuerySucceeded,onQueryFailed);  
 }  
 function onQuerySucceeded() {  
   var listEnumerator = oListItems.getEnumerator();  
   var message="";  
   while (listEnumerator.moveNext()) {  
      message+=listEnumerator.get_current().get_item("Title")+"<br/>";  
    }  
    $("#divMain").append(message);  
       var position = oListItems.get_listItemCollectionPosition();  
       if (position == null)  
       {  
            $("#btnMore").hide();  
       }  
 }  
 function onQueryFailed(sender, args) {  
   alert('Error: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());  
 }  
 function LoadMore()  
 {  
       //Get the id of the last item with paging info  
       var position = oListItems.get_listItemCollectionPosition();  
   //If no items present, position will be null  
   if (position != null) {  
     query.set_listItemCollectionPosition(position);  
     oListItems = oList.getItems(query);  
        context.load(oListItems);  
        context.executeQueryAsync(onQuerySucceeded,onQueryFailed);  
   }   
 }  
   

Below is the result of paging with 5 items (page size=2)