JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>DataTables example - Custom filtering - range search</title>
	<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
	<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=8ffc0b31bc8d9ff82fbb94689dd1d7ff">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
	<style type="text/css" class="init">
	
	</style>
	<script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script><script type="text/javascript" src="/media/js/site.js?_=df7cd4213eec7fc146048acf402cae00"></script>
	<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fplug-ins%2Frange_filtering.html" async=""></script>
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
	<script type="text/javascript" class="init">
	
$(document).ready(function() {
	var table = $('#example').DataTable();
	
	// Event listener to the two range filtering inputs to redraw on input
	$('#max').keyup( function() {
		table.draw();
	} );
} );


	</script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css"><script src="https://netfree.link/injection-script/popup-card.min.js" type="text/javascript"></script><script src="https://netfree.link/injection-script/video-send.js" type="text/javascript"></script></head>


<table border="0"...

JavaScript

/* Custom filtering function which will search data in column four between two values */


$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      	date = new Date()
			//var max = $('#max').val(date.getDate()+'-'+ date.getMonth()+'-'+ (date.getFullYear()));
			var max = $('#max').val();
			//var max = `06/10/2010`;
			var coldate = data[0] ; 
			var coldate = coldate.replace("/", '-')
			var coldate = coldate.replace("/", '-')
			//console.log(age)
			//console.log(Date.parse(age) + '**' + Date.parse(max))
			

			if(Date.parse(coldate) <= Date.parse(max)) {
				//console.log(true);
				return true;
			}
			//console.log(false);
			return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#max').keyup( function() {
        table.draw();
    } );
} );