locked
how to get time and time zone in menu RRS feed

  • Question

  • how to get all time and time zone..any win

    how to get 24 hrs time and all time zone

    Tuesday, June 12, 2012 12:51 PM

Answers

  • Hi

    You can use this way to add the select controls:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465485.aspx

    And I write a demo for you use javascript way to add select controls,

    1 create a Blank javascript app.

    2 create a js file name:calcTime.js and paste the code below to this file:

    /// <reference group="Dedicated Worker" />
    
    (function (event) {
        "use strict"
    
        var TimeZoneList = new WinJS.Binding.List();
    
    
        //and so on
        TimeZoneList.push({
            Name: "GMT+0",
            Value: "+0"
        });
        TimeZoneList.push({
            Name: "GMT+1",
            Value: "+1"
        });
        TimeZoneList.push({
            Name: "GMT+2",
            Value: "+2"
        });
        TimeZoneList.push({
            Name: "GMT+3",
            Value: "+3"
        });
        TimeZoneList.push({
            Name: "GMT+4",
            Value: "+4"
        });
       
    
        
        WinJS.Namespace.define("TimeZone", {
    
            calcTime:function(offset) {
    
                    // create Date object for current location
                    var d = new Date();
    
                // convert to msec
                // add local time zone offset 
                // get UTC time in msec
                var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    
                // create new Date object for different city
                // using supplied offset
                var nd = new Date(utc + (3600000 * offset));
    
                // return time as a string
                return nd.toLocaleString();
    
            },
    
            getTimeZoneList:function(){
                return TimeZoneList;
            },
    
            getValueByName:function(Name){
                for (var i = 0; i < TimeZoneList.length; i++) {
                    var _name = TimeZoneList.getAt(i).Name;
    
                    if (_name == Name)
                    {
                        return TimeZoneList.getAt(i).Value;
                    }
                }
        }
        })
    
    
    })();
    

    3.past this code to default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>JSblankAPP</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
      
    
        <!-- JSblankAPP references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/calcTime.js"></script>
    </head>
    <body>
        <h1>Local Time: <label id="localTime"></label></h1>
        <div>
            <label for="timeZone">Please Select Time Zone</label>
            <select id="timeZone" size="3"></select>
            <br />
            <label id="selectTimeZoneTime"></label>
        </div>
    
        <div>
            
    
        </div>
    
        
    </body>
    </html>
    

    4. paste this code to default.js file:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        
    
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                   
                    var selectedIndex = -1;
                    var selectedItem = TimeZone.getTimeZoneList().getAt(selectedIndex);
    
                    var selectElement = WinJS.Utilities.query('select#timeZone')[0];
                    WinJS.Utilities.empty(selectElement);
                    var list = TimeZone.getTimeZoneList();
                    list.forEach(function (item) {
                        var newOption = document.createElement("option");
                        newOption.text = item.Name;
                        if (selectElement.store == item.Name) {
                            newOption.selected = true;
                        }
                        selectElement.add(newOption);
                    });
    
                    WinJS.Utilities.query('#timeZone')
                        .listen("change", function () {
                            var offsetName = document.getElementById("timeZone").value;
                            var offsetValue = TimeZone.getValueByName(offsetName);
                            var timeString = TimeZone.calcTime(offsetValue);
                            document.getElementById("selectTimeZoneTime").innerText = offsetName+": \n"+ timeString;
                        });
    
                } else {
                    
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
            
        };
    
       
    
    
        app.start();
    })();
    

    5 Run the application

    6 You will get this:


    Hope it helpful.

    Wednesday, June 13, 2012 10:33 AM

All replies

  • Hi

    I saw your thread here:

    http://social.msdn.microsoft.com/Forums/en/winappswithhtml5/thread/d3838e3f-6a63-45fa-bb0a-645818649ffb

    And I think you want to ask:is there any method in metro style for you to get a time zone list which contain all standard name of time zones?

    As far as I know there doesn't seem to have such a method provide for metro style.

    But I think it's easy to achieve by javascript.

    Something like this:

                       

    (function () {
        "use strict";

        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();

    function calcTime(city, offset) {

            // create Date object for current location
            var d = new Date();

            // convert to msec
            // add local time zone offset 
            // get UTC time in msec
           var utc = d.getTime() + (d.getTimezoneOffset() * 60000);

            // create new Date object for different city
            // using supplied offset
           var nd = new Date(utc + (3600000 * offset));

            // return time as a string
            return "The local time in " + city + " is " + nd.toLocaleString();

        }


        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
    document.write(calcTime('London', '+1'));
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };

        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };

        app.start();
    })();

    You can write a select html control and add the selection by yourself.

    Hope it helpful.

    Wednesday, June 13, 2012 5:16 AM
  • ya.. thank you. But I need all type of time zone in single drop down how its passible...can u help me
    Wednesday, June 13, 2012 6:46 AM
  • Hi

    You can use this way to add the select controls:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465485.aspx

    And I write a demo for you use javascript way to add select controls,

    1 create a Blank javascript app.

    2 create a js file name:calcTime.js and paste the code below to this file:

    /// <reference group="Dedicated Worker" />
    
    (function (event) {
        "use strict"
    
        var TimeZoneList = new WinJS.Binding.List();
    
    
        //and so on
        TimeZoneList.push({
            Name: "GMT+0",
            Value: "+0"
        });
        TimeZoneList.push({
            Name: "GMT+1",
            Value: "+1"
        });
        TimeZoneList.push({
            Name: "GMT+2",
            Value: "+2"
        });
        TimeZoneList.push({
            Name: "GMT+3",
            Value: "+3"
        });
        TimeZoneList.push({
            Name: "GMT+4",
            Value: "+4"
        });
       
    
        
        WinJS.Namespace.define("TimeZone", {
    
            calcTime:function(offset) {
    
                    // create Date object for current location
                    var d = new Date();
    
                // convert to msec
                // add local time zone offset 
                // get UTC time in msec
                var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    
                // create new Date object for different city
                // using supplied offset
                var nd = new Date(utc + (3600000 * offset));
    
                // return time as a string
                return nd.toLocaleString();
    
            },
    
            getTimeZoneList:function(){
                return TimeZoneList;
            },
    
            getValueByName:function(Name){
                for (var i = 0; i < TimeZoneList.length; i++) {
                    var _name = TimeZoneList.getAt(i).Name;
    
                    if (_name == Name)
                    {
                        return TimeZoneList.getAt(i).Value;
                    }
                }
        }
        })
    
    
    })();
    

    3.past this code to default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>JSblankAPP</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
      
    
        <!-- JSblankAPP references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/calcTime.js"></script>
    </head>
    <body>
        <h1>Local Time: <label id="localTime"></label></h1>
        <div>
            <label for="timeZone">Please Select Time Zone</label>
            <select id="timeZone" size="3"></select>
            <br />
            <label id="selectTimeZoneTime"></label>
        </div>
    
        <div>
            
    
        </div>
    
        
    </body>
    </html>
    

    4. paste this code to default.js file:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    
    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        
    
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                   
                    var selectedIndex = -1;
                    var selectedItem = TimeZone.getTimeZoneList().getAt(selectedIndex);
    
                    var selectElement = WinJS.Utilities.query('select#timeZone')[0];
                    WinJS.Utilities.empty(selectElement);
                    var list = TimeZone.getTimeZoneList();
                    list.forEach(function (item) {
                        var newOption = document.createElement("option");
                        newOption.text = item.Name;
                        if (selectElement.store == item.Name) {
                            newOption.selected = true;
                        }
                        selectElement.add(newOption);
                    });
    
                    WinJS.Utilities.query('#timeZone')
                        .listen("change", function () {
                            var offsetName = document.getElementById("timeZone").value;
                            var offsetValue = TimeZone.getValueByName(offsetName);
                            var timeString = TimeZone.calcTime(offsetValue);
                            document.getElementById("selectTimeZoneTime").innerText = offsetName+": \n"+ timeString;
                        });
    
                } else {
                    
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
            
        };
    
       
    
    
        app.start();
    })();
    

    5 Run the application

    6 You will get this:


    Hope it helpful.

    Wednesday, June 13, 2012 10:33 AM