Develop Reference

Daily Timer to Exempt Days and Allow for DST in UK - FlipClock.js

I am just after a bit of advice really relating to the Flipclock.js plugin.
I have written the following code with a fair amount of assistance to make the clock countdown every day, which as far as I can tell is working well as I have struggled like mad to find solid documentation online for daily timers doing what I desire.
This is for a daily timer to showcase expiry time for a free delivery threshold of 1500 hours, however at weekends this would not be the case. Is it possible to use a conditional to check to see if the current day is Saturday or Sunday, and if so, increase the hours accordingly to display total hours/minutes until 1500 on the Monday?
My last concern is that I am grabbing information based on UST. The UK is currently 1 hour offset, but it won't always be. Is the only feasible solution to use an if only statement and offset the hour based on the dates of daylight saving time - or is there a smoother solution?
Thanks for your help
var clock;
// Check if it is a weekend or not
var d = new Date();
var n = d.getDay();
if( n == 6 )
var deadlineHour = 15, offset = 2;
else if( n == 0)
var deadlineHour = 15, offset = 1;
else
var deadlineHour = 15, offset = 0;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
if(currentDate.getHours() >= deadlineHour) {
offset = 1;
}
var opts = {
clockFace: 'HourlyCounter',
countdown: true,
callbacks: {
stop: function() {
clock.setTime(24 * 60 * 60);
clock.start();
}
}
};
opts.classes = {
active: 'flip-clock-active',
before: 'flip-clock-before',
divider: 'flip-clock-divider',
dot: 'flip-clock-dot',
label: 'flip-clock-label',
flip: 'flip',
play: 'play',
wrapper: 'flip-clock-small-wrapper',
};
var futureDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth(),
currentDate.getDate() + offset,
deadlineHour
);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, opts);
});
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
<br/><div class="clock"></div>

Javascript's date object toLocaleTimeString adds an hour

I'm trying to create a timer from when the user clicks a button.
To do this I tried to calculate the difference between two date objects. When I output the difference, it works. However thetoLocaleTimeString call returns a string with an extra hour added:
var start;
var timer;
function myTimer() {
var current = new Date();
var difference = new Date(current - start);
console.log(difference.getTime(), difference.toLocaleTimeString(navigator.language));
document.getElementById("timer").innerHTML = difference;
document.getElementById("timer2").innerHTML = difference.toLocaleTimeString('en-GB');
}
start = new Date();
timer = setInterval(myTimer, 1000);
draw();
<h1 id="timer"></h1>
<h1 id="timer2"></h1>
What am I doing wrong?

Specify the time zone as UTC in the options argument. Otherwise, the difference date will be adjusted to the user agent's time zone.
document.getElementById("timer2").innerHTML = difference.toLocaleTimeString('en-GB', { timeZone: 'UTC' });
Read more on the options argument and toLocaleTimeString in the MDN documentation.
var start;
var timer;
function myTimer() {
var current = new Date();
var difference = new Date(current - start);
console.log(difference.getTime(), difference.toLocaleTimeString(navigator.language));
document.getElementById("timer").innerHTML = difference;
document.getElementById("timer2").innerHTML = difference.toLocaleTimeString(navigator.language, { timeZone: 'UTC', hour12: false });
}
start = new Date();
timer = setInterval(myTimer, 1000);
draw();
<h1 id="timer"></h1>
<h1 id="timer2"></h1>

Because of the problems with JS and timezones, you are better of using something like moment.js's timezone (http://momentjs.com/timezone/) to do correct conversions (that keep in mind the shift of BST, GMT, differences between countries, etc..). For the purpose of your timer, the following would work as well, and is more accurate as well as simpler to reason about:
// Use Date.now() to get the time in milliseconds for this local computer
var start = Date.now();
var time = new Date();
// This function will prepend a 0 to a number lower than 10
function prependZero(v){
if(v < 9) return '0' + v;
else return v;
}
var timer = setInterval(function() {
// Calculate the difference using the computers local time strings
var difference = new Date(Date.now() - start);
document.getElementById("timer").innerHTML = new Date();
// Now use the Date mnethods to get the correct output:
document.getElementById("timer2").innerHTML = prependZero(difference.getHours()) + ':' + prependZero(difference.getMinutes()) + ':' + prependZero(difference.getSeconds());
}, 1000);
<h1 id="timer"></h1>
<h1 id="timer2"></h1>

PHP Time to Javascript Clock

I want to simply just pull the time from the server.
And continue it ticking with javascript.
My PHP.
//Get current UNIX timestamp (no offset, just straight timestamp)
$time = time()*1000;
//Get offset of server time
$offset = date('O');
// Convert into a new timestamp based on the timezone
$newtime = $time+$offset;
// a vardump($newtime) here gives me
// 1415169764400
My Javascript...
$(document).ready(function(){
// Here Im putting the server time into a variable
var serverTime = "<?php echo $newtime;?>";
//console.log(serverTime) gives me 1415169764400
// Local computer time into a variable
var localTime = new Date().getTime();
//console.log(localTime) here gives me 1415170692954
// Offset between the computer and the server
var timeDiff = serverTime - localTime;
// console.log(timeDiff) here gives me -928554
//The ticking clock function
setInterval(function () {
// Set clock to Computer time plus the time difference
var today = new Date(Date.now()+timeDiff);
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m); //checktime() is just a leading zero function
s = checkTime(s); // checktime() is just a leading zero function
var formatted = h+":"+m+":"+s;
$('.serverTime').html(formatted);
}, 2000);
//PROBLEM IS THAT THIS DISPLAYS THE CURRENT TIME ON MY COMPUTER
// NO MATTER WHAT I TRY, IT ALWAYS JUST DISPLAYS THE LOCAL TIME
// No matter what PHP timezone I put.
// The time Diff and server times are working properly.
// Any ideas whats happening!!???
});
I normally would just use the users local computer time, but each server is in a different location, and when they are visiting this page, I want the clock to tick to the server they're currently visiting.

$time is the number of seconds since unix epoch, expressed as milliseconds. $offset is the number of hours difference from GMT*, Eg '-0800'. Your first problem is that you are adding the offset to the timestamp. At most, you are changing the time by 1.4 seconds, where you seem to intend to change the time by hours.
It would be much easier if you use a DateTime object instead. Then you can call .getOffset() which gives you the difference in seconds:
<?php
$date = new DateTime();
// Get offset for UNIX timestamp based on server timezone
$time = $date->getTimestamp();
//Get offset of server time
$offset = $date->getOffset();
// Convert into a new timestamp based on the timezone
$newtime = ($time + $offset) * 1000;
?>
So far, we've been dealing only with UTC dates. Your other problem is that you are using the local date methods to get values out. You should use the UTC versions of these methods.
//Actual ticking clock
setInterval(function () {
var today = new Date(Date.now() + timeDiff);
var h=today.getUTCHours();
var m=today.getUTCMinutes();
var s=today.getUTCSeconds();
m = checkTime(m);
s = checkTime(s);
var formatted = h+":"+m+":"+s;
$('.serverTime').html(formatted);
}, 2000);
Here's the whole thing, with simulated server time:
function simulateServerTime() {
var time = new Date();
// Add 1 minute and 12 seconds to simulate the clocks being a little out of sync
time.setMinutes(time.getMinutes() + 1, 12);
// Reduce to seconds to simulate php
time = Math.round(time / 1000);
// Specify an offset of -6 hours
var offset = -6 * 60 * 60;
return (time + offset) * 1000;
}
var serverTime = simulateServerTime();
var localTime = new Date();
// Offset between the computer and the server
var timeDiff = serverTime - localTime;
// The ticking clock function
setInterval(function () {
var today = new Date(Date.now() + timeDiff);
var h=today.getUTCHours();
var m=today.getUTCMinutes();
var s=today.getUTCSeconds();
m = checkTime(m);
s = checkTime(s);
var formatted = h+":"+m+":"+s;
document.querySelector(".serverTime").innerHTML = formatted;
}, 1000);
// Helper function for leading 0's
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
<div class="serverTime"></div>
*Or, so says the documentation. Last week, my machine said -0700, which is the octal representation of -448. My time is neither 700 hours earlier than GMT, nor is it 448 hours earlier than GMT, it's 7 hours earlier. It annoys me that the documentation states that it is the time offset in hours, when really it's the time offset in ISO 8601 Format.

Timestamp is not include timezone offset. Everyone's unix time is a offset from Jan 1, 1970 in UTC
If you wish to display a server timezone in client, your PHP must provide a server timezone. And about client timezone, you can reference this .
Also, I like to using moment.js to handle date/time problems.
I just modified the client side javascript, using moment. Wish it's all you needed
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<?php
date_default_timezone_set("Europe/Athens");
$serverTime = time() * 1000 ;
$timezone = date('O');
?>
<div id="result"></div>
<script>
var serverTime = <?php echo $serverTime;?>,
timezone = "<?php echo $timezone;?>",
timeDiff = serverTime - Date.now();
setInterval(function () {
result.innerHTML= moment().add(timeDiff).zone(timezone).format('HH:mm:ss Z') + "<br/>" + result.innerHTML ;
}, 2000);
</script>

Round moment.js object time to nearest 30 minute interval

I was trying to round the moment.js time object to next nearest 30 minute interval. But looks my logic us wrong.
Ex:
10:13am -> 10:30am
11:45am -> 12:00pm
Here is my current code
start = moment();
minuteReminder = start.minute() % 30;
start.add(minuteReminder, 'minutes');
start.format("D YYYY, h:mm:ss a");

Edit 2021 : easiest solution
const start = moment('2018-12-08 09:42');
const remainder = 30 - (start.minute() % 30);
const dateTime = moment(start).add(remainder, "minutes").format("DD.MM.YYYY, h:mm:ss a");
console.log(dateTime);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
Million ways to do this. You don't need moment.js really. Anyway, here is one.

Based on #Volune and #Cabloo answers and comments, an updated version can look like:
function round(date, duration, method) {
return moment(Math[method]((+date) / (+duration)) * (+duration));
}
Which then can be used like:
var date = moment();
var roundedDate = round(date, moment.duration(15, "minutes"), "ceil");

A generic solution:
var ROUNDING = 30 * 60 * 1000; /*ms*/
start = moment();
start = moment(Math.ceil((+start) / ROUNDING) * ROUNDING);
start.format("D YYYY, h:mm:ss a");
You can change ROUNDING from 30 minutes to whatever you want, and change Math.ceil by Math.round or Math.floor if you want another way to round the value.

You could do it with two ifs:
// Current date
let now = moment();
// Getting hour and minute
let hour = now.hour();
let minute = now.minute();
// Rounding minute on 30 mins interval
if(minute <= 30) now.set({minute: 30});
if(minute > 30) now.set({hour: hour + 1, minute: 0});

You can do it by a simple if-else clause:
if(moment().minute()> 30){
var myTime = moment().minute(30).second(0);
} else {
var myTime = moment().minute(0).second(0);
}

For my case, I instead wanted something like
04-28-2021 20:00 => 04-28-2021 20:00
04-28-2021 20:30 => 04-28-2021 20:30
04-28-2021 20:11 => 04-28-2021 20:00
04-28-2021 20:35 => 04-28-2021 20:30
so the function below did the trick
function toNearest30Minutes(date) {
const start = moment(date)
let remainder: number
const elapse = start.minute() % 30
if (elapse === 0) {
return moment(date).format()
} else {
remainder = 30 - elapse
return moment(start).add(remainder, "minutes").format()
}
}
The function above is just an adaptation of #jtromans answer higher above

One-line solution
moment().add( moment().minute() > 30 && 1 , 'hours').minutes( moment().minute() <= 30 ? 30 : 0).format("hh:mm a")
Working exemple :
var min = moment().minute()
var dateTime = moment().add(min > 30 && 1 , 'hours').minutes(min <= 30 ? 30 : 0).format("hh:mm a")
console.log(dateTime);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

even though the question has been answered, I'd like to share my solution too.
var moment = require('moment');
const roundToNearestXXMinutes = (start, roundTo) => {
let remainder = roundTo - (start.minute()+ start.second()/60) % roundTo;
remainder = (remainder > roundTo/2) ? remainder = -roundTo + remainder : remainder;
const changedDate = moment(start).add(remainder, "minutes" ).seconds(0).format("DD.MM.YYYY HH:mm:ss");
}
roundToNearestXXMinutes(moment(), 15);
EDIT: Thanks to Ishmael Sibisi for pointing to a flaw in my code! :)

the code below rounds up the current time to the nearest 30 minutes and also flawlessly takes care of any trailing seconds
var moment = require('moment')
var main = Date.now() //2020-03-13T23:17:34+01:00
var mainFormat = moment(main)
var secs = mainFormat.second()
var justMinutes = mainFormat.subtract(secs, 'seconds')
var remainder = 30 - (justMinutes.minute() % 30);
var dateTime = moment(justMinutes).add(remainder, 'minutes')
var final = dateTime.format()
console.log(final)
//2020-03-13T23:20:00+01:00

setting custom time in flipclock plugin

I am struggling with Flipclock http://flipclockjs.com/ . I browsed their website but i can't find a hint on how to change the time.
What i want to do is set the time i want to display. The problem is the browser on some smart TV's have a problem at changing the timezone so i wanted to get the time from the server with php but i can't set the time. This is my code. I only found some examples with countdown but that is not helpfull at all. It just uses the local time and it doesnt change at all. Thank you all in advance.
// Here i get the unix time from the server in a hidden field
ServerTime = $('#my_time').val();
// FlipClock initialization
clock = $('.clock').FlipClock({
autoStart: false,
clockFace: 'TwentyFourHourClock'
});
var time = clock.getTime();
console.log(time);
clock.setTime(time + 3600);
clock.start();

As i found out that FlipClock plugin somehow doesn't work with setTime() so i changed the code somewhere else. This is my initialization code for generating the FlipClockJS plugin.
var clock;
var index = '';
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock'
});
});
The changes i did was in the file Flipclock.js . It's around the 1325 line. Search for getMilitaryTime
Original:
getMilitaryTime: function() {
var date = new Date();
var obj = this.digitize([
date.getHours(),
date.getMinutes(),
date.getSeconds()
]);
return obj;
},
Edited:
getMilitaryTime: function() {
var date = new Date();
/* The folowing code looks at my server time and if it's higher or smaller it adds so many hours it is missing */
var ServerTime = $('#my_time').val();
var d = new Date();
var n = d.getHours();
var diff = ServerTime - n;
/*****************************************************************/
var obj = this.digitize([
date.getHours()+(diff),
date.getMinutes(),
date.getSeconds()
]);
return obj;
},

// FlipClock initialization
var ServerTime = $('#my_time').val();
var d = new Date();
var n = d.getHours();
var diff = ServerTime - n;
clock = $('.clock').FlipClock(diff,{
clockFace: 'TwentyFourHourClock'
});
This should allow you to display your time without modifications to the source code.

use this 100% work
<script>
var date = new Date('2016-11-07 07:00:0 am');
clock = $('.clock').FlipClock(date, {
clockFace: 'DailyCounter',
countdown: true,
showSeconds: false
});
</script>
you can change the clockFace value as per your requirement.