Objetos de fecha de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Los Objetos de fecha de JavaScript nos permiten trabajar con fechas:

Año:

Un ejemplo de cómo obtener el año actual en Javascript:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getFullYear() Method</h2>
<p>Return the full year of a date object:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

</body>
</html>

Mes:

Un ejemplo de cómo obtener el mes actual en Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMonth() Method</h2>
<p>Return the month of a date as a number from 0 to 11.</p>
<p>To get the correct month number, you must add 1:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMonth() + 1;
</script>

</body>
</html>

Día:

Un ejemplo de cómo obtener el día actual en Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDate() Method</h2>
<p>Return the day of a date as a number (1-31):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>

</body>
</html>

Horas:

Un ejemplo de cómo obtener la hora actual en Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getHours() Method</h2>
<p>Return the hours of a date as a number (0-23):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
</script>

</body>
</html>

Minutos:

Un ejemplo de cómo obtener el minuto actual en Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMinutes() Method</h2>
<p>Returns the minutes of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();
</script>

</body>
</html>

Segundos:

Un ejemplo de cómo obtener el segundo actual en Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getSeconds() Method</h2>
<p>Return the seconds of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();
</script>

</body>
</html>

Ejemplos

const d = new Date();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

const d = new Date("2022-03-25");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p id="demo"></p>

<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Nota

Los objetos de fecha son estáticos. El "reloj" no está "corriendo".

El reloj de la computadora corre, los objetos de fecha no.

Salida de fecha de JavaScript

De forma predeterminada, JavaScript utilizará la zona horaria del navegador y mostrará una fecha como una cadena de texto completo:

Aprenderá mucho más sobre cómo mostrar fechas más adelante en este tutorial.

Crear objetos de fecha

Los objetos de fecha se crean con el Constructor nueva fecha().

Hay nueve formas de crear un nuevo objeto de fecha:

new Date()
new Date(date string)

new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)

new Date(milliseconds)

JavaScript nueva fecha()

new Date() crea un objeto de fecha con la fecha y hora actuales:

Ejemplo

const d = new Date();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

nueva fecha(cadena de fecha)

new Date(cadena de fecha) crea un objeto de fecha a partir de una cadena de fecha:

Ejemplos

const d = new Date("October 13, 2014 11:13:00");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>A date object can be created with a specified date and time:</p>
<p id="demo"></p>

<script>
const d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

const d = new Date("2022-03-25");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p id="demo"></p>

<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Los formatos de cadenas de fecha se describen en el siguiente capítulo.

nueva fecha(año, mes,...)

new Date(año, mes,...) crea un objeto de fecha con una fecha y hora especificadas.

7 números especifican año, mes, día, hora, minuto, segundo y milisegundo (en ese orden):

Ejemplo

const d = new Date(2018, 11, 24, 10, 33, 30, 0);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Nota

JavaScript cuenta los meses desde 0 hasta 11:

Enero=0.

Diciembre=11.

Especificar un mes superior a 11 no generará un error, pero agregará el desbordamiento al año siguiente:

Especificando:

const d = new Date(2018, 15, 24, 10, 33, 30);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a month higher than 11, will not result in an error but add the overflow to the next year:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 15, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Es lo mismo que:

const d = new Date(2019, 3, 24, 10, 33, 30);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>

<p id="demo"></p>

<script>
const d = new Date(2019, 3, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Especificar un día superior al máximo no generará un error, pero agregará el desbordamiento al mes siguiente:

Especificando:

const d = new Date(2018, 5, 35, 10, 33, 30);

Es lo mismo que:

const d = new Date(2018, 6, 5, 10, 33, 30);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a day higher than max, will not result in an error but add the overflow to the next month:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 05, 35, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Usando 6, 4, 3 o 2 números

6 números especifican año, mes, día, hora, minuto, segundo:

Ejemplo

const d = new Date(2018, 11, 24, 10, 33, 30);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>6 numbers specify year, month, day, hour, minute and second:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33, 30);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

5 números especifican año, mes, día, hora y minuto:

Ejemplo

const d = new Date(2018, 11, 24, 10, 33);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>5 numbers specify year, month, day, hour, and minute:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

4 números especifican año, mes, día y hora:

Ejemplo

const d = new Date(2018, 11, 24, 10);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>4 numbers specify year, month, day, and hour:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

3 números especifican año, mes y día:

Ejemplo

const d = new Date(2018, 11, 24);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>3 numbers specify year, month, and day:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

2 números especifican año y mes:

Ejemplo

const d = new Date(2018, 11);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>2 numbers specify year and  month:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

No puedes omitir el mes. Si proporciona solo un parámetro, se tratará como milisegundos.

Ejemplo

const d = new Date(2018);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One parameter will be interpreted as new Date(milliseconds).</p>

<p id="demo"></p>

<script>
const d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Siglo anterior

Los años de uno y dos dígitos se interpretarán como 19xx:

Ejemplo

const d = new Date(99, 11, 24);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>Two digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
const d = new Date(99, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Ejemplo

const d = new Date(9, 11, 24);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
const d = new Date(9, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

JavaScript almacena fechas como milisegundos

JavaScript almacena fechas en milisegundos desde el 1 de enero de 1970.

La hora cero es el 1 de enero de 1970 a las 00:00:00 UTC.

Un día (24 horas) son 86.400.000 milisegundos.

Ahora el momento es:

milisegundos después del 1 de enero de 1970

nueva fecha(milisegundos)

nueva Fecha(milisegundos) crea un nuevo objeto de fecha como milisegundos más tiempo cero:

Ejemplos

01 de enero de 1970 más 100 000 000 000 milisegundos es:

const d = new Date(100000000000);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

01 de enero de 1970 menos 100 000 000 000 milisegundos es:

const d = new Date(-100000000000);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>-100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(-100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

01 de enero de 1970 más 24 horas es:

const d = new Date(24 * 60 * 60 * 1000);
// or
const d = new Date(86400000);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>86400000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
</script>

<p>One day (24 hours) is 86,400,000 milliseconds.</p>

</body>
</html>

01 de enero de 1970 más 0 milisegundos es:

const d = new Date(0);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>0 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Métodos de fecha

Cuando se crea un objeto de fecha, varios métodos le permiten operar en él.

Los métodos de fecha le permiten obtener y configurar el año, mes, día, hora, minutos, segundos y milisegundos de objetos de fecha, utilizando la hora local o UTC (universal o GMT).

Los métodos de fecha y las zonas horarias se tratan en los siguientes capítulos.

Visualización de fechas

JavaScript (de forma predeterminada) generará fechas utilizando el método toString(). Esta es una representación de cadena de la fecha, incluida la zona horaria. El formato se especifica en la especificación ECMAScript:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Cuando muestra un objeto de fecha en HTML, se convierte automáticamente en un string, con el método toString().

Ejemplo

const d = new Date();
d.toString();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toString() Method</h2>

<p>Convert a date to a string:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>

</body>
</html>

El método toDateString() convierte una fecha a una fecha más legible. formato:

Ejemplo

const d = new Date();
d.toDateString();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toDateString() Method</h2>
<p>Convert a date to a date string:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

</body>
</html>

El método toUTCString() convierte una fecha en una cadena usando el estándar UTC:

Ejemplo

const d = new Date();
d.toUTCString();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toUTCString() Method</h2>
<p>Convert a date to a string using the UTC standard:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>

</body>
</html>

El método toISOString() convierte una fecha en una cadena usando el estándar ISO:

Ejemplo

const d = new Date();
d.toISOString();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>

</body>
</html>

Referencia completa de fecha de JavaScript

Para obtener una referencia completa de la fecha, visite nuestro:

Referencia completa de fechas de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades de fecha y métodos.