8

Capturo una fecha en formato yyy-mm-dd (2016-06-30) y quiero darle un formato mas amable para el usuario, busco lo siguiente:

2016-06-30 = 6 de Junio del 2016 
2016-06-30 = Junio (Mostrar el mes dada la fecha)
2016-06-30 = Jueves (Mostrar el día, suponiendo que el 06 sea Jueves).
1

5 respuestas 5

19

Esta es la opcion estandar, disponible en la mayoría de los navegadores (todos los modernos), toLocaleDateString

Un ejemplo.

var fecha = new Date();
var options = { year: 'numeric', month: 'long', day: 'numeric' };

console.log(
  fecha.toLocaleDateString("es-ES", options)
);

Otro que incluye el día de la semana:

var fecha = new Date(1995, 11, 17);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

console.log(
  fecha.toLocaleDateString("es-ES", options)
);

fecha = new Date("2017-08-21");
console.log(
  fecha.toLocaleDateString("es-ES", options)
);

Si te fijas en la documentación apuntada arriba, hay diferentes opciones para mostrar todas o solo algunas de las partes en la fecha formateada.

Dependiendo de las opciones que utilices, puedes mostrar solo el día, o el mes. Ademas puedes, si no incluyes el locale ("es-ES" - Español de España) dejarlo para que use la configuarción local del usuario. Esto suele ser una buena practica ya que el usuario tiene configurado un formato como preferido y es bueno respetárselo.

Salu2

5
  • Todo esto ocurriría con la fecha actual, ahora si deseo tomar una fecha que capture como lo explico en el post, en que lugar podría colocar este dato?
    – Alan
    Commented el 15 sept. 2016 a las 16:50
  • 1
    es lo mismo, debes usar el constructor apropiado, fijate mi edicion. Commented el 15 sept. 2016 a las 16:53
  • Gracias por tu explicación!
    – Alan
    Commented el 15 sept. 2016 a las 16:57
  • Parece muy interesante esta solución y fácil, tengo alguna consulta al respecto haver si me la puedes solucionar, he visto que lo que no funcionan son las options en el android webview? lo que no funcionaria seria esto ? ------- var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; </code> ------- De ser así el android webview es la aplicación nativa para entrar en internet en android? @rnrneverdies
    – Juanperez
    Commented el 5 jul. 2019 a las 21:43
  • En el segundo ejemplo con la fecha de 2017-08-21 por qué en el consolé log te muestra un día menos es decir 2017-08-20 ???
    – C47
    Commented el 10 nov. 2020 a las 3:44
6

De acuerdo a la documentación puedes intentar lo siguiente:

var fechaEjemplo = moment('2016-06-30', 'YYYY/MM/dd');
fechaEjemplo = fechaEjemplo.format('MMMM D, YYYY');
// Resultado: Junio 30, 2016

Código de prueba ajustado de la siguente fuente.


Si contemplas la idea de usar solamente javascript, te recomiendo usar el siguiente código:

var meses = [
  "Enero", "Febrero", "Marzo",
  "Abril", "Mayo", "Junio", "Julio",
  "Agosto", "Septiembre", "Octubre",
  "Noviembre", "Diciembre"
]

var date = new Date();
var dia = date.getDate();
var mes = date.getMonth();
var yyy = date.getFullYear();
var fecha_formateada = dia + ' de ' + meses[mes] + ' de ' + yyy;

document.getElementById('spnFecha').innerHTML = "Fecha: " + fecha_formateada;
alert(fecha_formateada);
<span id="spnFecha">Fecha:</span>

Código editado de la respuesta de Alejandro Ricotti.

1
  • 1
    Ya di con la respuesta gracias a lo que explicabas al inicio (con momentjs) al realizar fechaEjemplo.format('D de MMMM del YYYY'); , lo único es que tuve que agregar el idioma por que tal cual esta allí el resultado seria en ingles
    – Alan
    Commented el 15 sept. 2016 a las 16:55
5

Podrías probar de forma sencilla usando momentjs

var date = moment('2016-08-15');
date.format('LL'); // 15 de Septiembre de 2016
date.format('LLL') // Jueves, 15 de Septiembre de 2016 0:00

No olvides incluir los locales

2
  • Genial, mira cuando usamos el formato date.format('LLL') , de donde captura la hora?
    – Alan
    Commented el 16 sept. 2016 a las 12:56
  • 2
    Hola que tal, perdona la tardanza, la hora la puedes pasar con la fecha por ejemplo: var date = moment('2016-08-15 17:22') la puedes formatear a formato de 12H de la siguiente manera date.format('LL hh:mm') // 15 de Septiembre de 2016 05:22. Espero te sea de ayuda...
    – Meneses
    Commented el 18 sept. 2016 a las 21:28
4

Pues así con JavaScript 'a pelo' tendrías que crear un Array con todos los nombres de los meses y 'mapearlos':

const meses = [
  "Enero", "Febrero", "Marzo",
  "Abril", "Mayo", "Junio", "Julio",
  "Agosto", "Septiembre", "Octubre",
  "Noviembre", "Diciembre"
]

const date = new Date()
const dia = date.getDate()
const mes = date.getMonth()
const ano = date.getFullYear()

console.log(`${dia} de ${meses[mes]} del ${ano}`)  // 15 de Septiembre del 2016

Para los días de la semana tendrías que hacer algo parecido.

4

Tomando en cuenta las respuestas, he encontrado la solución justo como la necesitaba usando la librería :

// uso el idioma en español
moment.locale('es');
//
var dateTime = moment( '2016-06-30');
// formato de fecha miercoles 1, junio 2016
var full = dateTime.format('dddd D, MMMM YYYY');
// mes
var mes = dateTime.format(' MMMM');
// dia (escrito)
var dia = dateTime.format('dddd');
// dia
var diaN = dateTime.format('D');
/////
// Update
var full2 = dateTime.format('LL');
//
var fullTime = dateTime.format('LLLL');

console.log(full, mes, dia, diaN, full2, fullTime );
<!-- importo la libreria moments -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
<!-- importo todos los idiomas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment-with-locales.min.js"></script>

Para mas informacion a cerca de los formatos usando aqui

Muchas gracias por su tiempo y su ayuda me resulto muy util

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.