Advertisement
  1. Code
  2. JavaScript

Cómo agregar y restar tiempo de una fecha en JavaScript

Scroll to top
Read Time: 6 min

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En este artículo, discutiremos cómo puedes realizar manipulaciones de fechas con un objeto Date de JavaScript. Específicamente, veremos cómo puedes agregar tiempo a un objeto Date y restar tiempo de un objeto Date en JavaScript.

En JavaScript necesitarás trabajar con fechas y horas con frecuencia. Afortunadamente, JavaScript proporciona un objeto Date integrado que proporciona una gran cantidad de métodos de utilidad para la gestión de fechas y horas. Si bien estos métodos son realmente útiles para recuperar diferentes elementos de la fecha y la hora, un objeto Date no proporciona métodos que puedas utilizar para manipular la fecha en sí. En la mayoría de los casos, simplemente puedes usar estos métodos para dar formato a la fecha y la hora para la salida.

De hecho, si quieres realizar operaciones en un objeto Date, como agregar o restar tiempo de una fecha, en JavaScript puro no hay una manera sencilla de hacerlo. A menudo, simplemente terminarás implementando una solución personalizada que funcione para ti. Alternativamente, puedes usar una biblioteca de fecha y hora, como Moment.js. Hoy vamos a discutir ambas formas de realizar manipulaciones de fechas en JavaScript.

Cómo agregar tiempo a una fecha de JavaScript con JavaScript puro

En esta sección, discutiremos cómo puedes agregar tiempo a un objeto Date de JavaScript en JavaScript puro.

En JavaScript, la función getTime() devuelve la cantidad de milisegundos desde el tiempo de la época Unix. Esa es solo una convención de tiempo computacional que cuenta la cantidad de segundos (milisegundos en JavaScript) desde la medianoche UTC del 1.º de enero de 1970.

Intentemos comprender cómo puedes usar la función getTime() para agregar tiempo a un objeto Date en JavaScript. En el siguiente ejemplo, agregaremos una hora al objeto Date existente.

1
var currentDateObj = new Date();
2
var numberOfMlSeconds = currentDateObj.getTime();
3
var addMlSeconds = 60 * 60000;
4
var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);
Resultados
currentDateObj: Sat Jul 24 2021 00:19:27 GMT-0300 (Atlantic Daylight Time)
newDateObj: Sat Jul 24 2021 01:19:27 GMT-0300 (Atlantic Daylight Time)

En primer lugar, hemos inicializado la variable currentDateObj con la fecha actual, y es un objeto Date. Luego hemos usado la función getTime() para obtener la cantidad de milisegundos del objeto currentDateObj.

A continuación hemos calculado la cantidad de milisegundos en una hora. Básicamente, solo hemos multiplicado la cantidad de minutos en una hora (60) por la cantidad de segundos en un minuto (60) por la cantidad de milisegundos en un segundo (1000) para obtener la cantidad de milisegundos en una hora (60000).

Como quizá ya sepas, puedes inicializar un objeto Date proporcionando la cantidad de milisegundos como primer argumento, y esto inicializaría un objeto de fecha en referencia a él. Por lo tanto, hemos añadido numberOfMlSeconds y addMlSeconds para obtener la cantidad total de milisegundos, y la hemos usado para inicializar un nuevo objeto de fecha. Y el resultado final es el objeto newDateObj, que debería mostrar una fecha adelantada una hora en comparación con el objeto currentDateObj.

De hecho, puedes continuar y crear una función reutilizable, como se muestra en el siguiente fragmento de código.

1
function addHoursToDate(objDate, intHours) {
2
    var numberOfMlSeconds = objDate.getTime();
3
    var addMlSeconds = (intHours * 60) * 60000;
4
    var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);
5
6
    return newDateObj;
7
}

Así es como puedes llamarla para obtener, por ejemplo, una fecha que sea exactamente un día en el futuro.

1
addHoursToDate(Date.now(), 24)
Resultado
Sat Jul 25 2021 00:14:01 GMT-0300 (Atlantic Daylight Time)

Así es como puedes usar la función getTime() para agregar tiempo a un objeto Date en JavaScript. También puedes usar la función anterior para agregar una cantidad de días a un objeto Date existente, solamente necesitas convertir los días en horas antes de llamar a la función anterior.

Cómo restar tiempo de una fecha de JavaScript con JavaScript puro

En esta sección, veremos cómo puedes restar tiempo de un objeto Date de JavaScript.

Como ya hemos discutido en la sección anterior, puedes usar la función getTime() para obtener la cantidad de milisegundos de un objeto Date. Y, por lo tanto, la lógica de restar tiempo de un objeto Date es muy similar a la operación de suma, con la única excepción de que necesitamos restar milisegundos en lugar de agregarlos.

Revisemos el siguiente ejemplo para ver cómo funciona.

1
function subtractTimeFromDate(objDate, intHours) {
2
    var numberOfMlSeconds = objDate.getTime();
3
    var addMlSeconds = (intHours * 60) * 60000;
4
    var newDateObj = new Date(numberOfMlSeconds - addMlSeconds);
5
6
    return newDateObj;
7
}

Como puedes ver, es casi idéntico a la operación de adición, con la única excepción de que estamos restando addMlSeconds de numberOfMlSeconds en lugar de agregarlo.

Cómo usar la biblioteca Moment.js para realizar manipulaciones de fechas

En la sección anterior, discutimos cómo puedes usar JavaScript puro para realizar manipulaciones de fechas y horas. Si no necesitas operaciones complejas con un objeto Date de JavaScript, puedes vivir con la implementación de JavaScript puro. Por otro lado, si tu proyecto requiere que realices diferentes tipos de manipulaciones de fechas y horas, es mejor usar una biblioteca de terceros que pueda facilitarte las cosas.

La fecha y la hora pueden ser sorprendentemente complicadas. Por ejemplo, piensa en cómo agregar varios años a una fecha usando el método anterior. Sería fácil, si los años siempre tuvieran la misma duración. Sin embargo, en el mundo real tenemos años bisiestos. Del mismo modo, si quieres agregar una cantidad de meses a una fecha, tendrás qué saber cuántos días tiene cada mes.

En esta sección veremos cómo puedes usar la biblioteca Moment.js, que proporciona una gran cantidad de métodos de utilidad para manipular un objeto Date de JavaScript. Sigue adelante, descarga la biblioteca Moment.js ¡y estás listo para usarla!

Puedes probar la biblioteca Moment.js en este CodePen.

1
// display the current datetime

2
console.log(moment().format());
3
4
// add '1' hour to the current datetime

5
console.log(moment().add(1, 'h').format());
6
7
// add '30' minutes to the current datetime

8
console.log(moment().add(30, 'm').format());
9
10
// add '2' days to the current datetime

11
console.log(moment().add(2, 'd').format());
12
13
// add '1' week to the current datetime

14
console.log(moment().add(1, 'w').format());
15
16
// add '1' month to the current datetime

17
console.log(moment().add(1, 'M').format());
18
19
// subtract '1' hour from the current datetime

20
console.log(moment().subtract(1, 'h').format());
21
22
// subtract '30' minutes from the current datetime

23
console.log(moment().subtract(30, 'm').format());
24
25
// subtract '1' day from the current datetime

26
console.log(moment().subtract(1, 'd').format());
27
28
// subtract '1' week from the current datetime

29
console.log(moment().subtract(1, 'w').format());
30
31
// subtract '3' months from the current datetime

32
console.log(moment().subtract(3, 'M').format());

Solamente necesitas llamar a la función moment() para obtener el objeto de fecha actual. Una vez que lo obtengas, puedes usar diferentes métodos de análisis para dar formato y métodos de manipulación para trabajar con el objeto de fecha actual.

Puedes usar el CodePen a continuación para experimentar con diferentes métodos de utilidad Moment y maneras de agregar o restar fechas. Para referencias adicionales, te recomiendo que visites la documentación oficial.

Y así es como puedes usar la biblioteca Moment.js para dar formato y manipular fechas.

Conclusión

Hoy discutimos cómo puedes realizar manipulaciones de fechas con un objeto Date de JavaScript. Además de JavaScript puro, también exploramos la biblioteca Moment.js, que proporciona formas bastantes sencillas de realizar manipulaciones de fechas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.