Date and Time in Hindi With Auto 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

<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

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

CSS Code

.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.