Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help With timezone javascript output

    Greetings,
    Firstly let me state that i dont have any experience with javascripting.

    Well i Have been using this javascript code for me site and everything works fine with the timezoe convervion.
    Only thing is If i input the times in 12Hr format Ie. 4:45 or 4:45 pm it displays in the same format, If i try input the time as 24hr format I.e. 16:45 or 16:45 pm it displays the 12hr output ie. 4:45 pm

    Can anyone please help with changing the script below to output the info to the user in 24 hr format, Or how i can input the time into the script so that it displays in 24 hour format.

    This is the code where the times are entered

    Code:

    <script>new TTZC.Widget({ version:'inline', t:'16:45', tz:'London'}).display();</script>



    And this is the js file code can be foud here

    http://www.thetimezoneconverter.com/js/ttzc.js
    (code is to long to post and this is the source, im just using the script for my site to display times to users in there timezone)

    If anyone is abale to assist in telling me which values must be changed to which in the js file or able to even do the changes for me or explain how to display the output in 24hr format would be greatly apreciated.
    Thank you for your time
    Kind Regards

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    If you just want a dirty, hacky workaround, find the line

    document.write('<span>' + to.toString(time_format) + '</span>');
    and replace it with

    document.write('<span>' + to.toString(TIME_FORMAT_24H) + '</span>');
    However, that script is simply horrible and I wouldn't recommend using it at all. You may wanna choose going with moment.js. Simply save the following as "timezone-data.js":

    Code:
    moment.tz.add({
        "zones": {
            "Europe/London": [
                "-0:1:15 - LMT 1847_11_1_0 -0:1:15",
                "0 GB-Eire %s 1968_9_27 1",
                "1 - BST 1971_9_31_2",
                "0 GB-Eire %s 1996",
                "0 EU GMT/BST"]
        },
            "rules": {
            "GB-Eire": [
                "1916 1916 4 21 7 2 2 1 BST",
                "1916 1916 9 1 7 2 2 0 GMT",
                "1917 1917 3 8 7 2 2 1 BST",
                "1917 1917 8 17 7 2 2 0 GMT",
                "1918 1918 2 24 7 2 2 1 BST",
                "1918 1918 8 30 7 2 2 0 GMT",
                "1919 1919 2 30 7 2 2 1 BST",
                "1919 1919 8 29 7 2 2 0 GMT",
                "1920 1920 2 28 7 2 2 1 BST",
                "1920 1920 9 25 7 2 2 0 GMT",
                "1921 1921 3 3 7 2 2 1 BST",
                "1921 1921 9 3 7 2 2 0 GMT",
                "1922 1922 2 26 7 2 2 1 BST",
                "1922 1922 9 8 7 2 2 0 GMT",
                "1923 1923 3 16 0 2 2 1 BST",
                "1923 1924 8 16 0 2 2 0 GMT",
                "1924 1924 3 9 0 2 2 1 BST",
                "1925 1926 3 16 0 2 2 1 BST",
                "1925 1938 9 2 0 2 2 0 GMT",
                "1927 1927 3 9 0 2 2 1 BST",
                "1928 1929 3 16 0 2 2 1 BST",
                "1930 1930 3 9 0 2 2 1 BST",
                "1931 1932 3 16 0 2 2 1 BST",
                "1933 1933 3 9 0 2 2 1 BST",
                "1934 1934 3 16 0 2 2 1 BST",
                "1935 1935 3 9 0 2 2 1 BST",
                "1936 1937 3 16 0 2 2 1 BST",
                "1938 1938 3 9 0 2 2 1 BST",
                "1939 1939 3 16 0 2 2 1 BST",
                "1939 1939 10 16 0 2 2 0 GMT",
                "1940 1940 1 23 0 2 2 1 BST",
                "1941 1941 4 2 0 1 2 2 BDST",
                "1941 1943 7 9 0 1 2 1 BST",
                "1942 1944 3 2 0 1 2 2 BDST",
                "1944 1944 8 16 0 1 2 1 BST",
                "1945 1945 3 2 1 1 2 2 BDST",
                "1945 1945 6 9 0 1 2 1 BST",
                "1945 1946 9 2 0 2 2 0 GMT",
                "1946 1946 3 9 0 2 2 1 BST",
                "1947 1947 2 16 7 2 2 1 BST",
                "1947 1947 3 13 7 1 2 2 BDST",
                "1947 1947 7 10 7 1 2 1 BST",
                "1947 1947 10 2 7 2 2 0 GMT",
                "1948 1948 2 14 7 2 2 1 BST",
                "1948 1948 9 31 7 2 2 0 GMT",
                "1949 1949 3 3 7 2 2 1 BST",
                "1949 1949 9 30 7 2 2 0 GMT",
                "1950 1952 3 14 0 2 2 1 BST",
                "1950 1952 9 21 0 2 2 0 GMT",
                "1953 1953 3 16 0 2 2 1 BST",
                "1953 1960 9 2 0 2 2 0 GMT",
                "1954 1954 3 9 0 2 2 1 BST",
                "1955 1956 3 16 0 2 2 1 BST",
                "1957 1957 3 9 0 2 2 1 BST",
                "1958 1959 3 16 0 2 2 1 BST",
                "1960 1960 3 9 0 2 2 1 BST",
                "1961 1963 2 0 8 2 2 1 BST",
                "1961 1968 9 23 0 2 2 0 GMT",
                "1964 1967 2 19 0 2 2 1 BST",
                "1968 1968 1 18 7 2 2 1 BST",
                "1972 1980 2 16 0 2 2 1 BST",
                "1972 1980 9 23 0 2 2 0 GMT",
                "1981 1995 2 0 8 1 1 1 BST",
                "1981 1989 9 23 0 1 1 0 GMT",
                "1990 1995 9 22 0 1 1 0 GMT"],
                "EU": [
                "1977 1980 3 1 0 1 1 1 S",
                "1977 1977 8 0 8 1 1 0",
                "1978 1978 9 1 7 1 1 0",
                "1979 1995 8 0 8 1 1 0",
                "1981 9999 2 0 8 1 1 1 S",
                "1996 9999 9 0 8 1 1 0"]
        },
            "links": {}
    });
    Now, wherever you want the time to display, put a

    Code:
    <span id="time_output"></span>
    and then right before the "</body>" put the following (you can download the scripts instead of linking to them, of course):

    Code:
    <script src="http://momentjs.com/downloads/moment.min.js"></script>
    <script src="http://momentjs.com/downloads/moment-timezone.min.js"></script>
    <script src="timezone-data.js"></script>
    <script>document.getElementById('time_output').innerHTML = moment().tz("Europe/London").format('HH:MM');</script>
    In the very last line you can see that the output is formatted to "HH:MM" which is a typical pattern representing the 24 hour format. You can edit it to change it, if you like.

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good'ay Airblader,

    Thank you for that infomation. The moment.js files do look better, but i wasn't to sure how they work with my lack of knowledge of scripting and programming.

    So Just to confirm would i display the time like this?
    Code:
    <span id="time_output">16:45</span>
    And how does it know which timezone the time should be converted from?
    Does it take from GMT or does it take it as the zone set ïe "europe/london" in timezone-data.js file?

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have saved the timezone-data.js as you put it.
    And have added the 4 script lines just below the </body> on the page i want them to load.

    I have used the span code to display the times i want as mentioned above.
    But no matter what time im using
    Code:
    <span id="time_output">04:00</span>
    <span id="time_output">10:00</span>
    <span id="time_output">16:00</span>
    <span id="time_output">20:00</span>
    <span id="time_output">24:00</span>
    Al those times will show up as 13:10... If im GMT +2 and those times are entered as London Timezone, The times should show +1 hour for me

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi , Been reading through forums and trying what people are saying but still nothing seems to be helping

    Maybe This will help more, I have compiled a little html of to show you what i am needing the function to do.

    NUMBER 1


    1) Below is Html code for The orginal Script i was asking about, You can see that the input time is "16:45"... If you save this code and display the page you will notice that the time will change from 16:45 GMT/UTC+1 to your(user) timezone. Hence if you are GMT/UTC -4 the time will show as 11:45 AM or If you are GMT/UTC +3 it will show as 6:45PM... So the timezones are correct and working..

    The time format displayed on the website needs to be ''Project Due 19:45'' or ''Project Due 11:45''.. and not show "Project Due 7:45PM" or "Project Due 11:45AM"... (notice how the first ones are in 24 hours clock mode and not 12 hour clock mode.. No PM or AM needed)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type='text/javascript' src='http://www.thetimezoneconverter.com/js/ttzc.js'></script>
    </head>
    <body>
    <font>Project due <script>new TTZC.Widget({  version:'inline',  t:'16:45',tz:'London'}).display();</script></font>
    </body>
    </html>
    Ps. I have tried changing this line in the java script

    Code:
    document.write('<span>' + to.toString(time_format) + '</span>');
    To this code,
    Code:
    document.write('<span>' + to.toString(TIME_FORMAT_24H) + '</span>');
    Which did not work.

    NUMBER 2

    2)Below This is code that from the momnet.js

    When using the same code below with that script. I get the same time format displayed back i.e 16:45 which is what i want.. Great.. But no matter what time i enter in the html code, The time Displayed is not correct for my timezone GMT+2 and I keep getting the same time output no matter what time of the day is the input

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    </head>
    <body>
    Project due <span id="time_output">16:45</span>
    
    <script type='text/javascript' src="http://momentjs.com/downloads/moment.min.js"></script>
    <script type='text/javascript' src="http://momentjs.com/downloads/moment-timezone.min.js"></script>
    <script type='text/javascript' src="timezone-data.js"></script>
    <script>document.getElementById('time_output').innerHTML = moment().tz("Europe/London").format('HH:MM');</script>
    </body>
    </html>
    This below is the Javascript file which i have saved in the root folder with the html code and saved as "timezone-data.js"

    Code:
    moment.tz.add({
    "zones": {
    "Europe/London": [
    "-0:1:15 - LMT 1847_11_1_0 -0:1:15",
    "0 GB-Eire %s 1968_9_27 1",
    "1 - BST 1971_9_31_2",
    "0 GB-Eire %s 1996",
    "0 EU GMT/BST"]
    },
    "rules": {
    "GB-Eire": [
    "1916 1916 4 21 7 2 2 1 BST",
    "1916 1916 9 1 7 2 2 0 GMT",
    "1917 1917 3 8 7 2 2 1 BST",
    "1917 1917 8 17 7 2 2 0 GMT",
    "1918 1918 2 24 7 2 2 1 BST",
    "1918 1918 8 30 7 2 2 0 GMT",
    "1919 1919 2 30 7 2 2 1 BST",
    "1919 1919 8 29 7 2 2 0 GMT",
    "1920 1920 2 28 7 2 2 1 BST",
    "1920 1920 9 25 7 2 2 0 GMT",
    "1921 1921 3 3 7 2 2 1 BST",
    "1921 1921 9 3 7 2 2 0 GMT",
    "1922 1922 2 26 7 2 2 1 BST",
    "1922 1922 9 8 7 2 2 0 GMT",
    "1923 1923 3 16 0 2 2 1 BST",
    "1923 1924 8 16 0 2 2 0 GMT",
    "1924 1924 3 9 0 2 2 1 BST",
    "1925 1926 3 16 0 2 2 1 BST",
    "1925 1938 9 2 0 2 2 0 GMT",
    "1927 1927 3 9 0 2 2 1 BST",
    "1928 1929 3 16 0 2 2 1 BST",
    "1930 1930 3 9 0 2 2 1 BST",
    "1931 1932 3 16 0 2 2 1 BST",
    "1933 1933 3 9 0 2 2 1 BST",
    "1934 1934 3 16 0 2 2 1 BST",
    "1935 1935 3 9 0 2 2 1 BST",
    "1936 1937 3 16 0 2 2 1 BST",
    "1938 1938 3 9 0 2 2 1 BST",
    "1939 1939 3 16 0 2 2 1 BST",
    "1939 1939 10 16 0 2 2 0 GMT",
    "1940 1940 1 23 0 2 2 1 BST",
    "1941 1941 4 2 0 1 2 2 BDST",
    "1941 1943 7 9 0 1 2 1 BST",
    "1942 1944 3 2 0 1 2 2 BDST",
    "1944 1944 8 16 0 1 2 1 BST",
    "1945 1945 3 2 1 1 2 2 BDST",
    "1945 1945 6 9 0 1 2 1 BST",
    "1945 1946 9 2 0 2 2 0 GMT",
    "1946 1946 3 9 0 2 2 1 BST",
    "1947 1947 2 16 7 2 2 1 BST",
    "1947 1947 3 13 7 1 2 2 BDST",
    "1947 1947 7 10 7 1 2 1 BST",
    "1947 1947 10 2 7 2 2 0 GMT",
    "1948 1948 2 14 7 2 2 1 BST",
    "1948 1948 9 31 7 2 2 0 GMT",
    "1949 1949 3 3 7 2 2 1 BST",
    "1949 1949 9 30 7 2 2 0 GMT",
    "1950 1952 3 14 0 2 2 1 BST",
    "1950 1952 9 21 0 2 2 0 GMT",
    "1953 1953 3 16 0 2 2 1 BST",
    "1953 1960 9 2 0 2 2 0 GMT",
    "1954 1954 3 9 0 2 2 1 BST",
    "1955 1956 3 16 0 2 2 1 BST",
    "1957 1957 3 9 0 2 2 1 BST",
    "1958 1959 3 16 0 2 2 1 BST",
    "1960 1960 3 9 0 2 2 1 BST",
    "1961 1963 2 0 8 2 2 1 BST",
    "1961 1968 9 23 0 2 2 0 GMT",
    "1964 1967 2 19 0 2 2 1 BST",
    "1968 1968 1 18 7 2 2 1 BST",
    "1972 1980 2 16 0 2 2 1 BST",
    "1972 1980 9 23 0 2 2 0 GMT",
    "1981 1995 2 0 8 1 1 1 BST",
    "1981 1989 9 23 0 1 1 0 GMT",
    "1990 1995 9 22 0 1 1 0 GMT"],
    "EU": [
    "1977 1980 3 1 0 1 1 1 S",
    "1977 1977 8 0 8 1 1 0",
    "1978 1978 9 1 7 1 1 0",
    "1979 1995 8 0 8 1 1 0",
    "1981 9999 2 0 8 1 1 1 S",
    "1996 9999 9 0 8 1 1 0"]
    },
    "links": {}
    });
    Im not to sure if the 2nd one requires any other scripts installed on the server or anything, Or if The timezone-data.js needs more informatin like zones etc. Where the 1st one just seems to work with the timezone converting.

    Unfortunately this is the best and easiest i can seem to lay it out and with not much experience with scripting, If anyone is able to help it would be greatly appreciated..

    Thank you

    Kind Regards

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Hi,

    sorry, I misunderstood you initially, but now I understand that you want to display a fixed time, but in the users' time zone (and in 24 hour format) and that the time you specify is specified with London's timezone (UTC+0) – correct? What about daylight savings time?

    For example, a simple solution using nothing but moment.js would be this: http://jsfiddle.net/wJGvb/

    However, the output differs from the script you are using right now (for me, at least), by one hour because of daylight savings time.

    I'm not too knowledgable when it come to time zones and all the little details and quirks, and then adding all the browser quirks on top of it. So maybe someone else can join in.

  • Users who have thanked Airblader for this post:

    Gilera (10-12-2013)

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Airblader, No worries, I dont explains things very well, lol but glad someone is finally understanding what i mean. Yes that is correct and whta im trying to do.

    Yes i would need to add daylight savings, but will have to have a look, i think you may be on to something there though, As london is now UTC+1.. It will will only become UTC 0 Later this month i think. then it would be 2 hours at the moment they only 1 hour behind me.

    Ill give this code a shot and see what it does..

    Thanks again

  • #8
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    [QUOTE=Airblader;1362857]

    Absolute Legend M8, Got it working saving the javascript file as timezone.js and adding these 2 lines

    Code:
    <script type='text/javascript' src='http://momentjs.com/downloads/moment.min.js'></script>
    <script type='text/javascript' src='timezone.js'></script>
    Ive read a bit on this and seems it includes Daylight savings as it takes it from the users OS Time which ads it automatically.

    It uses the input time in GMT though which im fine with. subtracting a hour or two is simplier enough while coding.

    Airblader please pm me so i can get your paypal info orsomething and can send some cash your way to pick yourself up some beers..

    Cannot thank you Enough


  • #9
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Damn Spoke To soon. lol.. Only works for the 1st time http://jsfiddle.net/wJGvb/1/
    Any ideas?

  • #10
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    The id attribute has to be unique, you cannot reuse it. I modified it so that it uses classes and automatically converts any time on the page that is marked with that class. Since the script you used before uses jQuery, I assume you already have jQuery loaded, because the new version requires it: --removed--

    Edit: Actually I just noticed that the script you used automatically loads jQuery itself (and a very outdated version of that). It's sort of overkill to load the entire library just for this purpose, so here is another updated version without jQuery: http://jsfiddle.net/wJGvb/3/

    While it's very nice of you to wanting to pay me, it's really not necessary. I'm in forums like these to help, in order to make money I go into work everyday.
    Last edited by Airblader; 10-12-2013 at 08:55 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •