0

Buens gente que tal, tengo fechas en elementos TD de una tabla que quiero modificar, la hora de esos TD son 11 horas +, y tengo que tranformarlos a hora local y ademas quiero agregarle el nombre del DIA.

Como estos TD tienen un ancho fijo la hora queda mas abajo y así quiero que quede porque la altura de la fila lo permite bien, es decir ahora se ve así:

18/10/20
20:30

El HTML de los TD es así:

<td class="texto-cen">18/10/20 20:30</td>

Y debería quedar algo así:

<td class="texto-cen">20 Oct 18 Sab 09:30</td>

Y debería verse así:

20 Oct 18
Sab 09:30

También podría crear otro elemento dentro de este TD para poner solo el DÍA y HORA si es que no hay un formato de fecha que sea exactamente: 20 Oct 18 Sab 09:30. Por ejemplo:

<td class="texto-cen">20 Oct 18 <div>Sab 09:30</div></td>

Bueno después debería darle un formato u otro a cada celda dependiendo el NOMBRE de DÍA, pero esto creo que puedo solucionarlo pero lo comento por si alguien tiene un código ya hecho.

Bueno como saben hay muchas funciones de Javascript para hacerlo pero estoy enredado por decirlo de alguna manera y no encuentro la forma.

Saludos y Gracias por su ayuda!

2 respuestas 2

0

Creo que la manera mas fácil y rápida de hacerlo es con Moment.js si es que puedes incluirlo en tu proyecto. Te muestro un ejemplo de como quedaría:

moment.locale('es', {
  months: 'Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre'.split('_'),
  monthsShort: 'Enero._Feb._Mar_Abr._May_Jun_Jul._Ago_Sept._Oct._Nov._Dec.'.split('_'),
  weekdays: 'Domingo_Lunes_Martes_Miercoles_Jueves_Viernes_Sabado'.split('_'),
  weekdaysShort: 'Dom._Lun._Mar._Mier._Jue._Vier._Sab.'.split('_'),
  weekdaysMin: 'Do_Lu_Ma_Mi_Ju_Vi_Sa'.split('_')
});

var p = document.querySelector('#p');
p.innerHTML = moment().format('DD  MMM YY') + "<br>" + moment().format('ddd HH:mm');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <p id="p"></p>
</body>
</html>

3
  • respuestas que son solo enlaces se consideran de baja calidad, revisa Cómo responder y añade lo relevante de tu enlace aqui pues le debe servir a futuros usuarios y si el link deja de servir con el tiempo los demás se pierden el contenido
    – user75901
    el 2 nov. 2018 a las 2:25
  • Ahora si, por alguna razón el editor que viene integrado no me dejaba añadir el cdn 🤔
    – Ale
    el 2 nov. 2018 a las 2:36
  • Muchas Gracias lo voy a tener en cuenta! el 2 nov. 2018 a las 4:54
0

Creo que es mas facil a usar <br /> para la linea y Date.toLocaleDateString a formatir la fecha. Moment.js no es necesario para esta solucíon.

Para ejemplo:

let texto = "18/10/20 09:30"
let partes = texto.split(" ")
let x = new Date("20"+partes[0].replace(/\//g, '-'))
let tiempo = partes[1].split(":")
x.setHours(tiempo[0])
x.setMinutes(tiempo[1])
let opciones_fecha = { year: 'numeric', month: 'short', day: 'numeric' }
let fecha = x.toLocaleDateString('es-ES', opciones_fecha)
let opciones_hora = { weekday: 'short', hour: "2-digit", minute: "2-digit" }
let hora = x.toLocaleDateString('es-ES', opciones_hora)
document.getElementById("texto-cen").innerHTML = fecha + "<br />" + hora
<span id="texto-cen">texto aquí</span>

4
  • Hola @XaxD gracias por tu respuesta! Mira recibo un error "Invalid Date" porque yo le pego el texto de los TD del ejemplo que puse en la pregunta: "18/10/20 20:30", entonces como el formato es distinto y tengo que convertirlo no funciona, si cambio de lugar las partes de le fecha para que este como en el codigo que pusiste (MES/DIA/AÑO) SI FUNCIONA. Ademas tengo que cambiar ese texto a 11 horas menos. el 2 nov. 2018 a las 4:49
  • @DanielMartinez sí sí -- proba ahorita. Tuve que arreglar el String.
    – XaxD
    el 2 nov. 2018 a las 6:35
  • Hola gracias, si me di cuenta que si concateno "20" + la CADENA se forma una fecha ISO válida, entonces solo habria que trabajar sobre esto, lo único que tengo que cambiar esa fecha a 11 horas menos, si el TD dice: 18/11/03 20:30, tengo que tranformarlo a la fecha y hora: 18/11/03 09:30. el 2 nov. 2018 a las 8:01
  • Creo que puede transformarlo con x.getTimezoneOffset() o x.setHours()
    – XaxD
    el 2 nov. 2018 a las 15:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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