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!!!!

Create Lookup Site Column using Javascript object model in SharePoint 2013 / 2010

Sometimes we need to create a lookup column as a site column to use it in different list or use it in a content type. Below is a simple code to create a Lookup site column using javascript object model. The code works in both SharePoint 2010 and SharePoint 2013 environment.

 jQuery(function($) {   
        CreateSiteLookupColumn();   
 });   
      var clientContext;  
      var oWebSite;  
      var oList;  
      function CreateSiteLookupColumn()  
      {  
         clientContext= new SP.ClientContext.get_current();   
         oWebSite= clientContext.get_web();  
         //Lookup List  
         oList=oWebSite.get_lists().getByTitle('Countries');  
         clientContext.load(oList);  
         clientContext.load(oWebSite);  
         clientContext.executeQueryAsync(function () {  
                 var fieldXml="<Field Name='Country' DisplayName='Country' Type='Lookup' Required='FALSE' Group='Operations'/>";  
                 var lookupField=oWebSite.get_fields().addFieldAsXml(fieldXml,true,SP.AddFieldOptions.addFieldCheckDisplayName);  
                //Cast to Lookup field to set List Name and lookup column       
                 var fieldLookup = clientContext.castTo(lookupField, SP.FieldLookup);  
                 fieldLookup.set_lookupList(oList.get_id());  
                 fieldLookup.set_lookupField("Title");  
                 fieldLookup.update();              
                 clientContext.executeQueryAsync(function () {   
                         alert('Field Added');   
                      }, function (sender, args) {   
                            alert(args.get_message() + '\n' + args.get_stackTrace());   
                      });   
         },function (sender, args) {   
          alert(args.get_message() + '\n' + args.get_stackTrace());   
      });     
 }  

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)