jquerylaravel-5datatableslaravel-datatables

Format date column in datatables


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.


Solution

  • 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