Solución:
Puede usar Moment.js para hacer esto.
const date = moment("2018-05-18T04:00:00.000Z").format('DD MMM, YYYY');
console.log(date);
// May 18, 2018
Aquí tienes un violín.
Debería poder hacer esto únicamente con JavaScript, incluido el análisis con Date () y, según los requisitos de compatibilidad de su navegador, formatear con toLocaleDateString ().
El segundo ejemplo (comentado) solo muestra cómo puede funcionar con una configuración regional específica (como una cadena, aunque puede ser una matriz de dichas cadenas).
function formatDate(string){
var options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(string).toLocaleDateString([],options);
}
var dateString = "2018-05-18T04:00:00.000Z"
document.getElementById("results").innerHTML = formatDate(dateString);
// You could also provide specific locale, if needed. For example:
//function formatDate(string){
// var options = { year: 'numeric', month: 'long', day: 'numeric' };
// return new Date(string).toLocaleDateString('en-US',options);
//}<div id="results"</div>Ha creado un nuevo objeto Date correctamente y JavaScript almacenó la fecha correcta. El problema tiene que ver con la configuración regional. En esta siguiente línea de código, JS ha creado y almacenado esa hora exacta. Pero cuando pedimos una salida de JS, normalmente obtenemos exactamente lo que pedimos. A partir de su ejemplo, solicitó la fecha en función de una configuración regional que probablemente se encuentre en los EE. UU. Así que esto:
new Date('2018-05-18T04:00:00Z').toLocaleString(); //(or .toString()
le dará exactamente el resultado que solicita, que es una hora UTC desplazada a una ubicación diferente (dejé la hora activada para la demostración).
Por otro lado, usando esto:
new Date('2018-05-18T04:00:00Z').toUTCString();
Producirá el resultado que espera porque exige que la configuración regional correcta sea UTC.
document.querySelector('#a').innerText = new Date('2018-05-18T04:00:00Z').toString();
document.querySelector('#b').innerText = new Date('2018-05-18T04:00:00Z').toUTCString();Incorrect: <p id="a"></p>
<hr>
Correct: <p id="b"></p>