I am trying to create countdown to a specific date using flipclock without the timer resetting or people in different time-zones seeing different numbers. For example, I want to countdown to Feb 20, 12:00am MST.
My problem is that the clock resets when the browser is refreshed after it reaches 0, the time shows negative numbers. If people viewing this clock with the current configuration, it is counting down to Feb 20, 12am in their timezone.
I've started with the countdown to New Years compiled clock and set my date, but not sure how else to address the timezone and reset issues.
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);
// 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, {
clockFace: 'DailyCounter',
countdown: true,
showSeconds: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!');
}
}
});
});
var clock;
$(document).ready(function() {
// Grab the current date
var now = new Date();
var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
currentDate.setHours(currentDate.getHours() - 7);
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Limit time difference to zero
if (diff < 0) {
diff = 0;
}
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
showSeconds: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!');
}
}
});
});
Part solving timezone issue (a bit ugly):
// Grab the current date
var now = new Date();
var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
currentDate.setHours(currentDate.getHours() - 7);
Part limiting time difference to not less than zero:
// Limit time difference to zero
if (diff < 0) {
diff = 0;
}
Since the time you'd like to count down to is a specific time in a specific time zone, then the easiest way is to pre-convert that time to UTC, and count down to that instead.
On Feb 20th 2016, US Mountain Time is at UTC-7, therefore:
2016-02-20 00:00:00 MST == 2016-02-20 07:00:00 UTC
So,
var currentDate = new Date();
var futureDate = Date.UTC(currentDate.getUTCFullYear(), 1, 20, 7, 0, 0);
var diff = (futureDate - currentDate.getTime()) / 1000;
I'll let someone else answer WRT the specifics of FlipClock and your reset issue - though you might consider asking it in a separate question. (Try to ask only one question at a time in the future.)
Related
Using a countdown plugin but I think I'm setting the date and time wrong.
Code:
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(2016,10,27, 10,00,00);
// 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, {
clockFace: 'DailyCounter',
countdown: true
});
});
I'm attempting this:
var futureDate = new Date(2016,10,27, 10,00,00);
Which is 27th October 2016 at 10am
Coding up 52 days though so I must be doing something wrong
Which is 27th October 2016 at 10am
That's where you're going wrong. Months in JavaScript are 0-indexed (January is 0, December is 11), the 10th month is actually November.
var futureDate = new Date(2016,9,27,10,00,00);
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>
I'm currently trying to develop a countdown timer page. Here is the countdown timer code:
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date("July 01, 2015 22:00:00");
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
if(diff < 0){
// Instantiate a countdown FlipClock
clock = $('.clock').FlipClock(0, {
clockFace: 'DailyCounter',
countdown: true
});
$('.message').html('Lets Go!!');
$('.Go').removeAttr("disabled");
$( "div.first" ).replaceWith( "<i style='color:red'>Lets Go!</i>" );
}
else{
// Instantiate a countdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function() {
$('.message').html('Lets Go!!');
$('.Go').removeAttr("disabled");
$( "div.first" ).replaceWith( "<i style='color:red'>Lets Go!</i>" );
}
}
});
}
});
The problem is that the countdown time varies per timezone. For example, a user in Australia will have a three-hour-shorter countdown time than that of a user from Malaysia (GMT+8).
How can I standardize/set the initial countdown date's timezone to GMT+8 so that users in different timezones have the same countdown time?
Based on our discussion, this example code works to convert any timezone time into UTC+8 timezone time.
var d = new Date();
d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000 /* convert to UTC */ + (/* UTC+8 */ 8) * 60 * 60 * 1000);
console.log('UTC+8 Time:', d);
Here is a JSFiddle for reference.
Although the console output shows that the timezones of the date objects are not UTC+0800, their date values (year, month, date, etc...) have all been converted into UTC+0800 time.
It is just not possible to edit the actual timezone of date objects, but it is possible to edit their date values to reflect the new timezone, and that is what we are doing here.
GMT time is the same as UTC time.
Use JavaScript setUTCDate() Method
Example
Set the day of the month, according to UTC:
var d = new Date();
d.setUTCDate(15);
The result of d will be:
Wed Jul 15 2015 10:47:28 GMT+0400 (Russian Standard Time)
I am using http://flipclockjs.com/
This is my call script so far,
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
clockFace: 'DailyCounter',
countdown: true,
});
</script>
Please could someone tell me how i can count down from an exact date?
So for example the date is 21st July, 2014 in UK time, and everyone that visits that site will see how long there is remaining till that date based on the current date.
This is what I use
<div class="clock"></div>
<script type="text/javascript">
var date = new Date(2015, 6, 21);
var now = new Date();
var diff = (date.getTime()/1000) - (now.getTime()/1000);
var clock = $('.clock').FlipClock(diff,{
clockFace: 'DailyCounter',
countdown: true
});
</script>
Months is zero-based, so July, being the seventh month, uses 6.
#Matt, Great example, however I can see why "coolshrimp" posted a similar formula, both are half correct.
In my website, when i use jsfiddle, I want it to also show "Hours" "Minutes" and "Seconds", the following example worked perfectly for me:
<script type="text/javascript">
var date = new Date("February 01, 2016 02:15:00"); //Month Days, Year HH:MM:SS
var now = new Date();
var diff = (date.getTime()/1000) - (now.getTime()/1000);
var clock = $('.clock').FlipClock(diff,{
clockFace: 'DailyCounter',
countdown: true
});
</script>
Simple:
<div class="clock"></div>
<script type="text/javascript">
var clock = $('.clock').FlipClock(new Date("August 15, 2015 03:24:00"),{
clockFace: 'DailyCounter',
countdown: true
});
</script>
OR
<div class="clock"></div>
<script type="text/javascript">
var clock = $('.clock').FlipClock(new Date(2015,8,15),{
clockFace: 'DailyCounter',
countdown: true
});
</script>
You would have to do it someway like this:
$(document).ready(function(){
var date = new Date(2014, 7, 21, 0,0,0,0);
var today = new Date();
var dif = date.getTime() - today.getTime();
var timeLeft = Math.abs(dif/1000)/60;
var clock = $('.clock').FlipClock({
autoStart: false,
clockFace: 'DailyCounter',
countdown: true
});
clock.setTime(timeLeft);
clock.start();
});
The time function is a little bit off, so you'll have to play around with it to get it right.
Fiddle: http://jsfiddle.net/Uscg9/4/
I think using the api function of Date will be better (reference)
$(document).ready(function() {
// Today's date object.
var today = new Date();
today = today.getTime()/1000;
// Final date object.
var finalDate = new Date();
// Setting year for final date.
finalDate.setFullYear(2016);
// Setting month for final date.
// Month counting starts from 0 i.e. Jan = 0, therefore March = 2.
finalDate.setMonth(2);
// Setting Day for final date.
finalDate.setDate(17);
// Setting Hours for final date.
finalDate.setHours(12);
// Setting Minutes for final date.
finalDate.setMinutes(00);
// Setting Seconds for final date.
finalDate.setSeconds(00);
var finalDate = finalDate.getTime()/1000;
var diff = finalDate - today;
$('div#countdown-clock').FlipClock(diff, {
clockFace: 'HourlyCounter',
countdown: true
});
});
You need to calculate the diff yourself. See the example for counting down to new year:
https://github.com/objectivehtml/FlipClock/blob/master/examples/countdown-from-new-years.html
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the past. In this case, it's always been since Jan 1
var pastDate = new Date(currentDate.getFullYear(), 0, 1);
// Calculate the difference in seconds between the future and current date
var diff = currentDate.getTime() / 1000 - pastDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter'
});
);
I need to be able to get the correct timezoneOffset by using javascript, if a user has disabled "Automatically adjust time clock for Daylights saving time" on his or her computer.
For example if i turn on automatically adjust DST i get -420 in june, and -480 in January for Pacific Time zone.
However if i disable Automatically adjust DST i get -480 for both January and June.
Is there any way to correct this behavior so that i get the expected DST even if automatically adjust DST time is checked off?
This is a function I've used a little while back (source), hope this helps.
function TimezoneDetect(){
var dtDate = new Date('1/1/' + (new Date()).getUTCFullYear());
var intOffset = 10000; //set initial offset high so it is adjusted on the first attempt
var intMonth;
var intHoursUtc;
var intHours;
var intDaysMultiplyBy;
//go through each month to find the lowest offset to account for DST
for (intMonth=0;intMonth < 12;intMonth++){
//go to the next month
dtDate.setUTCMonth(dtDate.getUTCMonth() + 1);
//To ignore daylight saving time look for the lowest offset.
//Since, during DST, the clock moves forward, it'll be a bigger number.
if (intOffset > (dtDate.getTimezoneOffset() * (-1))){
intOffset = (dtDate.getTimezoneOffset() * (-1));
}
}
return intOffset;
}
To detect DST without using getTimezoneOffset use this:
var rightNow = new Date();
var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
var temp = jan1.toGMTString();
var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
var june1 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
temp = june1.toGMTString();
var june2 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var daylight_time_offset = (june1 - june2) / (1000 * 60 * 60);
var dst;
if (std_time_offset == daylight_time_offset) {
dst = "0"; // daylight savings time is NOT observed
} else {
dst = "1"; // daylight savings time is observed
}