Format date column in datatables

Question

i need format date in my datatable column, i´m reading documentation, but i don´t know how i can to do it.

i have this code for create my datatable:

var callTable = $('#calls').DataTable({
        dom: 'Bfrtip',
        language: {
            url: "{{ asset('js/plugins/datatables/spanish.json') }}",
        },
        buttons: [
            'pdf'
        ],
        processing: true,
        serverSide: true,
        ajax: "{{ route('jefasala.listado.getCall') }}",
        columnDefs: [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input type="checkbox" class="checkboxes" name="id[]" value="' + $('<div/>').text(data).html() + '">';
            },
        }],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        // if datatable it´s correct created
        "drawCallback": function( settings ) {
            fillSelectOperator();

            // this change operator for call
            $(".select_operator").on("change", function(e){
                let callId = $(e.target).closest('tr').find("td:eq(1)").html();
                let operatorId = $(this).val();
                let token = $('meta[name=csrf-token]').attr('content'); 

                var modalConfirm = function(callback){
  
                    $("#modalConfirm").modal('show');

                    $("#confirmOperator").on("click", function(){
                        $.ajax({
                            url: "{{ route('jefasala.listado.llamadas.asignar') }}",
                            type: "POST",
                            data: { "callId": callId, "operatorId": operatorId, "_token":token },
                            success: function(response){
                                $("#assignOk").show();
                                $("#assignOk").append(response);
                                location.reload();
                            },
                            error: function(xhr){
                                $("#errorAssign").show();
                                $("#errorAssign").append(xhr.responseText);
                            }
                        });
                        $("#modalConfirm").modal('hide');
                    });
                    
                    $("#cancelOperator").on("click", function(){
                        callback(false);
                        $("#modalConfirm").modal('hide');
                    });
                };

                modalConfirm(function(confirm){
                    if(confirm){
                       console.log("eee");
                    }else{
                        //Acciones si el usuario no confirma
                        $("#result").html("NO CONFIRMADO");
                    }
                });
            });

all data for fill it, it´s in db, i´m working with backend laravel 5.6 and datatables yajra.

My table it´s:

<table id="calls" class="table table-hover table-condensed display mb-5" style="width:100%">
    <thead class="thead-dark">
        <tr>
            <th>
                <input style="style=border: none; background: transparent; font-size: 14px;" type='checkbox' id='checkall' class="checkall">
            </th>
            <th>Id</th>
            <th>Nombre</th>
            <th>Direccion</th>
            <th>Provincia</th>
            <th>Ciudad</th>
            <th>Teleoperador/a</th>
            <th>Reasignar</th>
            <th>Est.Llamada</th>
            <th>Est.Cita</th>
            <th>F.Asignacion</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Direccion</th>
            <th>Direccion</th>
            <th>Provincia</th>
            <th>Ciudad</th>
            <th>Teleoperador/a</th>
            <th>Reasignar</th>
            <th>Estado Llamada</th>
            <th>Estado Cita</th>
            <th>Fecha Asignacion</th>
        </tr>
    </tfoot>
</table>{{-- TABLE CALL --}}

and in my controller return instance of Datatable:

$llamadas = DB::table('users')->join('llamada', 'users.id', '=', 'llamada.id_teleoperadora')
                                      ->join('llamada_estado', 'llamada_estado.id', '=', 'llamada.id_estado')
                                      ->join('cita', 'llamada.id', '=', 'cita.id_llamada')
                                      ->join('cita_estado', 'cita.id_estado', '=', 'cita_estado.id')
                                      ->select(
                                                'llamada.id AS identi','llamada.nomape as nombre',
                                                'llamada.ciudad as ciudad', 'llamada.provincia as provincia',
                                                'llamada.direccion as direccion','llamada.cp as cp', 
                                                'llamada.telefono as telefono','users.nombre AS teleoperadora',
                                                'llamada_estado.nombre AS estado', 'cita_estado.nombre as estadoCita',
                                                'llamada.fecha_asignacion as fechaAsignacion', 'llamada.updated_at as updated'
                                            )
                                      ->get();

        
                                    
        return Datatables::of($llamadas)
            ->addColumn('action', function(){
                $btn = '<a href="#" data-toggle="modal" data-target="#modalCall" class="editCall btn btn-primary btn-sm">
                            <i class="fas fa-eye"></i>
                        </a>';
                return $btn;
            })
            ->rawColumns(['action'])
            ->make(true);

But i don´t know how i can to format this date.

Thanks for help.

How do you want it formatted? – BeerusDev Jul 09 '21 at 13:40 — BeerusDev, Jul 09 '21 at 13:40
@BeerusDev i want to formated in DD-MM-YYYY HH::mm:ss – scorpions78 Jul 09 '21 at 16:05 — scorpions78, Jul 09 '21 at 16:05

score 0 · Answer 1 · answered Jul 09 '21 at 08:51

0

You can use the createRow callback from datatable

fnCreatedRow : function (nRow, aData, iDataIndex)
            {
                  let date = (aData[1]); // assume date is in column 1
                  // format date here
                  $('td:eq(1)', nRow).html(date);
            },

answered Jul 09 '21 at 08:51

Thallius

2,482
2
18
36

thanks for your comment, but i don´t understand very well how i can to do this – scorpions78 Jul 09 '21 at 09:22
Sorry but so you need to learn more basics instead of doing such complex things. You only have to put my code in the creation of the datable. That is super easy – Thallius Jul 09 '21 at 10:04

score 0 · Accepted Answer · answered Jul 10 '21 at 15:02

I resolve my question with:

{ data: 'fechaAsignacion', render: function (data, type, row) {
                return moment(new Date(data).toString()).format('DD/MM/YYYY HH:mm:ss');
                } 
            },

In my column with date use moment to create format with my format i have to include moment library jquery

Format date column in datatables

2 Answers2