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>
