Click here to Skip to main content
13,250,182 members (58,107 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.3K views
2 bookmarked
Posted 4 Jul 2016

Time Zone Calculator

, 4 Jul 2016
Rate this:
Please Sign up or sign in to vote.
In this post we will try to create a time zone calculator. We will be calculating the timezone in two ways.

In this post, we will try to create a time zone calculator. We will be calculating the timezone in two ways:

  • Using normal jQuery functions
  • Using Google API

We will be using Visual Studio as our IDE. For jQuery implementation, we will be creating some prototypes. Hope you will like this.

Background

In one of my projects, we were saving some date values in UTC format in the server. And when we return the data, we were not doing any calculation like converting the same date values to users' location time, if it is India (UTC – IST), therefore I was asked to get the time zone values from client side and pass the same value to the server in each request. I had done this, and here I will show you how. As I explained above, we can do this in two ways:

  • Using normal jQuery functions
  • Using Google API

We will be explaining these two methods one by one.

Using the Code

First of all, create a new project in Visual Studio and install jQuery and bootstrap from NuGet package manager. Once your project is ready, we will start implementing our first method.

Using jQuery Functions

The first thing you need to do here is add the needed elements to UI.

<div class="col-sm-6">
             <h3>Using jQuery prototype function</h3>
             <p>Here we are going to use prototype functions we created</p>
             <div class="form-group">
                 <label class="label label-primary">Please select date:</label>
                 <br />
                 <br />
                 <input class="form-control" type="text" id="txtTimeZone" />
                 <br />
                 <br />
                 <input type="button" value="Submit" id="btnSubmit"
                  class="btn btn-primary btn-block"/>
                 <br />
                 <div class="panel panel-default">
                     <div id="placeholder" class="panel-body"></div>
                 </div>
             </div>
         </div>

Please add the needed references to your page.

 <link href="Content/themes/base/all.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Index.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.2.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.11.4.min.js"></script>

Now, we are going to create some date prototypes to a js file TimeZone.js so that we can use it with any date objects.

Date.prototype.dst = function () {
    return this.getTimezoneOffset() < this.stdTimezoneOffset();
}

The above code is for finding whether the daylight time is ON or OFF, if it returns true means, the daylight time is OFF.

Date.prototype.stdTimezoneOffset = function () {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return (Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()) * -1);
}

The above prototype can be called when the daylight time is OFF.

Date.prototype.stdTimezoneOnset = function () {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return (Math.min(jan.getTimezoneOffset(), jul.getTimezoneOffset()) * -1);
}

The above prototype can be called when the daylight time is ON.

Now that we have created all the prototypes needed, shall we go and use these now?

 $(document).ready(function () {
    $("#txtTimeZone").datepicker();
    $('#btnSubmit').click(function () {
        var dayLight = new Date(); 
        dayLight = new Date($('#txtTimeZone').val());
        if (dayLight.dst()) {
            timeZoneValue = dayLight.stdTimezoneOffset();// Day light time is OFF
        } else {
            timeZoneValue = dayLight.stdTimezoneOnset();// Day light time is ON
        }
        $("#placeholder").text('The time zone value for ' + dayLight + ' is ' + timeZoneValue);
    });
});

Please run your page now to check the output.

Time zone calculation using jQuery

Time zone calculation using jQuery

Time zone calculation using jQuery output

Time zone calculation using jQuery output

Now we will implement the second method, is that fine?

Using Google API

Before we start, please get your own map API key from Google. You can follow this link to get a one.

I hope you got your own key now, if yes, you are ready to go. Please add some controls as below to your page.

<div class="col-sm-6">
                <h3>Using Google API</h3>
                <p>Here we are going to use Google API</p>
                <div class="form-group">
                    <input id="pac-input" class="controls" 

                    type="text" placeholder="Search Box">
                    <div id="map"></div>
                    <script async defer 

                     src="https://maps.googleapis.com/maps/api/js?key=yourkey&libraries=places
                          &callback=initAutocomplete" type="text/javascript"></script>
                    <div class="panel panel-default">
                        <div id="latlon" class="panel-body"></div>
                    </div>
                </div>
            </div>

Here initAutocomplete is the callback function which we are going to write now.

   function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
    });
    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();
        debugger;
        if (places.length == 0) {
            return;
        }

        // Clear out the old markers.
        markers.forEach(function (marker) {
            marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
            var icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
            }));
            $('#latlon').text(place.geometry.location.lat() + ',' + 
              place.geometry.location.lng() + ', 
              The time zone value is ' + place.utc_offset);
            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
}

And following is the custom code we have written for showing the timezone values to our text box.

 $('#latlon').text(place.geometry.location.lat() + ',' + 
place.geometry.location.lng() + ', The time zone value is ' + place.utc_offset);

Now it is time to add our styles.

#map {
    width: 100%;
    height: 200px;
    background-color: #CCC;
}

.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

    #pac-input:focus {
        border-color: #4d90fe;
    }

.pac-container {
    font-family: Roboto;
}

#type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

    #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }

#target {
    width: 345px;
}

Please note that if you don’t set height for the map container div, the map may not get loaded.

So I have given the CSS for my map container as follows:

#map {
    width: 100%;
    height: 200px;
    background-color: #CCC;
}

Now please run your page, you can see a map in your page. Please search for any location, it will give you the timezone value for the given location. Shall we check?

Time zone calculation using Google API

Time zone calculation using Google API

Please make sure that the value you get from both ways is the same.

Time zone calculation

Time zone calculation

That’s all, happy coding!

Conclusion

Did I miss anything that you may think is needed? Could you find this post as useful? I hope you liked this article. Please share your valuable suggestions and feedback.

Your Turn. What Do You Think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sibeesh Passion
Software Developer Cognizant Technology Solutions
India India
Microsoft MVP (2016, 2017), C# Corner MVP (2014, 2015, 2016), DZone MVB

See more here

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 4 Jul 2016
Article Copyright 2016 by Sibeesh Passion
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid