CODEWITHSUNDEEP
javascripthtml
Chris
Chris

Reputation: 1654

Round up to the nearest quarter hour - JavaScript

I'm trying to create a select element where time is shown:

            <strong>Time:</strong>
            <select name="hours" id="hours">
                <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>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
            </select>
            :
            <select name="minutes" id="minutes">
                <option value="00">00</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="45">45</option>
            </select>

In my JavaScript I'm trying to show the current time. I current have code that rounds quarter hours up or down. So, 10:25 => 10:30 & 9:18 => 9:15.

I would like to know how to only round up instead of rounding down as well.

My JavaScript:

var CurrentDate=new Date();
 $("#hours").val(CurrentDate.getHours());
 $("#minutes").val((((CurrentDate.getMinutes() + 7.5)/15 | 0) * 15) % 60);

Upvotes: 2

Views: 1667

Answers (2)

Asenar
Asenar

Reputation: 7020

This code will «divide» an hour into 4 interval (0, 1, 2 or 3) (instead of 60). Then multiply it by 15 to have either 00, 15, 30 or 45.

between 0 and 14 minutes, the quarter will show "0", between 15 and 30 it will show "15" and so on.

var CurrentDate=new Date();
$("#hours").val(CurrentDate.getHours());
$("#minutes").val(parseInt(CurrentDate.getMinutes()/15)*15);

EDIT : I misread the question, So to round to the upper quarter, we should use Math.ceil() (or Math.round() if you prefer round to the closest) I would rather do :

var CurrentDate=new Date();
var quarter = Math.ceil(CurrentDate.getMinutes()/15)*15;
$("#minutes").val(quarter%60);
$("#hours").val(parseInt(quarter/60)+CurrentDate.getHours());

But usually, this kind of clock show only the past minutes (meaning if hour is past 29 minutes, we usually still display 15 because it's not 30 yet)

Upvotes: 2

RononDex
RononDex

Reputation: 4183

Try this code:

var minutes = (parseInt((CurrentDate.getMinutes() / 15)) + 1) * 15;
minutes = minutes >= 60 ? minutes - 60 : minutes; 
$("#minutes").val(minutes);

Explenation of code:

var minutes = (parseInt((CurrentDate.getMinutes() / 15)) + 1) * 15;

This line divides current minuts by 15 and parses result as an integer, to cut off the floating point, and adds +1 to round it up. Then multiplies by 15 to get the correct minutes of the current quarter hour 

minutes = minutes >= 60 ? minutes - 60 : minutes;

Checks if the resulting minutes are greater than 60, if so subtract 60 to not "overshoot" 60 minutes 

$("#minutes").val(minutes);

Sets the value on the given tag

Upvotes: 3

Related Questions