Bind SharePoint list datetime field values using ECMAScript

In this post, I will show how to bind the SharePoint list datetime field values using ECMAScript

Desired Output:

We can use the below script to get the desired output as shown above

<script type="text/javascript" src="~/SiteAssets/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

            ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

    });

        function retrieveListItems() {

        //Get the current context 

          var clientContext = new SP.ClientContext.get_current();

          var oList = clientContext.get_web().get_lists().getByTitle('TeamTasks');

          //Query

          var camlQuery = new SP.CamlQuery();

          camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Status" /><Value Type="Choice">In Progress</Value></Eq></Where></Query></View>');

          this.collListItem = oList.getItems(camlQuery);

          clientContext.load(collListItem);

          clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

    }

    function onQuerySucceeded(sender, args) {

        var innerhtml = "<table><tr><th><td>Task Name</td><td> Task Due Date</td></th></tr>";

        var MyDate = new Date();

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();

            MyDate = oListItem.get_item('DueDate');

            innerhtml += "<tr><th><td>" + oListItem.get_item('Title') + "</td><td>" + MyDate.format('d MMM yyyy') + "</td></th></tr>";

        }

        innerhtml += "</table>";

        PendingTasksdiv.innerHTML = innerhtml;

    }

    function onQueryFailed(sender, args) {

        //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

    }

</script>

<h3>Pending Team Tasks</h3>

<div id="PendingTasksdiv"></div>

Display SharePoint 2010 list data using REST and AngularJS

In this post, I’ll show how to display SharePoint 2010 list data using REST and AngularJS. 

Firstly create a list e.g. EmployeeDetails as shown below and add few records

Add the Html form web part with below code

<!--Angular JS file reference--> <script type="text/javascript" src="/SiteAssets/angular.min.js"></script> <script type="text/javascript"> var siteURL = "siteURL"; var spApp = angular.module('listmodule', []); //Service spApp.service('EmployeeListService', ['$http', '$q', function ($http, $q) {     //Get the Employees     this.getEmployees = function (listName) {         var dfd = $q.defer();         var completeUrl = siteURL + "_vti_bin/listdata.svc/" + listName + "?$select=";         completeUrl += 'Id,Title,Technology&$orderby=Id asc';         $.ajax({             url: completeUrl,             type: "GET",             headers: { "accept": "application/json;odata=verbose" },             success: function (data) {                 dfd.resolve(data.d.results);             },             error: function (xhr) {                 dfd.reject('Error : (' + xhr.status + ') ' + xhr.statusText + ' Message: ' + xhr.responseJSON.error.message.value);             }         });         return dfd.promise;     } }]); //Controller spApp.controller('EmployeeDetailsController', function ($scope, EmployeeListService) {     EmployeeListService.getEmployees("EmployeeDetails").then(         function (result) {             $scope.listitems = [];             angular.forEach(result, function (item) {                 var listitem = {                     ID: item.Id,                     Title: item.Title,                     Technology: item.Technology                 }                 $scope.listitems.push(listitem);             });             $scope.orderByField = 'ID';             $scope.reverseSort = false;         },         function (reason) {             $scope.errMessage = reason;         }); }); </script> <div ng-app="listmodule">     <div ng-controller="EmployeeDetailsController">         <div>             <table id="tblEmployeeDetailsList">                         <thead>                             <tr>                                 <th>                                     <a href="#" ng-click="orderByField='ID'; reverseSort = !reverseSort">ID <span ng-show="orderByField == 'ID'">                                         <span ng-show="!reverseSort"></span></span></a>                                 </th>                                 <th>                                     <a href="#" ng-click="orderByField='Title'; reverseSort = !reverseSort">Employee Name                                         <span ng-show="orderByField == 'Title'"><span ng-show="!reverseSort"></span></span>                                     </a>                                 </th>                                 <th>                                     <a href="#" ng-click="orderByField='Technology'; reverseSort = !reverseSort">Technology                                         <span ng-show="orderByField == 'Technology'"><span ng-show="!reverseSort"></span>                                         </span></a>                                 </th>                             </tr>                         </thead>                         <tbody>                             <tr ng-repeat="item in listitems | filter:query | orderBy:orderByField:reverseSort">                                 <td>                                     {{ item.ID }}                                 </td>                                 <td>                                     {{ item.Title }}                                 </td>                                 <td>                                     {{ item.Technology }}                                 </td>                             </tr>                         </tbody>                     </table>                         </div>     </div> </div>

Result :