Given a JavaScript date and the task is to round it to 5 minutes with the help of JavaScript. There are two approaches that are discussed below:
Approach 1: In this approach, both options are available to either round down or round up the date object. This example uses basic Math.floor() function and Math.ceil() function to perform the operation.
- Example: This example implements the above approach.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Round off a Date Object to 5
minutes in JavaScript.
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
neveropen
</
h1
>
<
p
id
=
"gfg"
style="font-size: 20px;
font-weight: bold">
</
p
>
<
button
onclick
=
"GFG_Fun1();"
>
Round Down
</
button
>
<
button
onclick
=
"GFG_Fun2();"
>
Round Up
</
button
>
<
p
id
=
"neveropen"
style="font-size: 26px;
font-weight: bold;color: green;">
</
p
>
<
script
>
var up = document.getElementById('gfg');
var down = document.getElementById('neveropen');
var date = new Date();
up.innerHTML = "Click on the button to "
+ "round the date as specified."
+ "<
br
><
br
>Date - " + date;
function GFG_Fun1() {
// ms in 5 minutes.
var coff = 1000 * 60 * 5;
down.innerHTML = new Date(
Math.floor(date / coff) * coff);
}
function GFG_Fun2() {
// ms in 5 minutes.
var coff = 1000 * 60 * 5;
down.innerHTML = new Date(
Math.ceil(date / coff) * coff);
}
</
script
>
</
body
>
</
html
>
-
Output:
Approach 2: This example uses basic Math.round() function to perform the operation. Calculate the milliseconds in 5 minutes, divide the date object by milliseconds and get the round value then again multiply the milliseconds.
- Example: This example implements the above approach.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Round off a Date Object to 5
minutes in JavaScript.
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
neveropen
</
h1
>
<
p
id
=
"GFG_UP"
style
=
"font-size: 20px;font-weight: bold"
>
</
p
>
<
button
onclick
=
"GFG_Fun();"
>
click here
</
button
>
<
p
id
=
"GFG_DOWN"
style = "font-size: 26px;
font-weight: bold;color: green;">
</
p
>
<
script
>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var date = new Date();
up.innerHTML = "Click on the button to "
+ "round the date as specified."
+ "<
br
><
br
>Date - " + date;
function GFG_Fun() {
// ms in 5 minutes.
var coff = 1000 * 60 * 5;
down.innerHTML = new Date(Math.round(
date.getTime() / coff) * coff);
}
</
script
>
</
body
>
</
html
>
-
Output: