Como adicionar e subtrair hora de uma data em JavaScript

Na verdade, se você quiser realizar operações em um Date objeto como adicionar ou subtrair tempo de uma data, não há uma maneira fácil no JavaScript vanilla. Freqüentemente, você acabará implementando uma solução personalizada que funciona para você. Como alternativa, você pode usar uma biblioteca de data e hora como moment.js. Hoje, discutiremos as duas maneiras de realizar manipulações de datas em JavaScript.

Como adicionar hora a uma data JavaScript com Vanilla JavaScript

Nesta seção, discutiremos como você pode adicionar tempo a um JavaScript Date objeto em JavaScript Vanilla.

Em JavaScript, o getTime() A função retorna o número de milissegundos desde a época do Unix. Essa é apenas uma convenção de horário de computador que conta o número de segundos (milissegundos em JavaScript) desde a meia-noite UTC de 1º de janeiro de 1970.

Vamos tentar entender como você pode usar o getTime() função para adicionar tempo a um Date objeto em JavaScript. No exemplo a seguir, adicionaremos uma hora ao tempo existente Date objeto.

1

var currentDateObj = new Date();

2

var numberOfMlSeconds = currentDateObj.getTime();

3

var addMlSeconds = 60 * 60 * 1000;

4

var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);

Primeiramente, inicializamos o currentDateObj variável com a data atual, e é um Date objeto. A seguir, usamos o getTime() função para obter o número de milissegundos do currentDateObj objeto.

A seguir, calculamos o número de milissegundos em uma hora. Basicamente, multiplicamos o número de minutos em uma hora (60) pelo número de segundos em um minuto (60) e o número de milissegundos em um segundo (1000) para obter o número de milissegundos em uma hora.

Como você já deve saber, você pode inicializar um Date objeto fornecendo o número de milissegundos como o primeiro argumento, e isso inicializaria um objeto de data em referência a ele. Assim, adicionamos numberOfMlSeconds e addMlSeconds para obter o número total de milissegundos e o usamos para inicializar um novo objeto de data. E o resultado final é o newDateObj objeto, que deve mostrar uma data adiantada em uma hora em relação ao currentDateObj objeto.

Na verdade, você pode ir em frente e criar uma função reutilizável, conforme mostrado no trecho a seguir.

1

function addHoursToDate(objDate, intHours) {

2

    var numberOfMlSeconds = objDate;

3

    var addMlSeconds = (intHours * 60) * 60 * 1000;

4

    var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);

5

6

    return newDateObj;

7

}

Veja como você pode chamá-lo para obter, por exemplo, uma data exatamente um dia no futuro.

1

addHoursToDate(Date.now(), 24)

Tente alterar o valor das horas no painel JavaScript abaixo. Observe como a data exibida na guia HTML muda.

Você também pode usar a função acima para adicionar um número de dias a um objeto Date existente; você só precisa converter dias em horas antes de chamar a função acima.

Como subtrair o tempo de uma data JavaScript com Vanilla JavaScript

Nesta seção, veremos como você pode subtrair o tempo de um JavaScript Date objeto.

A lógica de subtrair o tempo de um Date object é muito semelhante à operação add, exceto que precisamos subtrair milissegundos em vez de adicioná-los.

Vamos examinar o exemplo a seguir para ver como funciona.

1

function subtractTimeFromDate(objDate, intHours) {

2

    var numberOfMlSeconds = objDate;

3

    var addMlSeconds = (intHours * 60) * 60 * 1000;

4

    var newDateObj = new Date(numberOfMlSeconds - addMlSeconds);

5

6

    return newDateObj;

7

}

Como você pode ver, é quase idêntico à operação de adição. A única diferença é que estamos subtraindo addMlSeconds de numberOfMlSeconds em vez de adicionar.

Como usar a biblioteca Moment.js para realizar manipulações de datas

Na seção anterior, discutimos como você pode usar JavaScript vanilla para realizar manipulações de data e hora. Se você não precisar de nenhuma operação complexa com JavaScript Date objeto, você pode conviver com a implementação do Vanilla JavaScript. Por outro lado, se o seu projeto exige que você execute diferentes tipos de manipulação de data e hora, é melhor usar uma biblioteca de terceiros que pode facilitar as coisas para você.

Data e hora podem ser surpreendentemente complicadas. Por exemplo, pense em adicionar vários anos a uma data usando o método acima. Seria fácil se os anos tivessem sempre a mesma duração. No entanto, no mundo real, temos anos bissextos. Da mesma forma, se quiser adicionar vários meses a uma data, você terá que saber quantos dias cada mês tem.

Nesta seção, veremos como você pode usar a biblioteca Moment.js, que fornece uma infinidade de métodos utilitários para manipular um JavaScript. Date objeto. Vá em frente e baixe a biblioteca Moment.js e você estará pronto para usá-la!

Com a biblioteca Moment.js você só precisa chamar o moment() função para obter o objeto de data atual. Depois de obtê-lo, você pode usar diferentes métodos de análise para formatação e métodos de manipulação para manipular o objeto de data atual.

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());

Você pode usar o CodePen abaixo para experimentar diferentes métodos utilitários do Moment e formas de adicionar ou subtrair datas. Para mais informações, recomendo que você visite a documentação oficial.

É assim que você pode usar a biblioteca Moment.js para formatar e manipular datas.

Conclusão

Hoje, discutimos como você pode realizar manipulações de datas com um objeto JavaScript Date. Além do JavaScript vanilla, também exploramos a biblioteca Moment.js, que fornece maneiras bastante fáceis de realizar manipulações de datas.