JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<div class="input-group input-daterange">
<span id="date-label-from" class="input-group-addon">From: </span>
<input type="text" id="min" class="form-control">
<span id="date-label-to" class="input-group-addon">To: </span>
<input type="text" id="max" class="form-control">
</div>
</div>
<table id="divDT" class="table table-striped table-bordered table-hover table-condensed" style="text-align:center;">
</table>
JavaScript
$(document).ready(function()
{
getAllSubmittedRecords();
//Date picker
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex )
{
var min = $('#min').val();
var max = $('#max').val();
var date_submitted = data[7] || 0;
if (min == "" && max == "") { return true; }
if (min == "" && date_submitted <= max) { return true;}
if(max == "" && date_submitted >= min) {return true;}
if (date_submitted <= max && date_submitted >= min) { return true; }
return false;
}
);
//for date selection
$("#min").datepicker({ onSelect: function () { oTable.draw(); }, changeMonth: true, changeYear: true, dateFormat:"yy-mm-dd"});
$("#max").datepicker({ onSelect: function () { oTable.draw(); }, changeMonth: true, changeYear: true, dateFormat:"yy-mm-dd"});
});
function getAllSubmittedRecords()
{
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + ListName,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data)
{
var items = data.d.results;
if(items.length > 0)
{
for (var i = 0; i < items.length; i++)
{
var projectName = items[i].ProjectName;
var submissionDate = items[i].SubmissionDate;
...