File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/datetime/1.5.5/css/dataTables.dateTime.min.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.5.5/js/dataTables.dateTime.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table border="0" cellspacing="5" cellpadding="5">
        <tbody><tr>
            <td>Minimum date:</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>Maximum date:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody></table>
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Date</th>
          </tr>
        </thead>
​
​
    </div>
  </body>
</html>
​
CSSSaved
 
`body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
var data = [
  {
    id: 1,
    date: 'Apr 4, 2025'
  },
  {
    id: 2,
    date: 'Apr 3, 2025'
  },
];
​
var table = new DataTable('#example', {
  columnDefs: [{
    targets: 1,
    render: DataTable.render.datetime('MMM DD, YYYY')
  }],
    "columns": [
      {"data": "id", "visible": false, "searchable": false},
      {"data": "date", "width": "5%"},
    ],
    data: data,
});
      
​
let minDate, maxDate;
DataTable.ext.search.push(function (settings, data, dataIndex) {
  let min = minDate.val();
  let max = maxDate.val();
  let date = new Date(data[1]);
console.log('min:', min)
console.log('max:', max)
console.log('date:', date)
console.log(min <= date, date <= max)
  if (
    (min === null && max === null) ||
    (min === null && date <= max) ||
    (min <= date && max === null) ||
    (min <= date && date <= max)
  ) {
    return true;
  }
  return false;
});
minDate = new DateTime('#min', {
  format: 'MMM DD, YYYY'
});
maxDate = new DateTime('#max', {
  format: 'MMM DD, YYYY'
});
document.querySelectorAll('#min, #max').forEach((el) => {
  el.addEventListener('change', () => table.draw());
});
4 errors 6 warnings
Line 26: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 28: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 29: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 30: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 31: Missing semicolon.
Line 32: Missing semicolon.
Line 33: Missing semicolon.
Line 34: Missing semicolon.
Line 51: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 52: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers