Design view (.cshtml Razor View where the div was taken to show the time value)
@{
DateTime dt = DateTime.Now;
var time = dt.ToString("hh:mm tt");
var tArr = time.Split(' ');
}
<div class="date_time">
@* Displaying the date value *@
<div class="date" id="divDateOnly"><i class="fa fa-calendar" aria-hidden="true"></i>@dt.ToString("MMM - dd - yyyy")</div>
@* Displaying the time value and this needs to be refreshed every second. *@
<div class="time" id="divTimeOnly"><i class="fa fa-clock-o" aria-hidden="true"></i>@tArr[0]<sub>@tArr[1]</sub></div>
</div>
/* function to convert the date to time value in 12-hour format */
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
hours = hours < 10 ? '0'+ hours : hours;
minutes = minutes < 10 ? '0'+ minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
/* set the interval at 1 second at document ready function */
$(document).ready(function(){
setInterval(function() {
var d = new Date();
var monthName = monthNames[d.getMonth()];
var day = d.getDate();
var year = d.getFullYear();
var time = formatAMPM(d);
var tArray = time.split(' ');
console.log(time);
$("#divTimeOnly").html('<i class="fa fa-clock-o" aria-hidden="true"></i>' + tArray[0] + '<sub>' + tArray[1] + '</sub>');
},1000);
});
@{
DateTime dt = DateTime.Now;
var time = dt.ToString("hh:mm tt");
var tArr = time.Split(' ');
}
<div class="date_time">
@* Displaying the date value *@
<div class="date" id="divDateOnly"><i class="fa fa-calendar" aria-hidden="true"></i>@dt.ToString("MMM - dd - yyyy")</div>
@* Displaying the time value and this needs to be refreshed every second. *@
<div class="time" id="divTimeOnly"><i class="fa fa-clock-o" aria-hidden="true"></i>@tArr[0]<sub>@tArr[1]</sub></div>
</div>
/* function to convert the date to time value in 12-hour format */
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
hours = hours < 10 ? '0'+ hours : hours;
minutes = minutes < 10 ? '0'+ minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
/* set the interval at 1 second at document ready function */
$(document).ready(function(){
setInterval(function() {
var d = new Date();
var monthName = monthNames[d.getMonth()];
var day = d.getDate();
var year = d.getFullYear();
var time = formatAMPM(d);
var tArray = time.split(' ');
console.log(time);
$("#divTimeOnly").html('<i class="fa fa-clock-o" aria-hidden="true"></i>' + tArray[0] + '<sub>' + tArray[1] + '</sub>');
},1000);
});
No comments:
Post a Comment