Преобразование даты Moment.js не работает с DataTable

Question

У меня есть DataTable, который содержит даты, отформатированные так: "/Date(1185336000000)/".

В следующем коде я следовал документам DataTable, чтобы интегрировать Moment.js для преобразования даты - либо ячто-то отсутствует или мой код написан неправильно.Или оба.

Есть мысли по этому поводу?Я считаю, что часть проблемы связана с function loadPH, но я не хочу ее удалять.

Фрагмент JS:

import $ from 'jquery';
import admissData from '../JSON/sk-admiss.json';
import DataTable from 'datatables.net';

import moment from 'moment';

function loadPH() {
    let admissText = admissData.d.results
    .filter(x => x.p_h_v !== "")
    .map(function(val) {
        return {
            "PH": val.p_v_h,
            "Stuff": val.stuff,
            ...
            ...
            "Date of Admission": val.dateofadmission,
            ... // ----- irrelevant info
        }
    })

    $.fn.DataTable.moment('MMM Do YY'); // ---- console error: "default.a.fn.DataTable.moment is not a function"
    $('#prohac-table').DataTable({
        columns: [
            { data: "PH" },
            { data: "Stuff" },
            ...
            ...
            { data: "Date of Admission" },
            ... // ----- irrelevant info
        ],
        columnDefs: [{
            type: 'date',
            targets: [4]
        }],
        data: admissText
    });

}

loadPH();

Фрагмент HTML:

<script src="index.js"></script>

    <script 
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script     
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script 
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>

    <script 
      src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

    <script 
      src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

    <script 
      src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>

Answer 1

Обновление: я немного покопался, и решение включало работу с columnDefs:

        { data: "x" },
        { data: "y" },
        { data: "z" },
        { data: "zz" },
        { data: "Date of Admission" }, // ----- target
        ...
           { data: "Classification" }
        ],
        columnDefs: [
            {"type":"unix","targets":4,"render": function(data) { 
                return moment.utc(data, "x").format('MM/DD/YYYY')
            }}, // targets must be plural
        ],

Answer 2

Вот как я должен обработать странную дату формат "/Date(1185336000000)/", который я считаю меткой времени Unix в миллисекундах.

Сначала удалите эту строку из своего кода: $.fn.DataTable.moment('MMM Do YY');

Тогда processStrangeDate() ( Не стесняйтесь переименовывать его, как вам нравится ) будет функция для извлечения метки времени Unix и преобразования ее с помощью Moment.js

function parseDate(strangeDate){
  return moment(parseInt(strangeDate.split("(")[1])).format('MMM Do YY');
}

Вот простая демонстрация:

var strangeDate = "/Date(1185336000000)/";

// A function to process that strange date format
function processStrangeDate(strangeDate){
  return moment(parseInt(strangeDate.split("(")[1])).format('MMM Do YY');
}

// Processing example
var strangeDate = "/Date(1185336000000)/";
console.log(processStrangeDate(strangeDate));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

И как использовать его в DataTables:

// A function to process that strange date format
function processStrangeDate(strangeDate){
  return moment(parseInt(strangeDate.split("(")[1])).format('MMM Do YY');
}

// Example in dataTables using columnDef
$("#example").dataTable({
  data:[
    ["Line 1","/Date(1185336000000)/","/Date(1185336000000)/"]
  ],
  columnDefs:[
    {
      targets:2, render: function(data){  // Target is the column # zero-based
        return processStrangeDate(data);
      }
    }
  ]

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>

<!-- Above is your CDN calls untouched... I just added some CSS below -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.css" rel="stylesheet"/>

<table id="example">
  <thead>
    <th>Something</th>
    <th>Strange Date</th>
    <th>Processed Date</th>
  </thead>
  <tbody>
  </tbody>
</table>

CodePen