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();
},
});
}
});
});
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.