Transform a given date in yyyy-mm-dd format to string in javaScript?

5

I capture a date in yyy-mm-dd (2016-06-30) format and I want to give it a more friendly format for the user, I look for the following:

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).
    
asked by Alan 15.09.2016 в 17:49
source

5 answers

8

This is the standard option, available in most browsers (all modern ones), toLocaleDateString

An example.

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

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

Another that includes the day of the week:

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)
);

If you look at the documentation listed above, there are different options to show all or just some of the parts on the formatted date.

Depending on the options you use, you can show only the day, or the month. Also you can, if you do not include the locale ("es-ES" - Spanish of Spain), leave it to use the local configuration of the user. This is usually a good practice since the user has a preferred format and it is good to respect it.

Salu2

    
answered by 15.09.2016 / 18:22
source
4

According to the documentation you can try the following:

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

Test code adjusted from the following source .

If you contemplate the idea of using only javascript, I recommend using the following code:

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>

Edited code of the response of Alejandro Ricotti .

    
answered by 15.09.2016 в 18:08
4

You could try it in a simple way using 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

Do not forget to include the local

    
answered by 16.09.2016 в 02:11
3

Well with JavaScript 'bareback' you would have to create a Array with all the names of the months and 'map them':

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

For the days of the week you should do something similar.

    
answered by 15.09.2016 в 18:00
2

Taking into account the answers, I found the solution just as I needed it using the library :

// 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>

For more information about the formats using < a href="http://momentjs.com/docs/#/displaying/format/"> here

Thank you very much for your time and your help I found it very useful

    
answered by 15.09.2016 в 19:22