как форматировать дату в jQuery DataTables - PullRequest
Новая
       79

как форматировать дату в jQuery DataTables

0 голосов
/ 18 июня 2020

Я использую jQuery DataTables , и у меня есть несколько столбцов с датами, текущие данные находятся в этом формате 2020-06-18 14:32:45.707, и я хочу отформатировать его и отобразить как 18/06/2020 14.32.

Я применил плагин datetime в DataTables, но все еще не могу заставить его работать.

В настоящее время я использую: 

render: function(data) {
  return moment(data).format('DD/MM/YYYY HH:mm');
}

Что работает нормально . Но я хочу использовать рендеринг: 

render: $.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')

Я включил момент. js и datetime. js в качестве документации говорит, и я должен подать заявку: 

$.fn.dataTable.render.moment(to);

Мои даты отображаются в моей таблице как «недопустимая дата», когда я использую этот метод. ниже представлена ​​демонстрация.

Не могли бы вы объяснить мне, что я делаю не так?: 

$.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')

У меня работает другой метод, но я хочу учиться на своих ошибках, поскольку я потратили много времени на расследование и не смогли понять проблему. Большое спасибо. 

$(document).ready(function() {
  $('#example').DataTable({
    "columnDefs": [{
      //render: $.fn.dataTable.render.moment( 'DD/MM/YYYY HH:mm' )
      "render": function(data) {
        return moment(data).format('DD/MM/YYYY HH:mm');
      },
      "targets": 1
    }]
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>

<table id="example" class="table table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date before format</th>
      <th>date after format</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-06-18 14:32:45.707</td>
      <td>2020-06-18 14:32:45.707</td>
    </tr>
  </tbody>
</table>

1 Ответ

2 голосов
/ 18 июня 2020

Ваша проблема здесь: 

// Argument shifting
if (arguments.length === 1) {
  locale = 'en';
  to = from;
  from = 'YYYY-MM-DD';
}

По умолчанию FROM - 'YYYY-MM-DD', вам нужно указать ВАШ исходный формат. 

const FROM_PATTERN = 'YYYY-MM-DD HH:mm:ss.SSS';
const TO_PATTERN   = 'DD/MM/YYYY HH:mm';

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [{
      render: $.fn.dataTable.render.moment(FROM_PATTERN, TO_PATTERN),
      targets: 1
    }]
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>

<table id="example" class="table table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date before format</th>
      <th>date after format</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-06-18 14:32:45.707</td>
      <td>2020-06-18 14:32:45.707</td>
    </tr>
  </tbody>
</table>
...