1

comunidad, estoy intentando de poder formatear las fecha en datatable, pero no he tenido existo, ya ingrese la librería moment de javascritp, pero no eh tenido éxito, realmente desconozco porque no me muestra el formato correcto de las fechas. Les dejo el código completo de mi JS. Tambien anexo capturas de mi ventana modal, que al momento de dar de alta un registro me muestra el formato correcto, pero al momento de guardarse la información y mostrarlo en datatable me muestra el formato 2022-12-07

$(document).ready(function () {
  var id, opcion;
  opcion = 4;


  
  //Procedimiento para el filtrado de busqueda dentro del tFoot
  $("#tablaReportes tfoot th").each(function () {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Filtrar.." />');
  });
 
  $.fn.dataTable.moment('dddd, MMMM Do, YYYY');
  tablaReportes = $("#tablaReportes").DataTable({
    order: [[0, "desc"]], //or asc
    dom: 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
    responsive: false,
    language: {
      url: "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json",
    },
    //"order": [[ 0, "desc" ]],
    initComplete: function () {
      this.api()
        .columns()
        .every(function () {
          var that = this;

          $("input", this.footer()).on("keyup change", function () {
            if (that.search() !== this.value) {
              that.search(this.value).draw();
            }
          });
        });
    },

    colReorder: true,
    fixedHeader: true,
    scrollY: "600px",
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    columnDefs: [{ width: "20%", targets: 0 }],
    fixedColumns: true,
    ajax: {
      url: "../controlador/reportes.php",
      method: "POST",
      data: { opcion: opcion },
      dataSrc: "",
    },
    //Cambio de idiomas
    language: {
      decimal: "",
      emptyTable: "No hay test",
      info: "Mostrando desde el _START_ al _END_ del total de _TOTAL_ registros",
      infoEmpty: "Mostrando desde el 0 al 0 del total de  0 registros",
      infoFiltered: "(Filtrados del total de _MAX_ registros)",
      infoPostFix: "",
      thousands: ",",
      lengthMenu: "Mostrar _MENU_ registros por página",
      loadingRecords: "Cargando...",
      processing: "Procesando...",
      search: "Buscar:",
      zeroRecords: "No se ha encontrado nada  atraves de ese filtrado.",
      paginate: {
        first: "Primero",
        last: "Última",
        next: "Siguiente",
        previous: "Anterior",
      },
      aria: {
        sortAscending: ": activate to sort column ascending",
        sortDescending: ": activate to sort column descending",
      },
    },
    columns: [
      { data: "id" },
      { data: "folio" },
      { data: "nombre" },
      { data: "apellido" },
      { data: "direccion" },
      { data: "descripcion_domicilio" },
      { data: "telefono" },
      { data: "num_contrato" },
      { data: "fecha_inicio" },
      { data: "hora_inicio" },
      { data: "fecha_final" },
      { data: "hora_final" },
      {
        data: "cuadrilla",
        render: function (data) {
          switch (data) {
            case "RFCI":
              data =
                '<span class="badge badge-pill badge-primary">Operación ciudad</span>';
              break;
            case "ROMS":
              data =
                '<span class="badge badge-pill badge-primary">Operación megasistema</span>';
              break;
            case "RDRE":
              data =
                '<span class="badge badge-pill badge-secondary">Drenajes</span>';
              break;
            case "RTP":
              data =
                '<span class="badge badge-pill badge-secondary">Tomas tapadas</span>';
              break;
            case "RCLO":
              data =
                '<span class="badge badge-pill badge-info">Cloración</span>';
              break;
            case "RBA":
              data = '<span class="badge badge-pill badge-dark">Bacheo</span>';
              break;
            case "RTC":
              data =
                '<span class="badge badge-pill badge-info">Contratos</span>';
              break;
              case "RTCC":
              data =
                '<span class="badge badge-pill badge-info">Contratos Corte</span>';
              break;
              case "RTCB":
              data =
                '<span class="badge badge-pill badge-info">Contratos Bacheo</span>';
              break;
            case "ROTR":
              data = '<span class="badge badge-pill badge-info">Otros</span>';
              break;
            default:
              data = "";
          }
          return data;
        },
      },
      {
        data: "estatus",
        render: function (data, type, row, meta) {
          switch (data) {
            case "inicio":
              data = '<span class="badge badge-warning">Inicio</span>';
              break;
            case "pendiente":
              data = '<span class="badge badge-warning">Pendiente</span>';
              break;
            case "terminado":
              data = '<span class="badge badge-success">Terminado</span>';
              break;
            case "cancelado":
              data = '<span class="badge badge-danger">Cancelado</span>';
              break;
            default:
              data = "";
          }
          return data;
        },
      },
      { data: "observaciones" },
      { data: "encargado_cuadrilla" },
      { data: "otra_descripcion" },
      {
        defaultContent: `<div class='text-center'><div class='btn-group'><button class='btn btn-success btn-sm btnPrint'><i class='material-icons'>print</i></button><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>`,
      },
    ],

  
    //Uso de los botones
    dom: "Bfrtip",
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    buttons: [
      {
        extend: "copyHtml5",
        text: '<i class="fas fa-regular fa-copy"></i>',
        className: "btn btn-warning",
        exportOptions: {
          columns: [0, ":visible"],
        },
      },
      {
        extend: "excelHtml5",
        text: '<i class="fas fa-file-excel"></i> ',
        titleAttr: "Exportar a Excel",
        className: "btn btn-success",
       },
      {
        extend: "pdfHtml5",
        text: '<i class="fas fa-file-pdf"></i> ',
        titleAttr: "Exportar a PDF",
        className: "btn btn-danger",
        orientation: "landscape",
        pageSize: "LEGAL",
      },
      "colvis",
    ],
  });

  var fila; //captura la fila, para editar o eliminar
  //submit para el Alta y Actualización
  $("#formReportes").submit(function (e) {
    e.preventDefault(); //evita el comportambiento normal del submit, es decir, recarga total de la página

    // Obtener el formulario
    var form = $(this)[0];

    // Objeto FormData
    var data = new FormData(form);

    // agregamos la opcion
    data.append("opcion", opcion);

    $.ajax({
      url: "../controlador/reportes.php",
      type: "POST",
      enctype: "multipart/form-data",
      data: data,
      processData: false,
      contentType: false,
      success: function (data) {
        console.log(data);
        tablaReportes.ajax.reload(null, false);
      },
    });
    $("#modalCRUD").modal("hide");
  });

  //para limpiar los campos antes de dar de Alta una Persona
  $("#btnNuevo").click(function () {
    opcion = 1; //alta
    id = null;
    $("#formReportes").trigger("reset");
    $(".modal-header").css("background-color", "#224abe");
    $(".modal-header").css("color", "white");
    $(".modal-title").text("Alta Reportes");
    $("#modalCRUD").modal("show");
  });

  //Generar Reportes
  $(document).on("click", ".btnPrint", function (e) {
    window.open(
      "./../Reports/orden.php?id=" +
      Number(
        e.target.parentNode.parentNode.parentNode.parentNode.parentNode.querySelector(
          ".sorting_1"
        ).textContent
      ),
      "_black"
    );
  });

  //Editar
  $(document).on("click", ".btnEditar", function (e) {
    e.preventDefault();
    opcion = 2; //editar
    fila = $(this).closest("tr");
    //id = parseInt(fila.find("td:eq(0)").text()); //capturo el ID
    id = tablaReportes.row($(this).closest("tr")).data()["id"];
    folio = tablaReportes.row($(this).closest("tr")).data()["folio"];
    nombre = tablaReportes.row($(this).closest("tr")).data()["nombre"];
    apellido = tablaReportes.row($(this).closest("tr")).data()["apellido"];
    direccion = tablaReportes.row($(this).closest("tr")).data()["direccion"];
    descripcion_domicilio = tablaReportes.row($(this).closest("tr")).data()[
      "descripcion_domicilio"
    ];
    telefono = tablaReportes.row($(this).closest("tr")).data()["telefono"];
    num_contrato = tablaReportes.row($(this).closest("tr")).data()[
      "num_contrato"
    ];
    fecha_inicio = tablaReportes.row($(this).closest("tr")).data()[
      "fecha_inicio"
    ];
    hora_inicio = tablaReportes.row($(this).closest("tr")).data()[
      "hora_inicio"
    ];
    fecha_final = tablaReportes.row($(this).closest("tr")).data()[
      "fecha_final"
    ];
    hora_final = tablaReportes.row($(this).closest("tr")).data()["hora_final"];
    cuadrilla = tablaReportes.row($(this).closest("tr")).data()["cuadrilla"];
    estatus = tablaReportes.row($(this).closest("tr")).data()["estatus"];
    observaciones = tablaReportes.row($(this).closest("tr")).data()[
      "observaciones"
    ];
    encargado_cuadrilla = tablaReportes.row($(this).closest("tr")).data()[
      "encargado_cuadrilla"
    ];
    otra_descripcion = tablaReportes.row($(this).closest("tr")).data()[
      "otra_descripcion"
    ];
    $("#id").val(id);
    $("#folio").val(folio);
    $("#nombre").val(nombre);
    $("#apellido").val(apellido);
    $("#direccion").val(direccion);
    $("#descripcion_domicilio").val(descripcion_domicilio);
    $("#telefono").val(telefono);
    $("#num_contrato").val(num_contrato);
    $("#fecha_inicio").val(fecha_inicio);
    $("#hora_inicio").val(hora_inicio);
    $("#fecha_final").val(fecha_final);
    $("#hora_final").val(hora_final);
    $("#cuadrilla").select2().val(cuadrilla).trigger("change.select2");
    $("#estatus").select2().val(estatus).trigger("change.select2");
    $("#observaciones").val(observaciones);
    $("#encargado_cuadrilla").val(encargado_cuadrilla);
    $("#otra_descripcion").val(otra_descripcion);
    $(".modal-header").css("background-color", "#007bff");
    $(".modal-header").css("color", "white");
    $(".modal-title").text("Editar Reporte");
    $("#modalCRUD").modal("show");
  });
  //Borrar
  $(document).on("click", ".btnBorrar", function () {
    fila = $(this);
    id = parseInt($(this).closest("tr").find("td:eq(0)").text());
    opcion = 3; //eliminar
    var respuesta = confirm("¿Está seguro de borrar el registro " + id + "?");
    if (respuesta) {
      $.ajax({
        url: "../controlador/reportes.php",
        type: "POST",
        datatype: "json",
        data: { opcion: opcion, id: id },
        success: function () {
          tablaReportes.row(fila.parents("tr")).remove().draw();
        },
      });
    }
  });
});

Fecha mal formateada

Me muestra primero el año, posteriomente el mes, y el dia

Este es mi venta modal, el formato de fecha lo captura de forma correcta, Pero al guardarlo se cambia este formato.

Date

0

3 respuestas 3

1

Intenta cambiando el formato para verificar que si este funcionando moment

$.fn.dataTable.moment( 'ddd, MMMM Do, YYYY' );

deberia de dar un resultado como este:

Tue, December 7th, 2022
1
  • lo anexe a mi código, pero me sigue apareciendo lo mismo. de echo esta en el código que puse, pero no se si esta mal colocado. el 8 dic. 2022 a las 15:02
1

puedes utilizar la columDefs solo poniendo el numero de columna que desees formatear

 $(document).ready( function () {
      var table = $('#example').DataTable({
         
        columnDefs:[{targets:4, render:function(data){
          return moment(data).format('MMMM Do YYYY');
        }}]
      });
    } );
1
  • si pongo columnDefs me manda el siguiente error: DataTables warning: table id=tablaReportes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see datatables.net/tn/4 el 8 dic. 2022 a las 16:10
0

Utiliza la opción Columns y en el data que ocupes formatear la fecha regresalo con el render, te dejo el ejemplo:

{data: 'fecha',
    render: (data, type, row) => {
        moment.locale('es');
        let dateTime = moment(row['fecha']);
        let fecha = dateTime.format('ddd D, MMM YYYY');
        return fecha; // Esta variable la puedes omitir, haz el return des la línea de arriba
    }
}

Esto te debe mostrar algo como:

Mi ejemplo

Ojo: A mi me aparece en mayúsculas por regla CSS que coloque, si no la tienes te deberá aparecer en minúscula, eso si lo puedes aplicar desde columnDefs de la siguiente manera:

columnDefs: [{
    targets: '_all', // A que columnas afectaras
    className: 'text-uppercase' // Reglas CSS
}]

Te invito a que leas y/o investigues un poco más de DataTables (honestamente Yo investigue en varias partes de Internet, si le batalle), ahora bien si a las fechas deseas darle otro formato diferente de como lo tengo Yo, revisa la documentación de Moment.js

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.