Subtract minutes from the selected value

Question

How can I subtract minutes from the time value? Lets say the user selects 12:20am and the result will equal to 11:10pm because it will automatically subtract 70 minutes. I start doing it, but I am not sure how to continue.

<select id="selectHour">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<select id="selectMinute">
    <option value="00">00</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
</select>

<select id="selectAMPM">
    <option value="am">am</option>
    <option value="pm">pm</option>
</select>

<button onclick="myFunction()">Get Result</button>
<p id="result"></p>

    function myFunction() {
        var hour = document.getElementById("selectHour").value; 
        var minute = document.getElementById("selectMinute").value; 
        var ampm = document.getElementById("selectAMPM").value; 
        document.getElementById("result").innerHTML = hour + ":" + minute + " " + ampm; 
    }

</script>

Maybe the problem here is that you're trying to view the values as two different types? As in hour is a string so you can't subtract from it? If that's the case it doesn't work that way in javascript. the string will be coerced into an integer which can then be subtracted from. — Cody Pace, May 21 '18 at 19:39

Fizz · Answer 1 · 2018-05-21T20:33:13.047

Note: For both examples I'm assuming a subtraction of 70 minutes (as stated in your example) but the code can edited for another amount.

If you can use a 3rd-party library such as moment.js it becomes very trivial:

myFunction = function() {
    var hour = document.getElementById("selectHour").value; 
    var minute = document.getElementById("selectMinute").value; 
    var ampm = document.getElementById("selectAMPM").value;
    var time = hour + ":" + minute + " " + ampm;
    var m = new moment(time, 'h:m a');

    document.getElementById("result").innerHTML = m.subtract(70, 'minutes').format('h:m a'); 
}

You can see an example here: jsFiddle

If moment.js is not an option then you could use something like the following as a starting point.

Note: Javascript doesn't do mod with negative values as I expected so I created my own based off the answer here: SO Post

mod = function(a, b) {
    return ((a%b)+b)%b;
}

myFunction = function() {
    // convert hour and minute to integer values
    var hour = parseInt(document.getElementById("selectHour").value); 
    var minute = parseInt(document.getElementById("selectMinute").value); 
    var ampm = document.getElementById("selectAMPM").value;

    // convert to 24 hour time
    if (ampm === "pm" && hour > 12) hour += 12;
    if (ampm === "am" && hour === 12) hour = 0; 

    // Get the time and minutes you want to subtract in hours
    var timeInHours = hour + (minute / 60);
    var timeToSubtractInHours  = 70 / 60;

    // Get the difference in time
    var timeDiff = (timeInHours - timeToSubtractInHours);

    // Get the mod to make sure it's between 0-23
    var modDiff = mod(timeDiff,24);

    // Pull out the hours and minutes
    var h = modDiff | 0
    var min = (modDiff % 1) * 60 | 0;

    // Print the time
    document.getElementById("result").innerHTML = h + ":" + min;
}

The example doesn't convert back to 12-hour time (with am and pm) but I figured that was simple enough to leave out. There may be simpler and faster ways of doing this but this is what first came to me. Modify however you see fit.

See an example for this here: jsFiddle

Thank you very much Fizz!! It was very easy to understand based on your answer! — Jerrry, May 21 '18 at 21:03
I would really appreciate if you could also explain how would you add the 12 hrs time with am and pm — Jerrry, May 21 '18 at 21:18

markaaronky · Accepted Answer · 2018-05-22T12:53:39.193

This code will do let the javascript DateTime logic do the math for you. It takes into account the fact JS doesn't like times, but DateTimes, and just hides the date part. It takes the current date and time, replaces the time portion with whatever you've selected with your dropdowns, uses some standard JS datetime functions to give you the correct results, and displays the result in 12 hour format. I didn't take time to do error handling (such as no value input for minutes to subtract). You're on your own there...

<html>
   <body>
        <select id="selectHour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        </select>

        <select id="selectMinute">
        <option value="00">00</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        <option value="35">35</option>
        <option value="40">40</option>
        <option value="45">45</option>
        <option value="50">50</option>
        <option value="55">55</option>
        </select>

        <select id="selectAMPM">
        <option value="am" selected>am</option>
        <option value="pm">pm</option>
        </select>

    <p>
    <input id="valueToSubtract"/>&nbsp;Minutes to subtract<br/>
    <button onclick="myFunction()">Get Result</button>
    <p id="result"></p> 


    <script>
       function myFunction() {
            // Grab values from the UI
            //
            var hour = document.getElementById("selectHour").value; 
            var minute = document.getElementById("selectMinute").value;
            var ampm = document.getElementById("selectAMPM").value; 

            // Look for times AFTER 12 noon [1pm...11:59pm]
            //
            if ((ampm == "pm") && (hour != 12))
            {
              hour = (hour * 1) + 12;
            }

            // Special case:  look for 12 midnight
            // 
            if ((ampm == "am") && (hour == 12))
            {
              hour = 24;
            }



            // Javascript doesn't like times, it likes DateTimes.  Get the current date and time...
            //
            var fakeDateTime = new Date();

            // ... now plug the UI-selected times in place of the current time
            fakeDateTime.setHours(hour, minute, 0);

            // Finally, subtract the value in minutes, letting JS handle rolling over hour boundaries and such
            //
            fakeDateTime.setMinutes(fakeDateTime.getMinutes() - document.getElementById("valueToSubtract").value);



            document.getElementById("result").innerHTML = fakeDateTime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
        }

        </script>
    </body>
</html>

Ah, cool use of `DateTime`. I didn't think of using `setHours`. — Fizz, May 21 '18 at 21:23
How does the conversion `hour = (hour * 1) + 12` work though? Wouldn't 12pm become 24 and 12am stay as 12? — Fizz, May 21 '18 at 21:29
markaaronky -thank you very much for your answer!! I really appreciated!! — Jerrry, May 21 '18 at 22:06
@Fizz you are correct about the 12s. Thank you for catching my bug. I've fixed the code so it handles the transitions across midnight and noon correctly. BTW, for those wondering about the funky "(hour * 1)", that's just a lazy way to force JS to treat this as a numerical operation and not a string (e.g. the hour 3 would become the string '312' otherwise). There are other ways to do this of course, but I was just trying to whip out a working answer and, mostly, the idea was to illustrate some of the built-in JS datetime functions and types as one way to attack this problem :-) — markaaronky, May 22 '18 at 12:57

Subtract minutes from the selected value

2 Answers2