Develop Reference

How to add time to time (minutes + minutes) in Javascript ? (Not to Date)

I don't finde anywhere how to add time to time, like adding 45 minutes to 45 minutes and having 1:30 (1 hour, 30 minutes).
I just find how to add time to actual Date.
Heres an example in PHP of what I'm looking for:
$seconds_toadd = 45;// VALUE TO GET FROM A TEXTBOX
$actual_value = '00:45'; //45 minutes, 0 hours is the actual value
$resultado = new DateTime($lectura_xml);
$resultado->add(new DateInterval('PT' . $seconds_toadd . 'S'));//This is how I add seconds in PHP
$stamp = $resultado->format('I:s');//Formatting result
echo $stamp;
Thank you.

Moment.js is a great library for date/time handling in JavaScript and better than the standard API and any homemade solution in many aspects.
Very simple but similar use case from their docs:
var a = moment.duration(1, 'd');
var b = moment.duration(2, 'd');
a.add(b).days(); // 3

Working with date javascript strings, possible?

I have a functie that keeps track of the local time live. I'm using the new Date(); object to get the local hours, minutes and seconds.
I also want the user to give a input where a function has to start on a specific time. The input of the user is a string (I don't want the user to work with the Date(); object as not all users can program). For example:
Input user:
var timeStart = "10:08:30";
Live time converted to string:
var sTime = todayHours + ':' + todayMinutes + ':' + todaySeconds;
When the two are equal:
if(sTime == timeStart )
{
//function when equals time
//This function has a timeout, so it will run infinite times
var timeOutId = setTimeout(function()
{
//call functie
}, 10000); //every 10 seconds as example
}
Alright this work just fine. I can compare strings only if they are the same or not. However to make it a little bit more complicated: I also want the user to give a end time, when to function has to stop:
Input user:
var timeEnd = "11:08:30";
Live time converted to string:
var sTime = todayHours + ':' + todayMinutes + ':' + todaySeconds;
When the two are equal:
if( sTime == timeEnd)
{
//function when equals time
//calls the timeout id and stops it
clearTimeout(timeOutId);
}
Now this just works fine! However now you know what i'm trying to do i'm wondering if i can do in some way:
if(sTime >= timeStart && sTime <= timeEnd)
{
//timeout will only be set when it's in between the given time
setTimeout(function()
{
//call functie
}, 10000); //every 10 seconds as example
}
Question
I there a way i can transform my string time(using 2-digits method) in a excisting date time so i can compare it on time?
My time only uses [hour, minutes and seconds], which causes problems as the Date(year, month and day) is not defined.
I've tryed to use Momentjs but it also refuses to work with only hour, minutes and seconds. Or i might not be farmilier on how to do this.
The method i want to use seems much easier as i don't have to define when to cancel the timeOut.
Any help is appreciated!
P.s What i actually just have to accomplish is converting the string time to a unix time stamp (Of course other methods are welcome too).

Dont know moment.js but you could still use basic parseInt to extract the time , turn it into and integer so you can compare it with another one :
function stringtime_to_seconds(aString){
var time,a = aString.split(":");
switch(a.length){
default: // 3 , you'll need to handle other cases
time = parseInt(a[0])*3600+parseInt(a[1])*60+parseInt(a[2]);
}
return time;
}
then you can compare dates.

I've tryed to use Momentjs but it also refuses to work with only hour, minutes and seconds. Or i might not be farmilier on how to do this.
...
What i actually just have to accomplish is converting the string time to a unix time stamp
You simply need to provide the format string, such as:
// parse the input
var timeStart = "10:08:30";
var m = moment(timeStart,"HH:mm:ss");
// then one of these
var s = m.unix(); // unix time in seconds
var ms = m.valueOf(); // unix time in milliseconds
Of course, to get unix time you have to have a specific date in mind. With the above method, it will use the local time zone's "today". This might be a concern if you have a range that spans over midnight, such as 10pm - 2am, so you might need to adjust.
Also, you said you were doing a range comparison like:
if(sTime >= timeStart && sTime <= timeEnd)
You probably should not do that with strings. But also, you should use a half-open interval [start,end). In other words:
if(sTime >= timeStart && sTime < timeEnd)
Usually when someone says 1:00 to 2:00, they mean that the range is over at 2:00.

Live asynchronous time feed for websites

I want to show up the time over my website based over the location of the user, let’s say if user one browsing the website is from USA than the time should be what is in USA currently and same for China etc. and all.
I was wondering if there exists a JavaScript plugin for it but I didn’t find any as dynamic as I want, my requirements include:
Something that can be fully stylized according to website theme (no iframes)
The pattern I want is to be in (HH:MM:SS)
It should be asynchronous like the second [SS] keep ticking and the time keep updating
Is this possible, a way around to achieve it?

Wouldn't this be enough?
html
<span id="time"></span>
js
$(function() {
var time = $("#time");
function getTime() {
var now = new Date(),
hours = now.getHours(),
minutes = now.getMinutes(),
seconds = now.getSeconds();
return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
}
setInterval(function() {
time.text(getTime());
}, 1000);
});​
Example

Just putting out the local system time of the user isn't enough?
If you want a server based solution, please take a look at the solution here. You have to find out the users timezone first and then manipulate the server time with an offset from the timezone using $dt->setTimezone(new DateTimeZone("Europe/Berlin"));.

Calculate amount of time until the next hour

I'm working on a busing website project and the buses run every hour. I'm having trouble creating a widget that finds the time between now and the next hour, so that it is clear when the next bus will run. My client requires that it is in javascript. Any suggestions?
Thanks in advance.

To know exactly the miliseconds from now to the next hour:
function msToNextHour() {
return 3600000 - new Date().getTime() % 3600000;
}
Please note that this will strictly tell you how many milliseconds until the NEXT hour (if you run this at 4:00:00.000 it will give you exactly one hour).

function getMinutesUntilNextHour() { return 60 - new Date().getMinutes(); }
Note that people who's system clocks are off will miss their bus. It might be better to use the server time instead of the time on the client's computer (AKA at least partly a non-client-side-javascript solution).

you have the Date object in Javascript, you could do something like:
var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();
var response = "it will be " + (60 - mins - 1) + " minutes and " + (60 - secs) + " seconds until the next bus";
of course you will have to work more on those calculations, but that's how you work with time in javascript

Either of the other two answers will work well, but are you aware of the docs available to you about all the other nice things date is JS can do for you?
Mozilla Date Docs
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

Lots of answers, a really simple function to get the rounded minutes remaining to the next hour is:
function minsToHour() {
return 60 - Math.round(new Date() % 3.6e6 / 6e4);
}

How can I determine what image shows up based on your time zone or local time?

I have no acess to php. Is this possible w/ jquery?
Here is an example.
lets say the business opens at 11:00am and closes at 7:00 and the would like for a live chat image to say 'we're online!' but when they're closed they want the image to say 'we're offline'.
Does this help? If anyone has a solution to this please help. thanks.

You could get the client date using the Date object and datejs to simplify date manipulations like parsing, ...

Here's how to compensate for other timezones using Central Standard Time as the server's timezone:
http://jsfiddle.net/pxfunc/AcFhg/2/
javascript/jQuery:
// Translate your hours to UTC, example here is using Central Standard Time (-0500 UTC)
// Opening hour in UTC is 16, Closing hour is 0 the next day
var d = new Date(),
open = new Date(),
closed = new Date();
// Statically set UTC date for open
open.setUTCHours(16); // Open time at 11:00 am CST which is 16:00 UTC
open.setUTCMinutes(0);
open.setUTCSeconds(0);
open.setUTCMilliseconds(0);
// Statically Set UTC date for closing
closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0 so we add a day
closed.setUTCHours(0); // Closing time at 7:00 pm CST which is 00:00 UTC (so we need to add a day)
closed.setUTCMinutes(0);
closed.setUTCSeconds(0);
closed.setUTCMilliseconds(0);
// Debugging
console.log("user's date:" + d);
console.log("store open time in user's timezone:" + open);
console.log("store close time in user's timezone:" + closed);
console.log(d > open); // user's time is greater than opening time
console.log(d < closed); // is user's time less than closing time (you don't have to go home...)
// Test for store open?
if (d > open && d < closed) {
setOpenStatus(true);
}
else {
setOpenStatus(false);
}
function setOpenStatus(isOpen) {
$('#open').toggle(isOpen);
$('#closed').toggle(!isOpen);
}
Note: it would be really difficult to fully compensate for the various daylight savings changes around the world but this will work for most cases

As multiple people have pointed out, anything you do on the client machine will be based on the client time rather than your actual business time.
Why don't you put an image on the page, don't worry about changing anything on the page, and just change the image on your server when your business opens or closes?

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
if ((h > 18) || (h < 11)) {
$(img).src('closed.jpg');
}

<script type="text/javascript">
<!--
var objDate = new Date();
var hours = objDate.getHours();
var imgsrc = (hours > 11 && hours < 19) ? 'open.jpg' : 'close.jpg';
document.write('<img src="'+imgsrc+'" />');
//-->
</script>

hopefully following can help you a bit
http://www.w3schools.com/JS/js_if_else.asp