Change time and end date according to start

Question

Each time you select a start time for the event in Google Calendar, it adds a 1 final time.
For example: If you put 12:00 on 25/03 at the beginning, at the end will appear 13:00 on 25/03.
However, when you put 23:00 of the day 03/06 at the start, it changes the final to 00:00 04/06.

I would like to know which is best to do this in Javascript / Jquery.

Answer 1

var entrada = document.getElementById("txt-entrada");
var saida = document.getElementById("txt-saida");

function adicionarHora() {
    // converte string em data
    var data_entrada = moment(entrada.value, "DD/MM/YYYY HH:mm:ss");

    // define o valor da saida
    saida.value = moment(data_entrada).add(2, 'hour').format('DD/MM/YYYY HH:mm:ss');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input type="text" id="txt-entrada" onkeyup="adicionarHora()" value="24/05/2015 23:00:00" placeholder="Entrada" />
<input type="text" id="txt-saida" placeholder="Saida" />

Use the library Momentjs. And through the method add() it is possible to add certain periods to date:

See example working on Jsfiddle;

Answer 2

One solution will be to convert the string value of the initial date and time textboxes to an object Date Javascript only and add one hour to its value. After that, just convert back to two strings and put the value in the final date and time textboxes. I snippeted, take a look.

function calculaDataHoraFinal() {
  var valorDataIni = $("#data-ini").val();
  var valorHoraIni = $("#hora-ini").val();

  if (valorDataIni && valorHoraIni) {

    var partesData = valorDataIni.split("/");
    var partesHora = valorHoraIni.split(":");

    var dataIni = new Date(partesData[2], partesData[1] - 1, partesData[0], partesHora[0], partesHora[1]);
    var dataFim = new Date(dataIni.getTime());
    dataFim.setHours(dataFim.getHours() + 1);

    var partesHoraFim = dataFim.toTimeString().split(':');
    $("#data-fim").val(dataFim.toLocaleDateString());
    $("#hora-fim").val(partesHoraFim[0] + ':' + partesHoraFim[1]);

  }
}

$("#data-ini, #hora-ini").on('change', calculaDataHoraFinal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="data-ini" type="text" />
  <input id="hora-ini" type="text" />&nbsp;até&nbsp;
  <input id="data-fim" type="text" />
  <input id="hora-fim" type="text" />
</div>

I know there are parse` methods of date as well as formatting, but they all depend on the browser location and the culture setting for these methods is not well implemented in all browsers. If you want to make things simpler, you can use a date handling library for Javascript like Moment js..