If I have a tag:
<span class="utctime">2010-01-01 11:30 PM</span>
I would like a jquery script or plug in to convert every utctime
class to the current user's browser local time. I would prefer to find this before writing one.
Given an UTC date and the task is to convert UTC date time into local date-time using JavaScript toLocaleString() function. Syntax: var theDate = new Date(Date.parse('06/14/2020 4:41:48 PM UTC')) theDate.toLocaleString() JavaScript code:
//Covert datetime by GMT offset //If toUTC is true then return UTC time other wise return local time function convertLocalDateToUTCDate (date, toUTC) { date = new Date (date); //Local time converted to UTC console. log ("Time:" + date); var localOffset = date. getTimezoneOffset () * 60000; var localTime = date.
For consistency, you should mostly use local time when you have to render a date and time to the user, but you should store the actual values in UTC. For example, if you store a local time of midnight (00:00) in your database, you wouldn't know if that's midnight in Tokyo (Japan), in Paris (France), in New York (US), etc.
For those who are forced to work with other timezones than UTC .. you can alter the function by adding the time difference like this: Snippet altered to work with CEST timezone (Time zone offset: UTC + 2 hours): and so on. Show activity on this post.
Ok, so I created one that does it:
/*
Note: this requires that the JQuery-DateFormat plugin (available here) be loaded first
http://plugins.jquery.com/project/jquery-dateFormat
*/
(function ($) {
$.fn.localTimeFromUTC = function (format) {
return this.each(function () {
// get time offset from browser
var currentDate = new Date();
var offset = -(currentDate.getTimezoneOffset() / 60);
// get provided date
var tagText = $(this).html();
var givenDate = new Date(tagText);
// apply offset
var hours = givenDate.getHours();
hours += offset;
givenDate.setHours(hours);
// format the date
var localDateString = $.format.date(givenDate, format);
$(this).html(localDateString);
});
};
})(jQuery);
Usage:
<span class="utcdate">2/5/2010 10:30 PM</span>
$('.utcdate').localTimeFromUTC('MM/dd/yyyy hh:mm a');
Use input date to find time zone offset. Important for DST changes.
(function ($) {
$.fn.localTimeFromUTC = function (format) {
return this.each(function () {
// get provided date
var tagText = $(this).html();
var givenDate = new Date(tagText);
if(givenDate == 'NaN') return;
// get time offset from browser
var offset = -(givenDate.getTimezoneOffset() / 60);
// apply offset
var hours = givenDate.getHours();
hours += offset;
givenDate.setHours(hours);
// format the date
var localDateString = $.format.date(givenDate, format);
$(this).html(localDateString);
});
};
})(jQuery);
Use it like....
function ConvertDatesToLocalTime() {
$('.ConvertUtcToLocal').localTimeFromUTC('MM/dd/yyyy hh:mm:ss a');
}
$(document).ready(function () {
ConvertDatesToLocalTime();
});
Assign 'ConvertUtcToLocal' class to all elements requiring conversion.
$(".localdatetime").each(function () {
var datestr = $(this).text();
//alert(datestr);
if (datestr.trim() != '') {
var dateOb = (new Date(Date.parse(datestr, 'MM-dd-yyyy HH:mm'))).setTimezone("GMT").toString('dd MMM yyyy hh:mm tt');
//alert(dateOb);
$(this).text(dateOb);
}
})
this can also be used along with Date.js library to display time in user timezone
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With