JavaScript: Multi Time Zones Clocks - javascript

I want to display 3 clocks from 3 different time zones using JavaScript.
I browsed around the web searching for a simple solution but all I found was long scripts and .js extensions, all those to complete a simple task.
Is there an easy way to do this? do I really have to add an additional JS file to complete this task?
Thanks in advance to the helpers!

Is there an easy way to do this?
Yes.
do I really have to add an additional JS file to complete this task?
No. However, time handling in JS is difficult, since it has no really cross-browser-safe date/timestring parsing and formatting methods. It can be helpful to use a library for that, however that won't be necessary for your clock.
// all three clocks represent current time
var clock1 = new Date(); // current moment
var clock2 = new Date();
var clock3 = new Date();
// for outputting, adjust them
// leave clock1 in UTC
clock2.setHours(clock2.getHours() + 3); // UTC+3
clock3.setHours(clock3.getHours() - 5); // UTC-5
// now for display, use these values:
clock1.getUTCHours();
clock1.getUTCMinutes();
clock1.getUTCSeconds();
clock2.getUTCHours();
clock2.getUTCMinutes();
clock2.getUTCSeconds();
clock3.getUTCHours();
clock3.getUTCMinutes();
clock3.getUTCSeconds();

Related

Convert existing d3 live stream line graph to use seconds elapsed instead of time

Still relatively new to D3, and the functionality that I'm looking for is a live streaming line graph, with new data coming in real time. I've come across an example online that is EXACTLY what I'd like to implement, with one minor issue. As it streams, the x axis shows the clock time, which looks great, but My needs require it to be shown as time elapsed instead.
Here's the code for this:
https://bl.ocks.org/boeric/3b57a788a4b96e1af211
I've been trying to adapt this script to work, but all I've done is break it, it seems that time is pretty well integrated into this example. Is it worth converting this, or am I better off implementing my own solution? I can, but it may lack some of the bells and whistles that come in this example.
The closest solution so far is that I've changed the chart scales from this:
var x = d3.time.scale().range([0, width]);
to
var x = d3v3.scale.linear().range([0, width]);
Now I'm getting something more similar to a timestamp at each tick, which isn't ideal. I can't seem to find anyone else on the internet that as done something as simple as this, strange as that may sound.
As you already know Bo Ericsson’s Block 3b57a788a4b96e1af211 use his realTimeChart.js
You should try to adapt line 139,
var xAxis = d3.svg.axis().orient("bottom");
to
var xAxis = d3.svg.axis().orient("bottom").tickFormat(function(d) {
var dif = new Date() - d;
var seconds = Math.round(dif / 1000);
return seconds;
});
axis.tickFormat([format]) will do your thing.

Why is the C# parsed DateTime 7 hours ahead?

In trying to convert my local time from Javascript to C# I've poked around S/O to find some examples. While I've found a few different approaches to this, all of them render the final time as 7 hours ahead of me, which I'm not understanding.
e.g.:
var t = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc).AddMilliseconds(1468877118719).ToLocalTime();
Console.WriteLine(t)
7/18/2016 9:25:18 PM//<--output
or
var t = DateTime.Parse("2016-07-18T21:27:32.513Z");
Console.WriteLine(t);
7/18/2016 9:27:32 PM//output
Also, even when I simply try
var now = DateTime.Now;
Console.WriteLine(now);
7/18/2016 9:39:55 PM//the output is 7 hours ahead.
Can anyone tell me why this is happening and how to rectify it?
The machine where you run this has its local clock set to match UTC.
This is very common on servers and *nix workstations, including OS X.
What you're seeing is the output of the UTC value.
Change
Console.WriteLine(t);
to
Console.WriteLine(t.ToLocalTime());
Of course, this will only make a difference in the second case. You're already calling ToLocalTime() in the first instance.

Livestamp Plugin Jquery - how to show a time?

I use this jquery plugin: livestamp.
If you know, tell please, how to show time (hours, minutes ago) only for the current day. After 24 hours on next day - to show label "yesterday" or simple date.
Thank you!
By default, I don't think livestamp can do this.
But, at the bottom of livestamp's examples, they have some code to animate the text when it changes by hooking into the change.livestamp event.
We can use moment.js to modify this code to do what you're asking.
$('#animation').on('change.livestamp', function(event, from, to) {
event.preventDefault(); // Stop the text from changing automatically
// Get the original timestamp out of the event
var originalTS = event.timeStamp;
// Make a new moment object to compare the timestamp to
var newDate = moment();
// Use moment's .diff method to get the ms difference between timestamps
var delta = newDate.diff(originalTS);
// If the difference is less than a day's worth of ms
if (delta < 86400000){
// Use formatted text provided by the change event
$(this).html(to);
}
else {
// Format the moment object with whatever moment format you want
$(this).html( newDate.format("dddd M/D/YYYY") );
}
}).livestamp();
I haven't used livestamp, but it seems to rely on moment existing for its formatting options, so this should just work.
Livestamp's source is super small, so consider hacking on it yourself if you have other stuff you want to be able to do.

Javascript - generate value from time (ms)

I need to generate some values on Javascript, by clicking on a button, that can't be the same of previous values. I think to generate it from time in ms (in fact I think nobody can't click a button faster than a ms, right?).
What do you think? And how can I do this?
This should do the trick:
new Date().getTime()
yes, I think its pretty solid to use complete datetime (including milliseconds) as a seed for generating a random number.
var currentTime = new Date(),
time = currentTime.getTime();
Check out related question:
Seedable JavaScript random number generator
Also, see David Bau's blog for more information on seeding:
http://davidbau.com/archives/2010/01/30/random_seeds_coded_hints_and_quintillions.html#more

jQuery date/time picker [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've been looking around for a decent jQuery plugin that can handle both dates and times. The core UI DatePicker is great, but unfortunately I need to be able to take time in as well.
I've found a few hacks for the DatePicker to work with times, but they all seem pretty inelegant and Google isn't turning up anything nice.
Is there a good jQuery plugin for selecting dates and times in a single UI control with a usable interface?
By far the nicest and simplest DateTime picker option is http://trentrichardson.com/examples/timepicker/.
It is an extension of the jQuery UI Datepicker so it will support the same themes as well it works very much the same way, similar syntax, etc. This should be packaged with the jQuery UI imo.
#David, thanks for the recommendation! #fluid_chelsea, I've just released Any+Time(TM) version 3.x which uses jQuery instead of Prototype and has a much-improved interface, so I hope it now meets your needs:
http://www.ama3.com/anytime/
Any problems, please let me know via the comment link on my website!
In my view, dates and times should be handled as two separate input boxes for it to be most usable and efficient for the user to input. Let the user input one thing at a time is a good principle, imho.
I use the core UI DatePicker, and the following time picker.
This one is inspired by the one Google Calendar uses:
jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker
I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.
PS:
In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).
My best experience with a datepicker is with the prototype-based AnyTime. I know that's not jQuery, but it may still be worth the compromise for you. I know absolutely no prototype, and it's still easy enough to work with.
One caveat I've found: it is not forward compatible on some browsers. That is, it did not work with a newer version of prototype on Chrome.
Just to add to the info here, The Fluid Project has a nice wiki write-up overviewing a large number of date and/or time pickers here.
I researched this just recently and have yet to find a decent date picker that also includes a decent time picker. What I ended up using was eyecon's awesome DatePicker, with two simple dropdowns for time. I was tempted to use Timepickr.js though, looks like a really nice approach.
I have ran into that same problem. I actually developed my using server side programming, but I did a quick search to try and help you out and found this.
Seems alright, didn't look at the source too much, but seems to be purely JavaScript.
Take look:
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
Here is the demo page link:
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
good luck
This is some code I use to have a user select one
datetimepicker, set the datetime, and have the
other datetimepicker add One Minute to that time.
I needed this for a custom medication control....
Anyway, thought it might help someone else since I could
not find the answer any where online...
(at least not a complete answer)
Keep in mind that the 60000 added, adds one minute.
(60 * 1000 milliseconds)
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});
Take a look at the following JavaScript plugin.
Javascript Calendar with date and time
I've made it to be simple as possible. but it still in its early days.
Let me know the feedback so I could improve it.
Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.
I just bound the click event to pop it up:
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
I make one function like this:
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}
Then I use the jQuery UI datepicker like this:
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );
So, I get the value like this: 2010-10-31 12:41:57
We had trouble finding one that worked the way we wanted it to so I wrote one. I maintain the source and fix bugs as they arise plus provide free support.
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

Categories