Form input date range on submission to filter rest api

Im trying to take 'from' and 'to' date values using input type date html tags and pass on those values as filter in the rest api call on submit button click. This inturn loads div tdrresults.

No luck with the same as i face an error "The expression "(Date ge datetime'Invalid dateT00:00:00.000Z') and (Date le datetime'Invalid dateT00:00:00.000Z')" is not valid."

The div tdrresults needs to load table_id on successful from and to date selection only.

<!DOCTYPE html>    
<html>    
<head>    
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/jquery-3.5.1.js"></script>        
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/jquery.dataTables.min.js"></script>     
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/moment.min.js"></script>     
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/datetime-moment.js"></script>        
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/dataTables.buttons.min.js"></script>         
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/buttons.flash.min.js"></script>          
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/jszip.min.js"></script>      
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/pdfmake.min.js"></script>        
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/vfs_fonts.js"></script>          
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/buttons.html5.min.js"></script>      
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/buttons.print.min.js"></script>      
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/dataTables.select.min.js"></script>  
    <script type="text/javascript" src="SPO_SITE/SiteAssets/js/dataTables.searchBuilder.min.js"></script>   
    <link rel="stylesheet" type="text/css" href="SPO_SITE/SiteAssets/css/jquery.dataTables.min.css">    
    <link rel="stylesheet" type="text/css" href="SPO_SITE/SiteAssets/css/dataTables.jqueryui.min.css">      
    <link rel="stylesheet" type="text/css" href="SPO_SITE/SiteAssets/css/buttons.dataTables.min.css">  
    <link rel="stylesheet" type="text/css" href="SPO_SITE/SiteAssets/css/select.dataTables.min.css">  
    <link rel="stylesheet" type="text/css" href="SPO_SITE/SiteAssets/css/searchBuilder.dataTables.min.css">  
<script>
$(document).ready(function() {   
    $.fn.dataTable.moment( 'DD-MM-YYYY HH:mm' );
    $.fn.dataTable.moment( 'DD-MM-YYYY' ); 
    loadItems();

});    
    
function loadItems() {    
    var fromdate = $("#from").val();
    fromdate = moment(fromdate).format("YYYY-MM-DD");
    var date1 = fromdate+'T00:00:00.000Z';
    var todate = $("#to").val();
    todate = moment(todate).format("YYYY-MM-DD");
    var date2 = todate+'T00:00:00.000Z';
    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;    
    var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('LIST_NAME')/items?$top=500&$select=Created,ACReg,Date&$filter=(Date ge datetime'" +date1+ "') and (Date le datetime'" +date2+ "')";    
    $.ajax({    
        url: oDataUrl,    
        type: "GET",    
        dataType: "json",    
        headers: {    
            "accept": "application/json;odata=verbose"    
        },    
        success: mySuccHandler,    
        error: myErrHandler    
    });    
}    
  
function mySuccHandler(data) {    
    try {    
          
        $('#table_id').DataTable({    
            "pageLength": 100,
            "dom": 'Bfrtip',
            "buttons": [ {extend: 'searchBuilder', config: {columns: [0,1,2,3,4,5,6,7],},}, 'copy', 'csv', 'pdf', {extend: 'print',exportOptions: {columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]}} ],
            "aaData": data.d.results,
            "aaSorting": [[0, "desc"]],
            "aoColumns": [  
            {    
                "mData": "Created",
                "render": function (data, type, row) {
                data = moment(data).format('DD-MM-YYYY HH:mm');
                return data;}               
            },             
            {    
                "mData": "ACReg"    
            },             
            {    
                "mData": "Date",
                "render": function (data, type, row) {
                data = moment(data).format('DD-MM-YYYY');
                return data;}               
            },
            ]    
        });    
    } catch (e) {    
        alert(e.message);    
    }    
}    
    
function myErrHandler(data, errMessage) {    
    alert("Error: " + errMessage);    
}   
</script>

</head>    
<body>   
<input type="date" id="from" name="from">
<input type="date" id="to" name="to">
<input type="submit" value="Submit" id="submit">
 
   <div id="tdrresults"> 
    <table id="table_id" class="display">    
        <thead>    
            <tr>    
                <th>Uploaded</th>    
                <th>Registration</th>                   
                <th>Date</th> 
            </tr>    
        </thead>    
    </table>    
    </div>    
</body>    
</html>