I bet there must be some plugin out there which might turn this problem into something way easier to solve, like MomentJs but the truth is; I don't know how to use it :) So I want to do it as basic as possible.
I've built an ALMOST-WORKING example of what I want to achieve here:
http://jsfiddle.net/Frondor/5a5wrssn/
The interface and controls are made, but I'm still missing the functions to: 1. Automatically detect user's timezone (like '-1', '0', '+2') and calculate the given time (see input #time) to match the french timezone (which is UTC/GMT +2).
In some kind of order:
- Get user current time/timezone (hours only, not minutes or seconds)
- Get the time introduced by the user to calculate Calculate
- introduced time with other country's time (France in this case).
- Return the value as hours like 02:00
This is my script so far, these are controls mostly, I don't know how to build the needed functions for this to work like I described above :)
$(document).ready(function () {
//Automatically detect user's timezone and store it inside this variable
//Let's use a temporal example just to see how the whole script works
var userTimeZone = "-3"; //here goes a function, its just an example of the variable userTimeZone already resolved for some function I don't know how to code hehe
$("#detected").hide().fadeIn(2000); //just4fancy
$("#uTZ").text(userTimeZone); //print the detected timezone
var timeInput = $('#time');
timeInput.focus();
timeInput.on('change keyup mouseup', function () {
var userTZ = $("#uTZ").text();
var franceTZ = "2"; //predefined timezone of France +2
//Now I try to set the differnce of timezones in order to see how to calculate the final time
var calculation = userTZ-franceTZ; //here is where the calculation happens. Actually, It is (of course) wrong :)
var actualValue = $(this).val();
//print the results
if (timeInput.val() !== '00') {
$('#actual').text(actualValue + ':00 hours');
$('#result').text(actualValue - calculation + ':00 hours'); //this calculates
the given time with the difference of timezones to show a converted time
$('.panel-footer').removeClass('hidden').hide().slideDown();
}
}).bind('mousewheel', function (e) {
return false;
});
});
If its useful for somebody, I've found this Convert timezone offset number of hours to timezone offset in (military?) hours but I didn't know how to implement the same on my script :(
Thanks in advance!
