我想要日期范围选择器以及 output 数据为“DD/MM/YYYY”格式

Question

我希望日期范围选择器的格式应为“DD/MM/YYYY”，并且在选择日期范围时也采用相同的格式，表中的数据也应该采用相同的格式，当用户 select 日期时，output在数据中应以“DD/MM/YYY”格式显示。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<input id="daterange">

<table id="table_1">
  <thead>
    <tr>
      <th>Col1.</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Set 1</td>
      <td data-order="1558358405">20/05/2019</td>
    </tr>
    <tr>
      <td>Set2</td>
      <td data-order="1558357779">20/05/2019</td>
    </tr>
    <tr>
      <td>Set3</td>
      <td data-order="1558348464">20/05/2019</td>
    </tr>
    <tr>
      <td>Set4</td>
      <td data-order="1558348282">20/05/2019</td>
    </tr>
    <tr>
      <td>Set5</td>
      <td data-order="1558106170">17/05/2019</td>
    </tr>
    <tr>
      <td>Set6</td>
      <td data-order="1558106062">17/05/2019</td>
    </tr>
    <tr>
      <td>Set7</td>
      <td data-order="1558090241">17/052019</td>
    </tr>
    <tr>
      <td>Set8</td>
      <td data-order="1556704125">01/05/2019</td>
    </tr>
  </tbody>
</table>

$(function() {
  var table = $("#table_1").DataTable();

  // Date range vars
  minDateFilter = "";
  maxDateFilter = "";

  $("#daterange").daterangepicker();
  $("#daterange").on("apply.daterangepicker", function(ev, picker) {
    minDateFilter = Date.parse(picker.startDate);
    maxDateFilter = Date.parse(picker.endDate);

    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
      var date = Date.parse(data[1]);

      if (
        (isNaN(minDateFilter) && isNaN(maxDateFilter)) ||
        (isNaN(minDateFilter) && date <= maxDateFilter) ||
        (minDateFilter <= date && isNaN(maxDateFilter)) ||
        (minDateFilter <= date && date <= maxDateFilter)
      ) {
        return true;
      }
      return false;
    });
    table.draw();
  });

});

Answer 1

您可以轻松使用插件的locale选项，您可以在此处找到文档。 解决方案可能是这样的

 $(function() { var table = $("#table_1").DataTable(); // Date range vars minDateFilter = ""; maxDateFilter = ""; $("#daterange").daterangepicker({ locale: { format: 'DD/MM/YYYY' } }); $("#daterange").on("apply.daterangepicker", function(ev, picker) { minDateFilter = Date.parse(picker.startDate); maxDateFilter = Date.parse(picker.endDate); $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { var date = Date.parse(data[1]); if ( (isNaN(minDateFilter) && isNaN(maxDateFilter)) || (isNaN(minDateFilter) && date <= maxDateFilter) || (minDateFilter <= date && isNaN(maxDateFilter)) || (minDateFilter <= date && date <= maxDateFilter) ) { return true; } return false; }); table.draw(); }); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script> <input id="daterange"> <table id="table_1"> <thead> <tr> <th>Col1.</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Set 1</td> <td data-order="1558358405">20/05/2019</td> </tr> <tr> <td>Set2</td> <td data-order="1558357779">20/05/2019</td> </tr> <tr> <td>Set3</td> <td data-order="1558348464">20/05/2019</td> </tr> <tr> <td>Set4</td> <td data-order="1558348282">20/05/2019</td> </tr> <tr> <td>Set5</td> <td data-order="1558106170">17/05/2019</td> </tr> <tr> <td>Set6</td> <td data-order="1558106062">17/05/2019</td> </tr> <tr> <td>Set7</td> <td data-order="1558090241">17/052019</td> </tr> <tr> <td>Set8</td> <td data-order="1556704125">01/05/2019</td> </tr> </tbody> </table>