¿Cómo formateo una fecha en JavaScript?

Question 1

¿Cómo formateo un Date objeto a una cadena?

Question 2

Si necesita un poco menos de control sobre el formato que la respuesta actualmente aceptada, Date#toLocaleDateString se puede utilizar para crear representaciones estándar específicas de la configuración regional. Él locale y options Los argumentos permiten que las aplicaciones especifiquen el idioma cuyas convenciones de formato deben usarse y permiten cierta personalización de la representación.

Ejemplos clave de opciones:

día:
La representación del día.
Los valores posibles son “numérico”, “2 dígitos”.
día laborable:
La representación del día de la semana.
Los valores posibles son “estrecho”, “corto”, “largo”.
año:
La representación del año.
Los valores posibles son “numérico”, “2 dígitos”.
mes:
La representación del mes.
Los valores posibles son “numérico”, “2 dígitos”, “estrecho”, “corto”, “largo”.
hora:
La representación de la hora.
Los valores posibles son “numérico”, “2 dígitos”.
minuto:
La representación del minuto.
Los valores posibles son “numérico”, “2 dígitos”.
segundo:
La representación del segundo.
Los valores posibles son “numéricos”, de 2 dígitos.

Todas estas claves son opcionales. Puede cambiar la cantidad de valores de opciones según sus requisitos, y esto también reflejará la presencia de cada término de fecha y hora.

Nota: si solo desea configurar las opciones de contenido, pero aún usa la configuración regional actual, pase null para el primer parámetro causará un error. Usar undefined en cambio.

Para diferentes idiomas:

“en-US”: para ingles
“hola-IN”: para hindi
“ja-JP”: para japonés

Puede utilizar más opciones de idioma.

Por ejemplo

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

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

También puede utilizar el toLocaleString() método para el mismo propósito. La única diferencia es que esta función proporciona el tiempo cuando no pasa ninguna opción.

// Example
9/17/2016, 1:21:34 PM

Referencias:

Question 3

Para los formatos de fecha delimitados de forma personalizada, debe extraer los componentes de fecha (u hora) de un DateTimeFormat objeto (que es parte del
API de internacionalización de ECMAScript), y luego cree manualmente una cadena con los delimitadores que desee.

Para hacer esto, puedes usar DateTimeFormat#formatToParts. Podría desestructurar la matriz, pero eso no es lo ideal, ya que la salida de la matriz depende de la configuración regional:

{ // example 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // example 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

Mejor sería asignar una matriz de formato a las cadenas resultantes:

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

También puede extraer las partes de un DateTimeFormat uno por uno usando
DateTimeFormat#formatpero tenga en cuenta que al usar este método, a partir de marzo de 2020, hay un error en la implementación de ECMAScript cuando se trata de ceros iniciales en minutos y segundos (este error se evita con el enfoque anterior).

let d = new Date(2010, 7, 5);
let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${da}-${mo}-${ye}`);

Cuando se trabaja con fechas y horas, generalmente vale la pena usar una biblioteca (p.
momento.js, luxón) debido a las muchas complejidades ocultas del campo.

Tenga en cuenta que la API de internacionalización de ECMAScript, utilizada en las soluciones anteriores, no es compatible en IE10 (0,03% cuota de mercado global de navegadores en febrero de 2020).

Question 4

Bueno, lo que quería era convertir la fecha de hoy en una mysql cadena de fecha amigable como 2012-06-23, y usar esa cadena como parámetro en una de mis consultas. La solución simple que he encontrado es esta:

var today = new Date().toISOString().slice(0, 10);

Tenga en cuenta que la solución anterior no no toma en cuenta tu zona horaria compensar.

Podría considerar usar esta función en su lugar:

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

Esto le dará la fecha correcta en caso de que esté ejecutando este código al comienzo o al final del día.

var date = new Date();

function toLocal(date) {
  var local = new Date(date);
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return local.toJSON();
}

function toJSONLocal(date) {
  var local = new Date(date);
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return local.toJSON().slice(0, 10);
}

// check out your devtools console
console.log(date.toJSON());
console.log(date.toISOString());
console.log(toLocal(date));

console.log(toJSONLocal(date));

Question 5

Función de formato personalizado:

Para formatos fijos, una función simple hace el trabajo. El siguiente ejemplo genera el formato internacional AAAA-MM-DD:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

El formato OP se puede generar como:

function dateToYMD(date) {
    var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

Nota: Sin embargo, normalmente no es una buena idea ampliar las bibliotecas estándar de JavaScript (p. ej., añadiendo esta función al prototipo de Fecha).

Una función más avanzada podría generar una salida configurable basada en un parámetro de formato.

Si escribir una función de formateo es demasiado largo, hay muchas bibliotecas que lo hacen. Algunas otras respuestas ya las enumeran. Pero el aumento de las dependencias también tiene su contrapartida.

Funciones de formato estándar de ECMAScript:

Desde versiones más recientes de ECMAScript, el Date class tiene algunas funciones de formato específicas:

toDateString: Depende de la implementación, muestra solo la fecha.

https://262.ecma-international.org/#sec-date.prototype.todatestring
new Date().toDateString(); // e.g. "Fri Nov 11 2016"

aISOString: Muestra la fecha y hora ISO 8601.

https://262.ecma-international.org/#sec-date.prototype.toisostring
new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

aJSON: Stringifier para JSON.

https://262.ecma-international.org/#sec-date.prototype.tojson
new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

toLocaleDateString: Depende de la implementación, una fecha en formato local.

https://262.ecma-international.org/#sec-date.prototype.tolocaledatestring
new Date().toLocaleDateString(); // e.g. "21/11/2016"

toLocaleString: Depende de la implementación, una fecha y hora en formato local.

https://262.ecma-international.org/#sec-date.prototype.tolocalestring
new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

toLocaleTimeString: Depende de la implementación, una hora en formato local.

https://262.ecma-international.org/#sec-date.prototype.tolocaletimestring
new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

Encadenar: Genérico toString para Fecha.

https://262.ecma-international.org/#sec-date.prototype.tostring
new Date().toString(); // e.g. "Fri Nov 21 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

Nota: es posible generar una salida personalizada a partir de esos formatos >

new Date().toISOString().slice(0,10); //return YYYY-MM-DD

Fragmentos de ejemplos:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));

Especificación de la configuración regional para funciones estándar:

Algunas de las funciones estándar enumeradas anteriormente dependen de la configuración regional:

toLocaleDateString()
toLocaleTimeString()
toLocalString()

Esto se debe a que las diferentes culturas hacen uso de diferentes formatos y expresan su fecha u hora de diferentes maneras. La función de forma predeterminada devolverá el formato configurado en el dispositivo que ejecuta, pero esto se puede especificar configurando los argumentos (ECMA-402).

toLocaleDateString([locales[, options]])
toLocaleTimeString([locales[, options]])
toLocaleString([locales[, options]])
//e.g. toLocaleDateString('ko-KR');

Él option segundo parámetro, permite configurar un formato más específico dentro de la configuración regional seleccionada. Por ejemplo, el mes se puede mostrar como texto completo o abreviado.

toLocaleString('en-GB', { month: 'short' })
toLocaleString('en-GB', { month: 'long' })