Unable to use DataTable.datetime() in Vue

Unable to use DataTable.datetime() in Vue

lucas_araujolucas_araujo Posts: 13Questions: 6Answers: 0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:

Description of problem:
I have the following script

import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5";
import DateTime from 'datatables.net-datetime';
import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";

import "datatables.net-buttons-bs5";
import "datatables.net-colreorder-bs5";
import "datatables.net-fixedcolumns-bs5";
import "datatables.net-fixedheader-bs5";
import "datatables.net-responsive-bs5";
import "datatables.net-scroller-bs5";
import "datatables.net-select-bs5";

import "datatables.net-buttons/js/buttons.html5.mjs";
import "datatables.net-buttons/js/buttons.print.mjs";
import "datatables.net-buttons/js/buttons.colVis.mjs";

import jszip from "jszip";

DataTablesCore.use(DateTime);
DataTablesCore.Buttons.jszip(jszip);

DataTable.use(DataTablesCore);

columns = [
    {title: 'Nome', data: null, render: (data) => `<a href="${data.id}">${data.nome}</a>`},
    {title: 'Tema', data: 'tema'},
    {title: 'Data', data: 'data', render: DataTable.datetime('DD/MM/YYYY')},
    {title: 'Inicio/Fim', data: null, render: (data) => `${data.hora_inicio} - ${data.hora_fim}`},
    {title: 'Vídeo', data: 'url_video', render: (data) => `<a href="${data}" target="_blank">Assistir</a>`},
    {title: 'Pauta', data: 'upload_pauta', render: (data) => `<a href="${data}" target="_blank">Baixar</a>`},
    {title: 'Ata', data: 'upload_ata', render: (data) => `<a href="${data}" target="_blank">Baixar</a>`},
    {title: 'Anexo', data: 'upload_anexo', render: (data) => `<a href="${data}" target="_blank">Baixar</a>`},
]

Doesn't matter if I use the Datatable.render.datetime or Datatable.datetime, I keep getting this error, even though the interpreter seems to recognize the function after importing datetime and moment

Answers

  • allanallan Posts: 63,676Questions: 1Answers: 10,497 Site admin
    import DateTime from 'datatables.net-datetime';
    

    That is a date picker input. You don't need that library to use DataTable.datetime(). You will need moment or Luxon though:

    import moment from ' moment';
    
    DataTablesCore.use(moment);
    

    Also, make sure the version of DataTables you are installing is v2. It sounds like it might be pulling an old version in.

    Allan

Sign In or Register to comment.