Calculate TimeStamp with JS

[clique aqui para português]

When we are working with dates we sometimes encounter dates in milliseconds (timestamp), in some cases it is good to work with and in other cases it is complicated, but to make it easier we will create a date convert to timestamp and the other way around: timestamp to date.

TimeStamp (description)

A timestamp represents a single moment, its value corresponds to a certain amount of time elapsed from an initial moment.

This instant is called UnixEpoch, its value is 01/01/1970 00:00:00 UTC, for the Brazilian time zone the start date is 31/12/1969 21:00:00.

CODE

First we will create the interface, we will do something simple, using only HTML.

<h1>Calcular TimeStamp</h1>
<form name="form_main">
  <fieldset>
    <legend>Date to TimeStamp</legend>
    <label for="date_ini">Data:</label> 
    <input name="date_ini" id="date_ini" size="20" type="date" /><br />
    <label for="hour_ini">Data:</label> 
    <input name="hour_ini" id="hour_ini" size="20" type="time" /><br />
    <label for="timestamp">TimeStamp:</label> 
    <span id="timestamp"></span><br />

    <button type="button" onclick="dateToTimestamp()">Gerar</button>
  </fieldset>

  <fieldset>
    <legend>TimeStamp To Date</legend>
    <label for="timestamp_end">TimeStamp:</label> 
    <input name="timestamp_end" id="timestamp_end" type="text" /><br />
    <label for="date">Data:</label> 
    <span id="date"></span><br />

    <button type="button" onclick="timestampToDate()">Gerar</button>
  </fieldset>

</form>

In the HTML structure, two divisions were made using the fieldset, one to convert from data to timestamp and the other to do the reverse.

Now let’s create the dateToTimestamp function.

function dateToTimestamp() {
  let date_ini = document.form_main.date_ini.value;
  let hour_ini = document.form_main.hour_ini.value;
  let timestamp = new Date(`${date_ini} ${hour_ini}`).getTime();
  document.getElementById('timestamp').innerText = timestamp;
}

In this function (dateToTimestamp), the value of the starting date and time is retrieved, then the function getTime () is used, which retrieves the value of the date directly in timestamp.

Now let’s create the timestampToDate function.

function timestampToDate() {
  let date_ini = new Date(parseInt(document.form_main.timestamp_end.value));
  document.getElementById('date').innerText = date_ini.toLocaleString('pt-BR');
}

In this function (timestampToDate), the value of the timestamp is retrieved and the reverse process is performed, transforming it back into a date and time.

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊