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>