Date and Time in Hindi With Auto Refresh






4.16/5 (9 votes)
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
<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.