Difference between new Date() and firestore new Date() data - javascript

For a new app I want to know the time between the start and end of a run.
At the start I save a timestamp with the new Date() function in Firebase. (I'm using this function and not firestore fieldValue because the stamps can't fight with other users making stamps at the same moment.
Before definitely ending the run I want an overview of the difference in time between start and end.
I take the start value from firebase, and I make a temporary end value with the new Date() function.
When I put those 2 values next to each other it seems firestore changes the value when it's written in the database.
When I write the endStamp also in firebase and use this value for the calculation, it all works fine.
This is my code right now:
calculateTimeBetweenStamps(run) {
const startTime = run.startTimestamp;
const endTime = new Date();
return calculateTimeBetweenStamps({
startTime: startTime,
endTime: endTime
});
}
Js file that includes the function:
export function calculateTimeBetweenStamps(e) {
const startTime = e.startTime;
const endTime = e.endTime;
var difference = endTime - startTime;
var sec_num = parseInt(difference, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return `${hours}:${minutes}:${seconds}`;
}

Firestore uses JavaScript Date object, same as your code, however it has a limitation as you can see in the documentation:
When stored in Cloud Firestore, precise only to microseconds; any additional precision is rounded down.
This might be the difference in the dates that you are experiencing. If you need this level of granularity you can use only Timestamps in Firestore, since as you can see in it's documentation:
represents a point in time independent of any time zone or calendar, represented as seconds and fractions of seconds at nanosecond resolution in UTC Epoch time.
And then to operate it in your code you can covert it to date with it's .toDate() function, which will return you again a JavaScript Date object but without precision being rounded up.

Related

Countdown timer in nodejs

I am creating a website for students which will be used to assign exams and I am having difficulties with the timer. The one I am using is made on the frontend in javascript and whenever the page is refreshed the timer startsover. Tried to store the start and end date by converting to epoch and back to datetime but I cannot think of a way to get the timer to the frontend and start counting. The idea is to count 60 minutes and call the submit button as well as to show the countdown without the option to restart the counter.
This is how I store the start and end time in nodejs.
var myDate = new Date();
var startTimeEpoch = myDate.getTime()/1000.0;
var endTimeEpoch = startTimeEpoch + 5400 // Adding 90 minutes to the timer
var startTimeBackToDate = new Date(startTimeEpoch *1000)
var endTimeBackToDate = new Date(endTimeEpoch *1000)
This is the javascript timer I am using and I am wondering if I should use one in the first place.
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
start = Date.now() + 1000;
}
}
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = "<%= scenario.time %>" * 60,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
}
As a general response and with the additional information provided, i could propose a solution to make this work.
If your students all have a specific exam entity attached to them, when they register/start an exam, you could retrieve the start date of this exam(add a mongo createdAt Date field) and use it as the starting date.
If each exam has a time limit, then you could simply do the math to know how much time is left. Something that will look like this:
const getExamRemainingTime = (exam) => {
// assuming that start is a js date object
// and timeLimit is an number representing the duration hours of your exam
const { start, timeLimit } = exam;
let end = (start.getHours() + timeLimit);
end = end.setHours(end);
const remainingTime = (+end) - (+start)
if (remainingTime > 0) {
// duration not finished, exam still in progress
return new Date(remainingTime);
} else {
// exam finished
return 0;
}
}
Then in your frontend, if it's plain javascript, you need to refresh your timer component, use setInterval in last ressort because it's very heavy on performance and format the date you got the way you want to show it.
Ref: casting js Date object to timestamp - How do you get a timestamp in JavaScript?.
I don't think a timer that a student with Javascript knowledge can modify should be used for serious tests, but for anything more light-hearted it should be fine.
The best system I can think of for this would be to have the test length stored in the mongodb and when a signed-in user starts the test, have the current time logged for that user. That way, you can calculate time remaining using user.testStart + test.length - Date.now().

Proper way to manipulate date string with wrong year, but correct time

I'm having to hit an API I have no access to fixing and I need to start a timer showing how long someone has been in a queue for. The date I get back is in this format 1556214336.316. The problem is the year always shows up as 1970, but the time is the correct start time. I need to calculate the difference between the time now, and the time the conversation was created at. I have tried this with little success and was wondering if there is an elegant way to only get the difference in time and not the total amount of seconds.
convertDateToTimerFormat = (time) => {
const now = new Date();
const diff = Math.round((now - parseInt(time.toString().replace('.', ''))) / 1000);
const hours = new Date(diff).getHours();
const minutes = new Date(diff).getMinutes();
const seconds = new Date(diff).getSeconds();
return `${hours}:${minutes}:${seconds}`;
}
The weird parseInt(time.toString().replace('.', ''))) seems to fix the 1970 issue, but I still can't get the data to be manipulated how I need.
I tried the momentjs library, but their diff method only appears to allow for days and hours.
Any help/guidance, would be much appreciated.
Edit with working code:
convertDateToTimerFormat = (time) => {
const now = new Date();
// eslint-disable-next-line radix
const diff = new Date(Number(now - parseInt(time.toString().replace(/\./g, ''))));
const hours = diff.getHours();
const minutes = diff.getMinutes();
const seconds = diff.getSeconds();
return `${hours}:${minutes}:${seconds}`;
}
Unix time values are the number of seconds since the Epoch and won't have a decimal like your 1556214336.316
If I take 1556214336 (without the .316) and put it in a converter I get the output 04/25/2019 # 5:45pm (UTC) which is not 1970 — it seems an accurate time (I haven't independently verified)
It seems, then, your 1556214336.316 is the seconds.milliseconds since the epoch.
Javascript uses the same epoch, but is the number of milliseconds since the epoch, not seconds, so if I'm correct about the time you're getting you should be able to just remove the decimal place and use the resulting number string. Indeed
var d = new Date(1556214336316);
console.log('Date is: ' + d.toUTCString());
produces
Date is: Thu, 25 Apr 2019 17:45:36 GMT
which exactly matches the converter's time of "5:45pm"
var d = new Date(1556214336316);
console.log('Date is: ' + d.toUTCString());
Assuming your value 1556214336.316 is a String coming back from a web API, you can remove the decimal and your conversion can be done like this (note you don't have to keep creating new Date objects):
convertDateToTimerFormat = (time) => {
const d = new Date( Number(time.replace(/\./g, '')) );
return `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
};
console.log( 'time: ' + convertDateToTimerFormat('1556214336.316') );
Depending on your use, you may want to use getUTCHours() etc. instead.
I don't know about elegant, but this calculates and displays the expired time in h:mm:ss format:
console.log(convertDateToTimerFormat(1556215236.316));
function convertDateToTimerFormat(time){
// Converts `time` to milliseconds to make a JS Date object, then back to seconds
const expiredSeconds = Math.floor(new Date()/1000) - Math.floor(new Date(time * 1000)/1000);
// Calculates component values
const hours = Math.floor(expiredSeconds / 3600), //3600 seconds in an hour
minutes = Math.floor(expiredSeconds % 3600 / 60),
seconds = expiredSeconds % 3600 % 60;
// Adds initial zeroes if needed
if (minutes < 10) { minutes = "0" + minutes; }
if (seconds < 10) { seconds = "0" + seconds; }
// Returns a formatted string
return `${hours}:${minutes}:${seconds}`;
}

Difference between two date in seconds [duplicate]

I'm trying to get a difference between two dates in seconds. The logic would be like this :
set an initial date which would be now;
set a final date which would be the initial date plus some amount of seconds in future ( let's say 15 for instance )
get the difference between those two ( the amount of seconds )
The reason why I'm doing it it with dates it's because the final date / time depends on some other variables and it's never the same ( it depends on how fast a user does something ) and I also store the initial date for other things.
I've been trying something like this :
var _initial = new Date(),
_initial = _initial.setDate(_initial.getDate()),
_final = new Date(_initial);
_final = _final.setDate(_final.getDate() + 15 / 1000 * 60);
var dif = Math.round((_final - _initial) / (1000 * 60));
The thing is that I never get the right difference. I tried dividing by 24 * 60 which would leave me with the seconds, but I never get it right. So what is it wrong with my logic ? I might be making some stupid mistake as it's quite late, but it bothers me that I cannot get it to work :)
The Code
var startDate = new Date();
// Do your operations
var endDate = new Date();
var seconds = (endDate.getTime() - startDate.getTime()) / 1000;
Or even simpler (endDate - startDate) / 1000 as pointed out in the comments unless you're using typescript.
The explanation
You need to call the getTime() method for the Date objects, and then simply subtract them and divide by 1000 (since it's originally in milliseconds). As an extra, when you're calling the getDate() method, you're in fact getting the day of the month as an integer between 1 and 31 (not zero based) as opposed to the epoch time you'd get from calling the getTime() method, representing the number of milliseconds since January 1st 1970, 00:00
Rant
Depending on what your date related operations are, you might want to invest in integrating a library such as day.js or Luxon which make things so much easier for the developer, but that's just a matter of personal preference.
For example in Luxon we would do t1.diff(t2, "seconds") which is beautiful.
Useful docs for this answer
Why 1970?
Date object
Date's getTime method
Date's getDate method
Need more accuracy than just seconds?
You can use new Date().getTime() for getting timestamps. Then you can calculate the difference between end and start and finally transform the timestamp which is ms into s.
const start = new Date().getTime();
const end = new Date().getTime();
const diff = end - start;
const seconds = Math.floor(diff / 1000 % 60);
Below code will give the time difference in second.
import Foundation
var date1 = new Date(); // current date
var date2 = new Date("06/26/2018"); // mm/dd/yyyy format
var timeDiff = Math.abs(date2.getTime() - date1.getTime()); // in miliseconds
var timeDiffInSecond = Math.ceil(timeDiff / 1000); // in second
alert(timeDiffInSecond );
<script type="text/javascript">
var _initial = '2015-05-21T10:17:28.593Z';
var fromTime = new Date(_initial);
var toTime = new Date();
var differenceTravel = toTime.getTime() - fromTime.getTime();
var seconds = Math.floor((differenceTravel) / (1000));
document.write('+ seconds +');
</script>
Accurate and fast will give output in seconds:
let startDate = new Date()
let endDate = new Date("yyyy-MM-dd'T'HH:mm:ssZ");
let seconds = Math.round((endDate.getTime() - startDate.getTime()) / 1000);
time difference between now and 10 minutes later using momentjs
let start_time = moment().format('YYYY-MM-DD HH:mm:ss');
let next_time = moment().add(10, 'm').format('YYYY-MM-DD HH:mm:ss');
let diff_milliseconds = Date.parse(next_time) - Date.parse(star_time);
let diff_seconds = diff_milliseconds * 1000;
let startTime = new Date(timeStamp1);
let endTime = new Date(timeStamp2);
to get the difference between the dates in seconds ->
let timeDiffInSeconds = Math.floor((endTime - startTime) / 1000);
but this porduces results in utc(for some reason that i dont know).
So you have to take account for timezone offset, which you can do so by adding
new Date().getTimezoneOffset();
but this gives timezone offset in minutes, so you have to multiply it by 60 to get the difference in seconds.
let timeDiffInSecondsWithTZOffset = timeDiffInSeconds + (new Date().getTimezoneOffset() * 60);
This will produce result which is correct according to any timezone & wont add/subtract hours based on your timezone relative to utc.
Define two dates using new Date().
Calculate the time difference of two dates using date2. getTime() – date1. getTime();
Calculate the no. of days between two dates, divide the time difference of both the dates by no. of milliseconds in a day (10006060*24)
const getTimeBetweenDates = (startDate, endDate) => {
const seconds = Math.floor((endDate - startDate) / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
return { seconds, minutes, hours, days };
};
try using dedicated functions from high level programming languages. JavaScript .getSeconds(); suits here:
var specifiedTime = new Date("November 02, 2017 06:00:00");
var specifiedTimeSeconds = specifiedTime.getSeconds();
var currentTime = new Date();
var currentTimeSeconds = currentTime.getSeconds();
alert(specifiedTimeSeconds-currentTimeSeconds);

Countdown changed by changing gmt of system(pc) clock

Hi guys need some help,
here is my code
function getCurrentDateByGMT(finalTimezone){
var now = new Date();
var localTime = now.getTime();
var finalGMT = now.getTimezoneOffset() - finalTimezone;
var localOffset = finalGMT * 60000; // where 60000 is equals to 1 min
return new Date(localTime + localOffset);
}
this function gets the current date by inputed gmt -480 where gmt + 8 multiplied by -60
but whenever i changed my computer timezone the countdown also changed.
after i refresh the browser it went back to normal countdown without changing the timezone.
i wonder why can someone help me with this ? thanks in advance and also for grammar correction you are welcome to edit this question thanks thanks.
also, can someone explain this to me thanks again
update :
okay here's my full code
function getTimeRemaining(endtime,gmt){
var t = Date.parse(endtime) - Date.parse(getCurrentDateByGMT(gmt));
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(hour,minute,second,endtime,gmt){
var locHour = document.getElementById(hour);
var locMinute = document.getElementById(minute);
var locSecond = document.getElementById(second);
if(!endtime){
console.log(false);
}else{
function updateClock(){
var countDown = getTimeRemaining(endtime,gmt);
console.log(countDown);// here is the console that output the image above
if(countDown.total>=0){
locHour.innerHTML = ('0' + countDown.hours).slice(-2);
locMinute.innerHTML = ('0' + countDown.minutes).slice(-2);
locSecond.innerHTML = ('0' + countDown.seconds).slice(-2);
}else{
console.log("happend");
clearInterval(timeinterval);
initializeClock(hour,minute,second,generateTimerPerPeriod(),gmt);
}
}
updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
}
}
function generateTimerPerPeriod(){
var schedule = [['00:00:00', '11:59:59'],['12:00:00', '15:59:59'],['16:00:00', '19:59:59'],['20:00:00', '23:59:59']];
var currentTime = getCurrentDateByGMT(getTimezone('+8'));
var currentPeriod = new Date(currentTime);
for(var timeCtr = 0; timeCtr < schedule.length ; timeCtr++){
var startDate = schedule[timeCtr][0].split(':');
var endDate = schedule[timeCtr][1].split(':');
if(currentTime > currentPeriod.setHours(startDate[0],startDate[1],startDate[2],0) && currentTime < currentPeriod.setHours(endDate[0],endDate[1],endDate[2],0)){
var periodDate = new Date(currentPeriod.setHours(endDate[0],endDate[1],endDate[2],0));
// console.log(" enddate " +periodDate);
return periodDate;
}
}
return false;
}
function getCurrentDateByGMT(finalTimezone){
var myOldDateObj = new Date();
var myTZO = -480;
var myNewDate=new Date(myOldDateObj.getTime() + (60000*(myOldDateObj.getTimezoneOffset()-myTZO)));
console.log(" newdate "+ myNewDate);
var now = new Date();
var localTime = now.getTime();
var finalGMT = now.getTimezoneOffset() - finalTimezone;
var localOffset = finalGMT * 60000; // where 60000 is equals to 1 min
return new Date(localTime + localOffset);
}
function getTimezone(timezone){
return timezone * (-60);
}
Update :
how about this one ?
function getCurrentTimeGMT8(){
var d = new Date();
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var now = new Date(utc + (3600000*8));
var hour = addZero(now.getHours());
var min = addZero(now.getMinutes());
var sec = addZero(now.getSeconds());
var tz = "GMT+8";
var time = hour +':'+ min +':'+ sec + " " + tz;
return time;
}
A few things:
The getTime function of the Date object always returns values in terms of UTC, so calling it localTime is incorrect. That means your finalGMT and localOffset values are also incorrect because you're assuming the localTime value has been adjusted for the local offset, and it hasn't. Your code should just be:
Any time you construct a new Date by changing the underlying timestamp (like you do with new Date(localTime + localOffset), and also when you create your myNewDate variable), you're not actually changing the time zone. You're just moving the Date to a different moment in time, which is probably not the one you intended. The Date object will still represent time in the current local time zone, and will still follow the DST transition rules for the current local time zone. If you intended it to represent some other time zone, that can get in the way.
Note that you can still calculate the UTC-based numeric timestamp from the current time via Date.now() (or via Date.UTC with user input values) and adding the desired offset. You just can't then take that timestamp and put it in a Date object unless you intend it to reflect the local time zone. If you need to know the year, month, day, hour, minute, second of that timestamp in any other time zone than the local zone, you'll need a library such as moment.js, or some advanced algorithms of your own.
You asked about changing the time zone in the OS. You should recognize that the effect of this is inconsistent across browsers, versions, and operating systems. Many browsers (such as Chrome) will not pick up the new time zone until the browser process is completely terminated and restarted. However, some browsers (such as IE) will update the time zone without requiring a restart. If you need the user's time zone offset, you shouldn't cache it.
Keep in mind that a number can only represent an offset. A time zone can have more than one offset, either due to daylight saving time, or due to changes over its history. Read "Time Zone != Offset" in the timezone tag wiki.
In your case, your countdown timer is working only with offsets. If that's your intent, then fine. You can certainly take a date, time, and offset as input values. Just don't assume that the current offset from new Date().getTimezoneOffset() will necessarily be the correct offset for ALL dates and times in the user's time zone.

JavaScript: clock and the Date()

So I have this clock script:
function digitalWatch(timestamp) {
var date = new Date(timestamp);
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout(function(){digitalWatch(timestamp+1)}, 1000);
}
digitalWatch(<<here I pass a UNIX timestamp from server>>)
The clock don't work.
I debuged it with console.log() and I saw that timestamp incremented correctly but the Date() constructor returns the same result again and again.
Someone knows what's the problem here? And how can I solve it?
UNIX timestamps count in seconds, JavaScript timestamps count in milliseconds.
You should just multiply the passed timestamp by 1000, e.g.:
var date = new Date(timestamp * 1000);
This will not only fix the initial conversion, but ensure that when you add a second (in the timer callback) that you actually do add 1 second, and not just 1 millisecond. The latter is the reason that you appear to be getting the same Date object back - you're almost certainly not, but the new one is only 1ms later than the previous so will show the same HH:MM:SS value most of the time.
In practise, note that you'll find that setTimeout does not guarantee that the events will fire 1000ms apart so you will get some clock drift.
You ought to take into account how long the preceding code takes to run too - indeed a better approach may be to simply determine the difference between the originally supplied timestamp and the local computer's time, and use that as a reference value for all subsequent calls.

Categories