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)
Related
I want to get Unix timestamp (time in seconds) from tomorrow.
I have tried the following with no success:
var d = new Date();
d.setDate(d.getDay() - 1);
d.setHours(0, 0, 0);
d.setMilliseconds(0);
console.log(d/1000|0)
How would I fix the above?
Just modified your code and it works fine
var d = new Date();
d.setDate(d.getDate() + 1);
d.setHours(0, 0, 0);
d.setMilliseconds(0);
console.log(d)
>> Sun Apr 21 2019 00:00:00 GMT+0530 (India Standard Time)
Hope this will work for you
This should do it.
Copied directly from https://javascript.info/task/get-seconds-to-tomorrow
function getSecondsToTomorrow() {
let now = new Date();
// tomorrow date
let tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1);
let diff = tomorrow - now; // difference in ms
return Math.round(diff / 1000); // convert to seconds
}
console.log(getSecondsToTomorrow());
you could use a third party library like moment js which makes your life alot easier
momentjs
You can use a unix timestamp and add 24*60*60*1000 (same as 86400000) to the current time's timestamp. You can then pass that to new Date() like this:
24 = hours
60 = minutes
60 = seconds
1000 = converts the result to milliseconds
// Current timestamp
const now = Date.now()
// Get 24 hours from now
const next = new Date(now + (24*60*60*1000))
// Create tomorrow's date
const t = new Date(next.getFullYear(), next.getMonth(), next.getDate())
// Subtract the two and divide by 1000
console.log(Math.round((t.getTime() - now) / 1000), 'seconds until tomorrow')
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);
How do I create a random UNIX timestamp using JavaScript:
Between now and the end of the working day (i.e. today between 08:00-17:00) if appointment.status === "today".
From tomorrow + 1 week but keeping in mind the working day (so it can be next week Tuesday 13:00, keeping in mind the working day i.e. 08:00-17:00) if appointment.status === "pending".
This is what I have done so far:
if(appointment.status === "today") {
appointment.timestamp = (function() {
return a
})();
} else if(appointment.status === "pending") {
appointment.timestamp = (function() {
return a
})();
}
This is similar to another question (Generate random date between two dates and times in Javascript) but to handle the "pending" appointments you'll also need a way to get a day between tomorrow and a week from tomorrow.
This function will return a random timestamp between 8:00 and 17:00 on the date that is passed to it:
var randomTimeInWorkday = function(date) {
var begin = date;
var end = new Date(begin.getTime());
begin.setHours(8,0,0,0);
end.setHours(17,0,0,0);
return Math.random() * (end.getTime() - begin.getTime()) + begin.getTime();
}
To get a random timestamp today between 08:00 and 17:00 today you could do:
var today = new Date();
var timestamp = randomTimeInWorkday(today);
console.log(timestamp); // 1457033914204.1597
console.log(new Date(timestamp)); // Thu Mar 03 2016 14:38:34 GMT-0500 (EST)
This function will return a random date between tomorrow and a week from tomorrow for the date that is passed to it:
var randomDayStartingTomorrow = function(date) {
var begin = new Date(date.getTime() + 24 * 60 * 60 * 1000);
var end = new Date(begin.getTime());
end.setDate(end.getDate() + 7);
return new Date(Math.random() * (end.getTime() - begin.getTime()) + begin.getTime());
}
To get a random timestamp between 08:00 and 17:00 on a random day between tomorrow and a week from tomorrow, you could do:
var today = new Date();
var randomDay = randomDayStartingTomorrow(today);
var timestamp = randomTimeInWorkday(randomDay);
console.log(timestamp); // 1457194668335.3162
console.log(new Date(timestamp)); // Sat Mar 05 2016 11:17:48 GMT-0500 (EST)
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.)
I'm working with a service that gives me broadcast times for Television shows in Unix Time (seconds since midnight, January 1st, 1970, in Greenwich, England). I need to convert this, in javascript, to Eastern Standard time (USA). I need to account for daylight savings time, and for the fact that the client's clock may be set to something other than Eastern Standard time. I'm sure this code has been written before. Can anyone point me toward it?
What you'll find is it's not possible to translate to a specific timezone, but as long as your users are in the desired timezone, this will work:
var date = new Date();
date.setTime(unixTime * 1000);
The resulting date object will display in the timezone of the computer running the browser:
window.console.log(date.toString())
yields:
"Thu Jun 25 2009 09:48:53 GMT-0400 (EDT)"
for me anyway)
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-6016329.html
Looks to have a solution for changing timezones, but it does look like you have to do the math yourself. There is no, setTimezone or setLocale method.
I wrote some code which will turn GMT milliseconds into a Date-like object which can be queried for eastern standard time values. It handles daylight savings.
ESTDate = function(millis){
if(isNaN(parseInt(millis))) {
throw new Error("ESTDate must be built using a number");
}
var MILLIS_PER_DAY = 1000 * 60 * 60 * 24;
var gmtDate = new Date(millis);
var clockSetDate = function(month){
var date = new Date(0);
date.setUTCFullYear(gmtDate.getUTCFullYear());
date.setUTCMonth(month);
date.setUTCHours(2);
while(date.getUTCDay() != "0"){
date.setTime(
date.getTime() + MILLIS_PER_DAY
);
};
return date;
}
var startStandarTimeDate = clockSetDate(2);
var endStandardTimeDate = clockSetDate(10);
date = new Date(millis);
var estOffset = 60 * 60 * 1000 * 4;
var dltOffset = (
(startStandarTimeDate < date) &&
(date < endStandardTimeDate)
) ? 0: 60 * 60 * 1000;
date.setTime(date.getTime() - (estOffset + dltOffset));
var self = {
getDate: function(){
return date.getUTCDate();
},
getDay:function(){
return date.getUTCDay();
},
getFullYear:function(){
return date.getUTCFullYear();
},
getHours:function(){
return date.getUTCHours();
},
getMilliseconds:function(){
return date.getUTCMilliseconds();
},
getMinutes:function(){
return date.getUTCMinutes();
},
getMonth:function(){
return date.getUTCMonth();
},
getSeconds:function(){
return date.getUTCSeconds();
}
}
return self;
}