2

I have 2 Inputs (type="time"). I want the time which entered in the first Input field get + 30 min and write it in the second Input field. Is it possibe? I'm not so good in JS :I

<html>
    <form>
        <label for="start">Start: <input type="time" id="start" name="start" step="600"> </label><br>
        <label for="ende">Ende:  <input type="time" id="ende" name="ende" step="600"> </label>
        <input type="submit" value="senden">
    </form>
</html>

I think I need to get the Input ID in JS and add 30 min to it? Like this: 

document.getElementById('start').value;

... but how to add the 30 min?

Improve this question
2
  • document.getElementById('start').value + 30
    – cloned
    Commented Jul 24, 2019 at 9:17
  • And how I can write the result (entered time + 30 min) to the second Input field?
    – qpA
    Commented Jul 24, 2019 at 9:23

2 Answers 2

Reset to default
5

The time input stores a string value of the form xx:xx, the idea is to add a change event listener to the start input, get its value, add 30 minutes to it, and then assign it to the end input.

Here is a runnable code snippet showing one possible solution with step-by-step comments:

// get input elements
const start = document.getElementById('start');
const end = document.getElementById('ende');
// add a change event listener to the start input
start.addEventListener('change', () => {
    // get hours and minutes as integer values
    let hours = parseInt(start.value.split(':')[0]);
    let minutes = parseInt(start.value.split(':')[1]);
    // add 30 minutes
    minutes += 30;
    // if an hour is exceeded, add it to hours instead
    // and account for a day passing by
    if (minutes >= 60) {
        hours = (hours + 1) % 24;
        minutes -= 60;
    }
    // reformat values as strings with a fix length of 2
    hours = (hours < 10 ? `0${hours}` : `${hours}`);
    minutes = (minutes < 10 ? `0${minutes}` : `${minutes}`);
    // assign new value to the end input
    end.value = `${hours}:${minutes}`;
});
<form>
    <label for="start">Start: <input type="time" id="start" name="start" step="600"> </label><br>
    <label for="ende">Ende:  <input type="time" id="ende" name="ende" step="600"> </label>
    <input type="submit" value="senden">
</form>

Improve this answer
4
  • the "run Code snippet" dont work. But it looks good, I will check it in my Code. :)
    – qpA
    Commented Jul 24, 2019 at 9:54
  • I get this error: Error: { "message": "Syntaxfehler", "filename": "stacksnippets.net/js", "lineno": 20, "colno": 37 }
    – qpA
    Commented Jul 24, 2019 at 10:00
  • I tested it in Chrome, it worked. In Internet Explorer it don't. Dont ask why I use the Explorer :D
    – qpA
    Commented Jul 24, 2019 at 10:14
  • @qpA I suspect Internet Explorer has problems with JS template literals. You can modify this solution to build strings using the + sign to fix that.
    – M0nst3R
    Commented Jul 24, 2019 at 10:52
0

You can split the value at the ":" like mentioned here: How do I pass the value of an input type time to a Date object? Then you get the minutes by accessing the correct position of the splitted array and add 30 to it. Then you put the value back together and do:

document.getElementById("ende").value = newTime;

And newTime is your string where 30 minutes got added.

Improve this answer
1
  • 1
    what if, for example you have an input of 04:35 and you have to add 30 minutes?
    – Lelio Faieta
    Commented Jul 24, 2019 at 9:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.