¿Dónde puedo encontrar documentación sobre cómo formatear una fecha en JavaScript? [cerrado]

1398

Noté que la new Date()función de JavaScript es muy inteligente al aceptar fechas en varios formatos.

Xmas95 = new Date("25 Dec, 1995 23:15:00")
Xmas95 = new Date("2009 06 12,12:52:39")
Xmas95 = new Date("20 09 2006,12:52:39")

No pude encontrar documentación en ningún lugar que muestre todos los formatos de cadena válidos al llamar a la new Date()función.

Esto es para convertir una cadena a una fecha. Si miramos el lado opuesto, es decir, convertir un objeto de fecha en una cadena, hasta ahora tenía la impresión de que JavaScript no tiene una API incorporada para formatear un objeto de fecha en una cadena.

Nota del editor: El siguiente enfoque es el intento del autor de la pregunta que funcionó en un navegador en particular pero no funciona en general; Vea las respuestas en esta página para ver algunas soluciones reales.

Hoy, jugué con el toString()método en el objeto de fecha y sorprendentemente sirve para formatear la fecha en cadenas.

var d1 = new Date();
d1.toString('yyyy-MM-dd');       //Returns "2009-06-29" in Internet Explorer, but not Firefox or Chrome
d1.toString('dddd, MMMM ,yyyy')  //Returns "Monday, June 29,2009" in Internet Explorer, but not Firefox or Chrome

Además, aquí no pude encontrar ninguna documentación sobre todas las formas en que podemos formatear el objeto de fecha en una cadena.

¿Dónde está la documentación que enumera los especificadores de formato admitidos por el Date()objeto?

Naga Kiran
fuente
165
sus ejemplos en realidad no funcionan de la manera que usted piensa que lo hacen: jsfiddle.net/edelman/WDNVk/1
Jason
27
Lo sentimos, pasar cadenas de formato en toString funciona en .NET, y puede funcionar en Java, pero como Jason señaló, esto en realidad no funciona en Javascript.
Joshua Carmody
12
La gente recuerda: las preguntas, por canónicas que sean, deben seguir siendo preguntas . Abstenerse de cualquier edición que convierta esta pregunta en una respuesta, refine y mantenga las respuestas en su lugar. Gracias :)
Tim Post
1
Usé el código en este enlace msdn.microsoft.com/en-us/library/ie/ff743760(v=vs.94).aspx - (date.toLocaleDateString ("en-US"));
Khaled Annajar
Si los futuros visitantes de esta página están confundidos por la forma en que la mayoría de las respuestas se relacionan con la pregunta, sugiero leer las revisiones de la pregunta , especialmente (si es diferente de la anterior) revisión 15 @ Eric Muyser : por mi parte, estaba confundido por la falta de la invalidez Fecha # toString uso.
user66001

Respuestas:

1063

Me encantan 10 formas de formatear la fecha y la hora usando JavaScript y Trabajando con fechas .

Básicamente, tienes tres métodos y tienes que combinar las cadenas por ti mismo:

getDate() // Returns the date
getMonth() // Returns the month
getFullYear() // Returns the year

Ejemplo:

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
console.log(curr_date + "-" + curr_month + "-" + curr_year);

Haim Evgi
fuente
27
Ambos sitios tienen licencias restrictivas. Entonces, si usa el código (sin permiso), estará en violación. Momentjs ( stackoverflow.com/a/10119138/278976 ) parece una opción mucho mejor y es una licencia MIT.
Homer6
44
@peller Esta respuesta responde a la pregunta "¿Cómo formateo las fechas en javascript?" cuál es efectivamente el título de la pregunta. En el cuerpo de la pregunta, es bastante engañoso. Y, en su opinión, esta respuesta no habla sobre el formato de cadenas usando bibliotecas aleatorias no estándar o no mencionadas. Pero esa parte de la pregunta se hizo incorrectamente, como señala el comentario n. ° 1 sobre la pregunta. Entonces, esto responde la pregunta real, pero no las cadenas de formato que en realidad no existen.
McKay
3
@McKay; Esa no era la pregunta. Creo que estás malinterpretando lo que pregunta el jugador o estás siendo obtuso en tu razonamiento.
codeinthehole
10
@codeinthehole "Formatear fechas en Javascript" es la pregunta. "Hasta ahora tenía la impresión de que JavaScript no tiene una API integrada para formatear un objeto de fecha en una cadena". pero luego habla sobre el comportamiento, que creo que él cree que es nativo en javascript. Sin saber a qué biblioteca hace referencia erróneamente, creo que la mejor suposición es que está haciendo la pregunta, "¿Cómo formateo las fechas en JavaScript?" y no creo que esté dando saltos salvajes.
McKay
55
MM significa 01-12, no 1-12: 2013-04-17 => OK 2013-4-17 => MALO
Adrian Maire
678

Moment.js

Es una biblioteca de fechas (ligera) * JavaScript para analizar, manipular y formatear fechas.

var a = moment([2010, 1, 14, 15, 25, 50, 125]);
a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
a.format("ddd, hA");                       // "Sun, 3PM"

(*) significado ligero 9.3KB minified + gzipped en la configuración más pequeña posible (feb 2014)

chx007
fuente
77
Esto también proporciona un patrón de decorador alrededor del objeto Fecha en lugar de que el mono golpee el objeto central, por lo que es menos probable que surjan conflictos en el futuro.
Gabe Martin-Dempesy
120
Por favor, deje de abusar de la palabra "ligero". Incluso 5kb es ridículamente grande para tal funcionalidad, y según hoy ese tamaño ha aumentado a 19kb.
user123444555621
27
@ Pumbaa80 No estoy de acuerdo con que "incluso 5kb es ridículamente grande para tal funcionalidad". ¿Has visto los documentos? Es una biblioteca extremadamente útil para manejar fechas en JS. Entiendo que tener una biblioteca de más de un par de KB para un solo uso de un formato básico como "D / M / Y" puede ser un poco exagerado, sin embargo, las diferencias de unos pocos KB se vuelven insignificantes para la facilidad de uso que proporciona la biblioteca . El código mantenible es algo bueno por el bien de unos pocos KB. Sin embargo, si se redujera a +100 KB, estaría de acuerdo.
Turnerj
15
@Tumerj argumentando que es útil no hace nada para abordar la preocupación de ser ligero. Los dos no están relacionados.
JoshJordan
99
No se puede hacer que un avión jet sea más liviano quitando el motor porque luego se convierte en un planeador y no en un jet. Ligero significa que algo solo tiene la funcionalidad necesaria para realizar una función específica. Ergo, esta es una solución ligera.
Bon
425

Si ya está utilizando jQuery UI en su proyecto, puede usar el método de selector de fecha incorporado para formatear su objeto de fecha:

$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));

Sin embargo, el selector de fecha solo formatea fechas y no puede formatear horas.

Eche un vistazo a jQuery UI datepicker formatDate , los ejemplos.

casid
fuente
¿Cómo decirle que use la hora local o Zulu?
Ustaman Sangat
77
prefiero usar esta solución capaz de obtener el tiempo sin ninguna biblioteca: nueva Fecha (). toTimeString (). match (/ ^ ([0-9] {2}: [0-9] {2}: [0-9 ] {2}) /) [0] FYI
markcial
Hay alguna forma de hacer esto. $ .datepicker.formatDate ('aa-mm-dd', nueva fecha ("txtAdvDate" .Val ()); o algo así
Pomster
@Pomster: ¿qué te haría pensar que la cadena "txtAdvDate" tendría un método val? ¿Te refieres a $ ('# txtAdvDate'). Val ()? Suponiendo que se ajuste a uno de los constructores (ver aquí w3schools.com/jsref/jsref_obj_date.asp ), entonces eso funcionaría bien.
vbullinger
@Pomster: intente usar esto: document.getElementById (id) .value = $ .datepicker.formatDate ('aa-mm-dd', nueva fecha ());
mrrsb
219

¿Dónde está la documentación que enumera los especificadores de formato admitidos por el Date()objeto?

Me topé con esto hoy y me sorprendió bastante que nadie se tomara el tiempo para responder esta simple pregunta. Es cierto que existen muchas bibliotecas para ayudar con la manipulación de fechas. Algunos son mejores que otros. Pero esa no fue la pregunta que se hizo.

AFAIK, JavaScript puro no es compatible con los especificadores de formato de la manera que ha indicado que desea utilizarlos . Pero sí los métodos de soporte para el formato de fechas y / o tiempos, tales como .toLocaleDateString(), .toLocaleTimeString(), y .toUTCString().

La Datereferencia de objeto que uso con más frecuencia está en el sitio web w3schools.com (pero una búsqueda rápida en Google revelará muchos más que pueden satisfacer mejor sus necesidades).

También tenga en cuenta que la sección Propiedades del objeto de fecha proporciona un enlace a prototype, que ilustra algunas formas en que puede extender el objeto de Fecha con métodos personalizados. A lo largo de los años, ha habido un debate en la comunidad de JavaScript sobre si esta es la mejor práctica o no, y no estoy abogando a favor o en contra, solo señalando su existencia.

Scott Offen
fuente
26
MDN también es una gran referencia: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Cypher
2
Mi respuesta intentó abordar esta pregunta también. Creo que los navegadores Firefox o Mozilla alguna vez proporcionaron un método Date.toString () que tomó esa cadena de formato. Desafortunadamente, no puedo encontrar rastros de la documentación anterior. Ya no es parte del estándar y ya no parece ser compatible en ningún lugar, incluso en Firefox.
peller
214

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;
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

Nota: Sin embargo, generalmente no es una buena idea extender las bibliotecas estándar de Javascript (por ejemplo, agregando esta función al prototipo de Date).

Una función más avanzada podría generar resultados configurables basados ​​en un parámetro de formato. Hay un par de buenos ejemplos en esta misma página.

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

Funciones de formato estándar ECMAScript:

Desde versiones más recientes de ECMAscript, la Dateclase tiene algunas funciones de formato específicas:

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

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

toISOString : muestra la fecha y hora ISO 8601.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

toJSON : Stringifier para JSON.

http://www.ecma-international.org/ecma-262/7.0/index.html#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.

http://www.ecma-international.org/ecma-262/7.0/index.html#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.

http://www.ecma-international.org/ecma-262/7.0/index.html#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.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

toString : toString genérico para fecha.

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tostring

new Date().toString(); // e.g. "Fri Nov 11 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

Nota: es posible generar resultados personalizados a partir de esas funciones de formato:

new Date().toISOString().slice(0,10); // By @Image72, return YYYY-MM-DD
Adrian Maire
fuente
10
Debería aceptarse la respuesta, porque da el formato requerido (01-01-2000, no 1-1-2000)
Danubian Sailor
66
nueva Fecha (). toISOString (). slice (0,10) // "2015-04-27"
image72
2
Sería muy útil no tener el ejemplo con el 11 de septiembre para que quede claro en qué posición se representa el día y el mes.
Karl Adler
1
@abimelex hecho. Espero que sea más claro ahora.
Adrian Maire
125

La respuesta corta

No hay documentación "universal" a la que se dirige JavaScript; cada navegador que tiene javascript es realmente una implementación. Sin embargo, existe un estándar que la mayoría de los navegadores modernos tienden a seguir, y ese es el estándar EMCAScript; Las cadenas estándar ECMAScript tomarían, como mínimo, una implementación modificada de la definición ISO 8601.

Además de esto, hay un segundo estándar establecido por el IETF que los navegadores tienden a seguir también, que es la definición de las marcas de tiempo hechas en el RFC 2822. La documentación real se puede encontrar en la lista de referencias en la parte inferior.

De esto puede esperar una funcionalidad básica, pero lo que "debería" ser no es inherentemente lo que "es". Sin embargo, voy a profundizar un poco en este procedimiento, ya que parece que solo tres personas respondieron la pregunta (Scott, goofballLogic y Peller, a saber), lo que, para mí, sugiere que la mayoría de las personas desconocen lo que realmente sucede cuando crear un objeto de fecha.


La larga respuesta

¿Dónde está la documentación que enumera los especificadores de formato compatibles con el objeto Date ()?


Para responder a la pregunta, o generalmente incluso buscar la respuesta a esta pregunta, debe saber que JavaScript no es un lenguaje novedoso; en realidad es una implementación de ECMAScript y sigue los estándares de ECMAScript (pero tenga en cuenta que javascript también es anterior a esos estándares; los estándares de EMCAScript se basan en la implementación temprana de LiveScript / JavaScript). El estándar actual de ECMAScript es 5.1 (2011); en el momento en que se hizo la pregunta originalmente (junio de 2009), el estándar era 3 (4 se abandonó), pero 5 se lanzó poco después de la publicación a fines de 2009. Esto debería describir un problema; qué estándar puede seguir una implementación de JavaScript, puede no reflejar lo que realmente está en su lugar, porque a) es una implementación de un estándar dado, b) no todas las implementaciones de un estándar son puritanas,

Esencialmente, cuando se trata de javascript, se trata de un derivado (javascript específico para el navegador) de una implementación (javascript en sí). El V8 de Google, por ejemplo, implementa ECMAScript 5.0, pero el JScript de Internet Explorer no intenta cumplir con ningún estándar de ECMAScript, pero Internet Explorer 9 sí lo hace con ECMAScript 5.0.

Cuando se pasa un único argumento a la nueva Fecha (), lanza este prototipo de función:

new Date(value)

Cuando se pasan dos o más argumentos a la nueva Fecha (), lanza este prototipo de función:

new Date (year, month [, date [, hours [, minutes [, seconds [, ms ] ] ] ] ] )


Ambas funciones deberían parecer familiares, pero esto no responde de inmediato a su pregunta y lo que cuantifica como un "formato de fecha" aceptable requiere una explicación más detallada. Cuando pasa una cadena a la nueva Fecha (), llamará al prototipo (tenga en cuenta que estoy usando la palabra prototipo libremente; las versiones pueden ser funciones individuales o puede ser parte de una declaración condicional en una sola función) para nueva Fecha (valor) con su cadena como argumento para el parámetro "valor". Esta función primero verificará si es un número o una cadena. La documentación para esta función se puede encontrar aquí:

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.3.2

A partir de esto, podemos deducir que para obtener el formato de cadena permitido para la nueva Fecha (valor), tenemos que mirar el método Date.parse (cadena). La documentación para este método se puede encontrar aquí:

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2

Y podemos inferir además que se espera que las fechas estén en un formato extendido ISO 8601 modificado, como se especifica aquí:

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15

Sin embargo, podemos reconocer por experiencia que el objeto Date de javascript acepta otros formatos (impuestos por la existencia de esta pregunta en primer lugar), y esto está bien porque ECMAScript permite formatos específicos de implementación. Sin embargo, eso aún no responde a la pregunta de qué documentación está disponible en los formatos disponibles, ni qué formatos están realmente permitidos. Vamos a ver la implementación de JavaScript de Google, V8; tenga en cuenta que no estoy sugiriendo que este sea el "mejor" motor de JavaScript (¿cómo se puede definir "mejor" o incluso "bueno") y no se puede suponer que los formatos permitidos en V8 representan todos los formatos disponibles en la actualidad, pero creo que es justo asumir que sí siguen las expectativas modernas.

Google V8, date.js, DateConstructor

https://code.google.com/p/v8/source/browse/trunk/src/date.js?r=18400#141

Al observar la función DateConstructor, podemos deducir que necesitamos encontrar la función DateParse; sin embargo, tenga en cuenta que "año" no es el año real y es solo una referencia al parámetro "año".

Google V8, date.js, DateParse

https://code.google.com/p/v8/source/browse/trunk/src/date.js?r=18400#270

Esto llama a% DateParseString, que en realidad es una referencia de función de tiempo de ejecución para una función de C ++. Se refiere al siguiente código:

Google V8, runtime.cc,% DateParseString

https://code.google.com/p/v8/source/browse/trunk/src/runtime.cc?r=18400#9559

La llamada a la función que nos interesa en esta función es para DateParser :: Parse (); ignore la lógica que rodea esas llamadas de función, estas son solo verificaciones para cumplir con el tipo de codificación (ASCII y UC16). DateParser :: Parse se define aquí:

Google V8, dateparser-inl.h, DateParser :: Parse

https://code.google.com/p/v8/source/browse/trunk/src/dateparser-inl.h?r=18400#36

Esta es la función que realmente define qué formatos acepta. Esencialmente, verifica el estándar EMCAScript 5.0 ISO 8601 y, si no cumple con los estándares, intentará construir la fecha en función de los formatos heredados. Algunos puntos clave basados ​​en los comentarios:

  1. Se ignoran las palabras anteriores al primer número que el analizador desconoce.
  2. El texto entre paréntesis se ignora.
  3. Los números sin signo seguidos de ":" se interpretan como un "componente de tiempo".
  4. Números sin signo seguidos de "." se interpretan como un "componente de tiempo" y deben ser seguidos por milisegundos.
  5. Los números firmados seguidos de la hora o la hora minuto (por ejemplo, +5: 15 o +0515) se interpretan como la zona horaria.
  6. Al declarar la hora y los minutos, puede usar “hh: mm” o “hhmm”.
  7. Las palabras que indican una zona horaria se interpretan como una zona horaria.
  8. Todos los demás números se interpretan como "componentes de fecha".
  9. Todas las palabras que comienzan con los primeros tres dígitos de un mes se interpretan como el mes.
  10. Puede definir minutos y horas juntos en cualquiera de los dos formatos: "hh: mm" o "hhmm".
  11. Símbolos como "+", "-" y "no coincidentes") "no están permitidos después de que se haya procesado un número.
  12. Los elementos que coinciden con varios formatos (por ejemplo, 1970-01-01) se procesan como una cadena EMCAScript 5.0 ISO 8601 que cumple con el estándar.

Entonces, esto debería ser suficiente para darle una idea básica de qué esperar cuando se trata de pasar una cadena a un objeto Date. Puede ampliar aún más esto mirando la siguiente especificación a la que apunta Mozilla en la red de desarrolladores de Mozilla (conforme a las marcas de tiempo IETF RFC 2822):

http://tools.ietf.org/html/rfc2822#page-14

La Red de desarrolladores de Microsoft menciona además un estándar adicional para el objeto Date: ECMA-402, la especificación de API de internacionalización ECMAScript, que es complementaria al estándar ECMAScript 5.1 (y los futuros). Eso se puede encontrar aquí:

http://www.ecma-international.org/ecma-402/1.0/

En cualquier caso, esto debería ayudar a destacar que no existe una "documentación" que represente universalmente todas las implementaciones de javascript, pero todavía hay suficiente documentación disponible para tener un sentido razonable de qué cadenas son aceptables para un objeto Date. Toda la pregunta cargada cuando lo piensas, ¿sí? :PAGS

Referencias

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.3.2

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2

http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15

http://tools.ietf.org/html/rfc2822#page-14

http://www.ecma-international.org/ecma-402/1.0/

https://code.google.com/p/v8/source/browse/trunk/src/date.js?r=18400#141

https://code.google.com/p/v8/source/browse/trunk/src/date.js?r=18400#270

https://code.google.com/p/v8/source/browse/trunk/src/runtime.cc?r=18400#9559

https://code.google.com/p/v8/source/browse/trunk/src/dateparser-inl.h?r=18400#36

Recursos

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

http://msdn.microsoft.com/en-us/library/ff743760(v=vs.94).aspx

Sg'te'gmuj
fuente
92

Asegúrese de pagar Datejs cuando trate con fechas en JavaScript. Es bastante impresionante y está bien documentado, como puede ver en el caso de la función toString .

EDITAR : Tyler Forsythe señala que datejs está desactualizado. Lo uso en mi proyecto actual y no tuve ningún problema con él, sin embargo, debe ser consciente de esto y considerar alternativas.

Tim Büthe
fuente
2
No pude encontrar una manera de alimentar datejs con milisegundos para crear una fecha. Así: var dateTime = new Date (); dateTime.setTime (milisegundos);
Arne Evertsson
14
25k? ¿Solo para citas? Ay.
Ben Lesh
13
Datejs es una biblioteca obsoleta que no ha visto un desarrollo activo en ~ 5 años. Su fuente está en Github y Google Code, y ambos tienen las últimas fechas actualizadas de 2008 (es 2013). Por el bien de su cordura, vaya con XDate o Moment.js.
Tyler Forsythe
3
@TylerForsythe Agregué una pista / advertencia sobre eso.
Tim Büthe
2
jajaja el guión de la fecha no está actualizado ...
rtpHarry
69

Simplemente puede expandir el DateObjeto con un nuevo formatmétodo como lo señala Meizz , a continuación se muestra el código proporcionado por el autor. Y aquí hay un jsfiddle .

Date.prototype.format = function(format) //author: meizz
{
  var o = {
    "M+" : this.getMonth()+1, //month
    "d+" : this.getDate(),    //day
    "h+" : this.getHours(),   //hour
    "m+" : this.getMinutes(), //minute
    "s+" : this.getSeconds(), //second
    "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
    "S" : this.getMilliseconds() //millisecond
  }

  if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
    (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  for(var k in o)if(new RegExp("("+ k +")").test(format))
    format = format.replace(RegExp.$1,
      RegExp.$1.length==1 ? o[k] :
        ("00"+ o[k]).substr((""+ o[k]).length));
  return format;
}

alert(new Date().format("yyyy-MM-dd"));
alert(new Date("january 12 2008 11:12:30").format("yyyy-MM-dd h:mm:ss"));
gongzhitaao
fuente
Mejorado un poco para mis propósitos para soportar AM / PM - ver abajo
Michael Angstadt
@WHK Pero todavía me gustan los momentos más: D
gongzhitaao
Tiene un problema al capturar el mes: nueva fecha ((nueva fecha ()) .formato ('aaaa-MM-dd')) devuelve mayo pero ahora es junio: - / ¿usa la zona horaria en la cadena de análisis?
e-info128
1
@WHK Esto es realmente un analizador de fechas muy primitivo. En caso de que no tenga que meterse demasiado con la fecha. Si realmente necesita hacer frente a varios formatos de fechas, recomendaría una biblioteca independiente como momentjs. : D
gongzhitaao
1
@WHK Porque console.log(new Date('2014-06-01')) -> Maycreo que tiene algo que ver con la zona horaria: D
gongzhitaao
37

La funcionalidad que cita no es Javascript estándar, no es probable que sea portátil en todos los navegadores y, por lo tanto, no es una buena práctica. La especificación ECMAScript 3 deja que los formatos de análisis y salida funcionen hasta la implementación de Javascript. ECMAScript 5 agrega un subconjunto de soporte ISO8601. Creo que la función toString () que mencionas es una innovación en un navegador (¿Mozilla?)

Varias bibliotecas proporcionan rutinas para parametrizar esto, algunas con un amplio soporte de localización. También puede consultar los métodos en dojo.date.locale .

peller
fuente
55
Intentar responder realmente la pregunta no le dará muchos votos. ¡Solo nomina una biblioteca popular y mira tu puntuación volar!
RobG
30

Hice este formateador muy simple, es cut / n / pastable (actualizado con una versión más ordenada):

function DateFmt(fstr) {
  this.formatString = fstr

  var mthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  var dayNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  var zeroPad = function(number) {
     return ("0"+number).substr(-2,2);
  }

  var dateMarkers = {
    d:['getDate',function(v) { return zeroPad(v)}],
    m:['getMonth',function(v) { return zeroPad(v+1)}],
    n:['getMonth',function(v) { return mthNames[v]; }],
    w:['getDay',function(v) { return dayNames[v]; }],
    y:['getFullYear'],
    H:['getHours',function(v) { return zeroPad(v)}],
    M:['getMinutes',function(v) { return zeroPad(v)}],
    S:['getSeconds',function(v) { return zeroPad(v)}],
    i:['toISOString']
  };

  this.format = function(date) {
    var dateTxt = this.formatString.replace(/%(.)/g, function(m, p) {
      var rv = date[(dateMarkers[p])[0]]()

      if ( dateMarkers[p][1] != null ) rv = dateMarkers[p][1](rv)

      return rv

    });

    return dateTxt
  }

}

fmt = new DateFmt("%w %d:%n:%y - %H:%M:%S  %i")
v = fmt.format(new Date())

http://snipplr.com/view/66968.82825/

Lyndon S
fuente
44
Me gusta esta clase pero creo que debería ser una clase "estática". No es necesario instanciarlo más de una vez. (no debería necesitar new DateFmt())
Cheeso
1
Cheeso: ¿Qué pasa si quiero formatear 10 fechas diferentes en una página de 3 formas diferentes, cada una? En ese caso, sería útil tener tres instancias de este formateador. Es un caso de uso perfectamente válido que esto impediría. El OP lo diseñó correctamente. También especificar un formato en el momento de la construcción ahorra duplicación de código al especificar un formato cada vez que lo necesita formateado de cierta manera.
hsanders
29

Marco libre, limitado pero ligero

var d = (new Date()+'').split(' ');
// ["Tue", "Sep", "03", "2013", "21:54:52", "GMT-0500", "(Central", "Daylight", "Time)"]

[d[3], d[1], d[2], d[4]].join(' ');
// "2013 Sep 03 21:58:03"
John Williams
fuente
es este navegador cruzado? y cruz locale?
Iftah 01 de
Si. Muestra la hora en su zona horaria local (usuario del navegador).
John Williams
18

Después de examinar varias de las opciones proporcionadas en otras respuestas, decidí escribir mi propia solución limitada pero simple que otros también pueden encontrar útil.

/**
* Format date as a string
* @param date - a date object (usually "new Date();")
* @param format - a string format, eg. "DD-MM-YYYY"
*/
function dateFormat(date, format) {
    // Calculate date parts and replace instances in format string accordingly
    format = format.replace("DD", (date.getDate() < 10 ? '0' : '') + date.getDate()); // Pad with '0' if needed
    format = format.replace("MM", (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1)); // Months are zero-based
    format = format.replace("YYYY", date.getFullYear());
    return format;
}

Ejemplo de uso:

console.log("The date is: " + dateFormat(new Date(), "DD/MM/YYYY"));
Ollie Bennett
fuente
2
Las operaciones de reemplazo no son realmente eficientes, por lo que es una mejor práctica evitarlo.
mrzmyr
¿Qué pasa si escribo, qué va a pasar? console.log ("La fecha es:" + dateFormat (nueva Fecha (), "DD / MM / AA"));
Hakan
1
Esto imprimirá el texto "La fecha es: 12/11 / AA", porque lo anterior no maneja fechas de 2 dígitos. Si usted necesita esto, se podía añadir lo siguiente inmediatamente antes de la instrucción de retorno: format = format.replace("YY", (""+date.getFullYear()).substring(2));. Sin embargo, esto se está poniendo feo: probablemente quieras seguir la ruta RegEx o similar.
Ollie Bennett
1
@mrzmyr ¿Realmente crees que formatear fechas será un cuello de botella en el rendimiento? Venga.
doug65536
11

Aquí hay una función que uso mucho. El resultado es aaaa-mm-dd hh: mm: ss.nnn.

function date_and_time() {
    var date = new Date();
    //zero-pad a single zero if needed
    var zp = function (val){
        return (val <= 9 ? '0' + val : '' + val);
    }

    //zero-pad up to two zeroes if needed
    var zp2 = function(val){
        return val <= 99? (val <=9? '00' + val : '0' + val) : ('' + val ) ;
    }

    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getFullYear();
    var h = date.getHours();
    var min = date.getMinutes();
    var s = date.getSeconds();
    var ms = date.getMilliseconds();
    return '' + y + '-' + zp(m) + '-' + zp(d) + ' ' + zp(h) + ':' + zp(min) + ':' + zp(s) + '.' + zp2(ms);
}
Carl
fuente
1
buena respuesta, pero creo que debería cambiar la función zp2 como: var zp2 = function (val) {return val <= 9? '00' + val: (val <= 99? '0' + val: '' + val); }
Eric Wang
1
existe una excepción, cuando el valor de la parte ms es 0, no es el mismo, en su función el resultado es '00', pero no '000'.
Eric Wang
9

Puede resultarle útil esta modificación del objeto de fecha, que es más pequeña que cualquier biblioteca y se puede ampliar fácilmente para admitir diferentes formatos:

NOTA:

  • Utiliza Object.keys (), que no está definido en navegadores antiguos, por lo que es posible que necesite implementar polyfill desde el enlace dado.

CÓDIGO

Date.prototype.format = function(format) {
    // set default format if function argument not provided
    format = format || 'YYYY-MM-DD hh:mm';

    var zeropad = function(number, length) {
            number = number.toString();
            length = length || 2;
            while(number.length < length)
                number = '0' + number;
            return number;
        },
        // here you can define your formats
        formats = {
            YYYY: this.getFullYear(),
            MM: zeropad(this.getMonth() + 1),
            DD: zeropad(this.getDate()),
            hh: zeropad(this.getHours()),
            mm: zeropad(this.getMinutes())
        },
        pattern = '(' + Object.keys(formats).join(')|(') + ')';

    return format.replace(new RegExp(pattern, 'g'), function(match) {
        return formats[match];
    });
};

UTILIZAR

var now = new Date;
console.log(now.format());
// outputs: 2015-02-09 11:47
var yesterday = new Date('2015-02-08');
console.log(yesterday.format('hh:mm YYYY/MM/DD'));
// outputs: 00:00 2015/02/08
Vaclav
fuente
8

Solo para continuar la respuesta sólida de gongzhitaao: esto maneja AM / PM

 Date.prototype.format = function (format) //author: meizz
{
    var hours = this.getHours();
    var ttime = "AM";
    if(format.indexOf("t") > -1 && hours > 12)
    {
        hours = hours - 12;
        ttime = "PM";
     }

var o = {
    "M+": this.getMonth() + 1, //month
    "d+": this.getDate(),    //day
    "h+": hours,   //hour
    "m+": this.getMinutes(), //minute
    "s+": this.getSeconds(), //second
    "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
    "S": this.getMilliseconds(), //millisecond,
    "t+": ttime
}

if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
  (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
    format = format.replace(RegExp.$1,
      RegExp.$1.length == 1 ? o[k] :
        ("00" + o[k]).substr(("" + o[k]).length));
return format;
}
Michael Angstadt
fuente
Muy buena solución! var a = nueva Fecha (); a.formato ('aaaa-MM-d'); // Regreso 2013-08-16.
Adrian Maire
this.getMonth (); falla en iOS
N20084753
7

No pude encontrar ninguna documentación definitiva sobre formatos de fecha válidos, así que escribí mi propia prueba para ver qué es compatible con varios navegadores.

http://blarg.co.uk/blog/javascript-date-formats

Mis resultados concluyeron que los siguientes formatos son válidos en todos los navegadores que probé (los ejemplos usan la fecha "9 de agosto de 2013"):

[Año completo] / [Mes] / [Número de fecha] : el mes puede ser el número con o sin un cero inicial o el nombre del mes en formato corto o largo, y el número de fecha puede ser con o sin un cero inicial.

  • 2013/08/09
  • 2013/08/9
  • 2013/8/09
  • 2013/8/9
  • 2013 / agosto / 09
  • 2013 / agosto / 9
  • 2013 / agosto / 09
  • 2013 / ago / 9

[Mes] / [Año completo] / [Número de fecha] : el mes puede ser el número con o sin un cero inicial o el nombre del mes en formato corto o largo, y el número de fecha puede ser con o sin un cero inicial.

  • 20/0813/09
  • 20/0813/9
  • 20/0813/09
  • 8/2013/9
  • Agosto / 2013/09
  • Agosto / 2013/9
  • Ago / 2013/09
  • Ago / 2013/9

Cualquier combinación de [Año completo], [Nombre del mes] y [Número de fecha] separados por espacios : el nombre del mes puede estar en formato corto o largo, y el número de fecha puede estar con o sin un cero a la izquierda.

  • 2013 agosto 09
  • Agosto 2013 09
  • 09 agosto 2013
  • 2013 agosto 09
  • 9 de agosto de 2013
  • 2013 9 ago
  • etc ...

También válido en "navegadores modernos" (o en otras palabras, todos los navegadores excepto IE9 y versiones posteriores)

[Año completo] - [Número de mes] - [Número de fecha] - El número de mes y fecha debe incluir ceros a la izquierda (este es el formato que utiliza el tipo de fecha MySQL )

  • 2013-08-09

Uso de nombres de mes:
Curiosamente, al usar nombres de mes descubrí que solo se usan los primeros 3 caracteres del nombre del mes, por lo que todo lo siguiente es perfectamente válido:

new Date('9 August 2013');
new Date('9 Aug 2013');
new Date('9 Augu 2013');
new Date('9 Augustagfsdgsd 2013');
Pete Newnham
fuente
6

Formatear y especialmente analizar fechas en JavaScript puede ser un poco dolor de cabeza. No todos los navegadores manejan las fechas de la misma manera. Entonces, si bien es útil conocer los métodos básicos, es más práctico usar una biblioteca auxiliar.

La biblioteca javascript XDate de Adam Shaw existe desde mediados de 2011 y todavía está en desarrollo activo. Tiene una documentación fantástica, una gran API, formato, trata de seguir siendo compatible con versiones anteriores e incluso admite cadenas localizadas.

Enlace para cambiar las cadenas locales: https://gist.github.com/1221376

Sam Lown
fuente
6

Código de ejemplo:

var d = new Date();
var time = d.toISOString().replace(/.*?T(\d+:\d+:\d+).*/, "$1");

Salida:

"13:45:20"

Nery Jr
fuente
2
vale la pena señalar con toISOString (); emite UTC. Entonces new Date();// = Fri Nov 22 2013 17:48:22 GMT+0100, si , la salida con el código anterior será"16:48:22"
Tewr
6

La biblioteca sugar.js tiene una gran funcionalidad para trabajar con fechas en JavaScript. Y está muy bien documentado .

Sugar le da mucho amor a la clase Date comenzando con el método Date.create que puede comprender fechas en casi cualquier formato en 15 idiomas principales, incluidos formatos relativos como "hace 1 hora". Las fechas también se pueden generar en cualquier formato o idioma utilizando una sintaxis fácil de entender, con accesos directos a los formatos de fecha más utilizados. La comparación de fechas complejas también es posible con métodos como is, que entienden cualquier formato y aplican precisión incorporada.

Algunos ejemplos:

Date.create('July 4, 1776')  -> July 4, 1776
Date.create(-446806800000)   -> November 5, 1955
Date.create(1776, 6, 4)      -> July 4, 1776
Date.create('1776年07月04日', 'ja') -> July 4, 1776
Date.utc.create('July 4, 1776', 'en')  -> July 4, 1776

Date.create().format('{Weekday} {d} {Month}, {yyyy}')    -> Monday July 4, 2003
Date.create().format('{hh}:{mm}')                        -> 15:57
Date.create().format('{12hr}:{mm}{tt}')                  -> 3:57pm
Date.create().format(Date.ISO8601_DATETIME)              -> 2011-07-05 12:24:55.528Z

Date.create().is('the 7th of June') -> false
Date.create().addMonths(2); ->"Sunday, June 15, 2014 13:39"
revs ahkvk
fuente
4

Todos los navegadores

La forma más confiable de formatear una fecha con el formato fuente que está utilizando es aplicar los siguientes pasos:

  1. Use new Date()para crear un Dateobjeto
  2. Uso .getDate(), .getMonth()y.getFullYear() para obtener respectivamente el día, mes y año
  3. Pegue las piezas juntas de acuerdo con su formato de destino

Ejemplo:

var date = '2015-11-09T10:46:15.097Z';

function format(input) {
    var date = new Date(input);
    return [
       ("0" + date.getDate()).slice(-2),
       ("0" + (date.getMonth()+1)).slice(-2),
       date.getFullYear()
    ].join('/');
}

document.body.innerHTML = format(date); // OUTPUT : 09/11/2015

(Ver también este violín ).


Solo navegadores modernos

También puede utilizar el .toLocaleDateStringmétodo incorporado para formatear por usted. Solo necesita pasar la configuración regional y las opciones adecuadas para que coincida con el formato correcto, que desafortunadamente solo es compatible con los navegadores modernos (*) :

var date = '2015-11-09T10:46:15.097Z';

function format(input) {
    return new Date(input).toLocaleDateString('en-GB', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}

document.body.innerHTML = format(date); // OUTPUT : 09/11/2015

(Ver también este violín ).


(*) De acuerdo con la MDN , "Navegadores modernos" significa Chrome 24+, Firefox 29+, IE11, Edge12 +, Opera 15+ y Safari build nocturno

John Slegers
fuente
3

Solo otra opción, que escribí:

Biblioteca DP_DateExtensions

No estoy seguro de si ayudará, pero lo he encontrado útil en varios proyectos, parece que hará lo que necesita.

Admite el formato de fecha / hora, matemática de fecha (partes de fecha de suma / resta), comparación de fecha, análisis de fecha, etc. Es de código abierto.

No hay razón para considerarlo si ya está utilizando un marco (todos son capaces), pero si solo necesita agregar rápidamente la manipulación de fechas a un proyecto, dele una oportunidad.

Jim Davis
fuente
1
Supongo que la nueva URL es depressedpress.com/javascript-extensions/dp_dateextensions
torvin
2

Si desea mostrar solo el tiempo con dos dígitos, esto puede ayudarlo a:

var now = new Date();
var cHour = now.getHours();
var cMinuts = now.getMinutes();
var cSeconds = now.getSeconds();

var outStr = (cHour <= 0 ? ('0' + cHour) : cHour) + ':' + (cMinuts <= 9 ? ('0' + cMinuts) : cMinuts) + ':' + (cSeconds <= 9 ? '0' + cSeconds : cSeconds);
Usman Y
fuente
1

JsSimpleDateFormat es una biblioteca que puede formatear el objeto de fecha y analizar la cadena con formato de nuevo al objeto de fecha. Utiliza el formato Java (clase SimpleDateFormat). El nombre de meses y días se puede localizar.

Ejemplo:

var sdf = new JsSimpleDateFormat("EEEE, MMMM dd, yyyy");
var formattedString = sdf.format(new Date());
var dateObject = sdf.parse("Monday, June 29, 2009");
Peter
fuente
1

La respuesta es "en ninguna parte" ya que el formato de fecha es una funcionalidad patentada. No creo que las funciones de toString estén destinadas a ajustarse a un formato específico. por ejemplo, en la especificación ECMAScript 5.1 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , 2/8/2013, página 173), la función toString se documenta de la siguiente manera :

"El contenido de la cadena depende de la implementación"

Las funciones como los ejemplos a continuación podrían utilizarse para realizar el formateo con bastante facilidad.

function pad(toPad, padWith) {
    return (String(padWith) + String(toPad)).slice(-1 * padWith.length);
}

function dateAsInputValue(toFormat) {
    if(!(toFormat instanceof Date)) return null;
    return toFormat.getFullYear() + "-" + pad(toFormat.getMonth() + 1, "00") + "-" + pad(toFormat.getDate(), "00");
}

function timeAsInputValue(toFormat) {
    if(!(toFormat instanceof Date)) return null;        
    return pad(toFormat.getHours(), "00") + ":" + pad(toFormat.getMinutes(), "00") + ":" + pad(toFormat.getSeconds(), "00");
}
2 revoluciones
fuente
1

Si no necesita todas las características que proporciona una biblioteca como Moment.js , puede usar mi puerto de strftime . Es ligero (1,35 KB frente a 57,9 KB minimizado en comparación con Moment.js 2.15.0) y proporciona la mayor parte de la funcionalidad de strftime().

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * http://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      if (nYear&3!==0) return false;
      return nYear%100!==0 || year%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

Uso de la muestra:

strftime('%F'); // Returns "2016-09-15"
strftime('%A, %B %e, %Y'); // Returns "Thursday, September 15, 2016"

// You can optionally pass it a Date object...

strftime('%x %X', new Date('1/1/2016')); // Returns "1/1/2016 12:00:00 AM"

El último código está disponible aquí: https://github.com/thdoan/strftime

Thdoan
fuente
0

La forma correcta de formatear una fecha para devolver "2012-12-29" es con el script del formato de fecha JavaScript :

var d1 = new Date();
return d1.format("dd-m-yy");

Este código NO funciona:

var d1 = new Date();
d1.toString('yyyy-MM-dd');      
Sebastian Viereck
fuente
3
necesita el script vinculado "JavaScript Date Format" vinculado anteriormente
Sebastian Viereck
0

Personalmente, debido a que uso PHP y jQuery / javascript en igual medida, uso la función de fecha de php.js http://phpjs.org/functions/date/

Usar una biblioteca que usa las mismas cadenas de formato que algo que ya conozco es más fácil para mí, y el manual que contiene todas las posibilidades de cadenas de formato para la función de fecha, por supuesto, está en línea en php.net

Simplemente incluye el archivo date.js en tu HTML usando tu método preferido y luego llámalo así:

var d1=new Date();
var datestring = date('Y-m-d', d1.valueOf()/1000);

Puede usar d1.getTime () en lugar de valueOf () si lo desea, hacen lo mismo.

La división entre 1000 de la marca de tiempo de javascript se debe a que una marca de tiempo de javascript está en milisegundos, pero una marca de tiempo de PHP está en segundos.

Cloudranger
fuente
0

Muchos marcos (que quizás ya estés usando) tienen un formato de fecha que quizás no conozcas. jQueryUI ya se mencionó, pero otros marcos como Kendo UI (Globalización) , Yahoo UI (Util) y AngularJS también los tienen.

// 11/6/2000
kendo.toString(new Date(value), "d")

// Monday, November 06, 2000
kendo.toString(new Date(2000, 10, 6), "D")
ProVega
fuente