I created this script it was showing the correct time in Danville Va, till yesterday, but the DST ended yesterday for Danville Va,
DST started on Sunday 12 March 2017, 02:00 local standard time (EST)
DST ends on Sunday 05 November 2017, 02:00 local daylight time (EDT)
I can change the script to renderTime(-4)
to renderTime(-5)
It will work, But how can detect so that it automatically show the correct time when DST starts or ends, I don't wanna use any external library
function renderTime(offset) {
var d = new Date();
localTime = d.getTime();
localOffset = d.getTimezoneOffset() * 60000;
// obtain UTC time in msec
utc = localTime + localOffset;
// create new Date object for different city
// using supplied offset
var currentTime = new Date(utc + (3600000*offset));
var diem = "AM";
var y = currentTime.getFullYear().toString().substr(-2);
var mo = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12
} else if (h > 12) {
h = h - 12;
diem = "PM";
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
$('#date').text(mo + "/" + day + "/" + y);
$('#time').text( h + ":" + m + ":" + s + " " + diem);
}
$(document).ready(function(){
renderTime(-4);
setInterval('renderTime(-4)', 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="info list-unstyled d-flex flex-column align-items-center" style="position: fixed; bottom: 1em; right: 4em;">
<li>[DANVILLE,VA]</li>
<!-- Date format is Month/Day/Year -->
<li id="date"></li>
<li id="time"></li>
</ul>
UPDATE
It should show the same time (Danville's time) to everyone in the world, It should not be dependent on where the user is. I don't wanna use Moment.js
Thanks