Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Date and Time in Hindi With Auto Refresh

4.16/5 (9 votes)
10 Dec 2015CPOL 8.8K  
Auto update time without page refresh

Introduction

Here, I am writing a short tip for auto update Date in Hindi with ASP.NET and JavaScript.

In this tip, we will see the detailed mechanism adopted to load dynamic HTML data in web Page with Asynchronous mode, thanks to Ajax.

Background

This tip may be useful for intermediate developers who have some basics in HTML, JQuery, JavaScript

Using the Code

Tools used in each scenario are:

  • Visual Studio 2015
  • jQuery JavaScript Library
  • Bootstrap

JavaScript Code

JavaScript
<script type="text/javascript">
function updateClock() {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();
    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
    currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = (currentHours < 12) ? "पूर्वाह्न" : "अपराह्न";
    // Convert the hours component to 12-hour format if needed
    currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
    // Convert an hours component of "0" to "12"
    currentHours = (currentHours == 0) ? 12 : currentHours;
    //gate date
    var monthNames = ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई", 
    "अगस्त", "सितम्बर", "अक्तूबर",    "नबम्बर", "दिसंबर"];

    var date = new Date();
    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();
    var d = day + ', ' + monthNames[monthIndex] + ' ' + year
    // Compose the string for display
    var currentTimeString = d + " II " + currentHours + ":" + currentMinutes + ":" 
    + currentSeconds + timeOfDay + " (भारतीय मानक समय)";
    $('.time-info span').html(currentTimeString);
    }
</script>

HTML Code

HTML
<form id="main_form" enctype="multipart/form-data"  runat="server">
<div class="time-info"><span> </span></div>
</form>

CSS Code

CSS
.time-info {
                float:left;
                font-size:12px;
                padding:5px;
                }

.time-info span{
                color:#fff;
                }

The result will be:

Summary

I hope that you appreciated my effort. Thank you for viewing my  post, try the source code and do not hesitate to leave your questions and comments.

License

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