Convert UTC date time to local date time

Question

From the server I get a datetime variable in this format  6 29 2011 4 52 48 PM and it is in UTC time  I want to convert it to the current user   s browser time zone using JavaScript  How this can be done using JavaScript or jQuery

User · Answer

I Answering This If Any one want function that display converted time to specific id element and apply date format string yyyy-mm-dd here date1 is string and ids is id of element that time going to display.

function convertUTCDateToLocalDate(date1, ids) 
{
  var newDate = new Date();
  var ary = date1.split(" ");
  var ary2 = ary[0].split("-");
  var ary1 = ary[1].split(":");
  var month_short = Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
  newDate.setUTCHours(parseInt(ary1[0]));
  newDate.setUTCMinutes(ary1[1]);
  newDate.setUTCSeconds(ary1[2]);
  newDate.setUTCFullYear(ary2[0]);
  newDate.setUTCMonth(ary2[1]);
  newDate.setUTCDate(ary2[2]);
  ids = document.getElementById(ids);
  ids.innerHTML = " " + newDate.getDate() + "-" + month_short[newDate.getMonth() - 1] + "-" + newDate.getFullYear() + " " + newDate.getHours() + ":" + newDate.getMinutes() + ":" + newDate.getSeconds();
            }

i know that answer has been already accepted but i get here cause of google and i did solve with getting inspiration from accepted answer so i did want to just share it if someone need.

User · Answer

Based on  digitalbath answer  here is a small function to grab the UTC timestamp and display the local time in a given DOM element  using jQuery for this last part    https   jsfiddle net moriz 6ktb4sv8 1    lt div id  eventTimestamp  class  timeStamp  gt      lt  div gt      lt script type  text javascript  gt        Convert UTC timestamp to local time and display in specified DOM element    function convertAndDisplayUTCtime date hour minutes elementID        var eventDate   new Date    date     hour     minutes   00 UTC        eventDate toString              elementID  html eventDate           convertAndDisplayUTCtime  06 03 2015  16 32  eventTimestamp        lt  script gt

User · Answer

This is a simplified solution based on Adorjan Princ  s answer   function convertUTCDateToLocalDate date        var newDate   new Date date       newDate setMinutes date getMinutes   - date getTimezoneOffset         return newDate      Usage   var date   convertUTCDateToLocalDate new Date date string you received

User · Answer

Using YYYY-MM-DD hh mm ss format    var date   new Date  2011-06-29T16 52 48 00 00    date toString       Wed Jun 29 2011 09 52 48 GMT-0700  PDT     For converting from the YYYY-MM-DD hh mm ss format  make sure your date follow the ISO 8601 format   Year       YYYY  eg 1997      Year and month       YYYY-MM  eg 1997-07  Complete date       YYYY-MM-DD  eg 1997-07-16  Complete date plus hours and minutes      YYYY-MM-DDThh mmTZD  eg 1997-07-16T19 20 01 00      Complete date plus   hours  minutes and seconds      YYYY-MM-DDThh mm ssTZD  eg 1997-07-16T19 20 30 01 00      Complete date plus hours  minutes  seconds and a decimal fraction of a second     YYYY-MM-DDThh mm ss sTZD  eg 1997-07-16T19 20 30 45 01 00  where   YYYY   four-digit year MM     two-digit month  01 January  etc   DD     two-digit day of month  01 through 31  hh     two digits of hour  00 through 23   am pm NOT allowed  mm     two digits of minute  00 through 59  ss     two digits of second  00 through 59  s      one or more digits representing a decimal fraction of a second TZD    time zone designator  Z or  hh mm or -hh mm    Important things to note   You must separate the date and the time by a T  a space will not work in some browsers You must set the timezone using this format  hh mm  using a string for a timezone  ex     UTC   will not work in many browsers   hh mm represent the offset from the UTC timezone

User · Answer

In case you don t mind usingmoment js and your time is in UTC just use the following   moment utc  6 29 2011 4 52 48 PM   toDate      if your time is not in utc but any other locale known to you  then use following   moment  6 29 2011 4 52 48 PM    MM-DD-YYYY    fr   toDate      if your time is already in local  then use following   moment  6 29 2011 4 52 48 PM    MM-DD-YYYY

User · Answer

In my point of view servers should always in the general case return a datetime in the standardized ISO 8601-format   More info here    http   www w3 org TR NOTE-datetime https   en wikipedia org wiki ISO 8601   IN this case the server would return  2011-06-29T16 52 48 000Z  which would feed directly into the JS Date object   var utcDate    2011-06-29T16 52 48 000Z       ISO-8601 formatted date returned from server var localDate   new Date utcDate     The localDate will be in the right local time which in my case would be two hours later  DK time    You really don t have to do all this parsing which just complicates stuff  as long as you are consistent with what format to expect from the server

User · Answer

this worked well for me with safari chrome firefox   const localDate   new Date    utcDate replace  - g        UTC

User · Answer

A JSON date string  serialized in C   looks like  2015-10-13T18 58 17     In angular   following Hulvej  make a localdate filter   myFilters filter  localdate   function          return function input            var date   new Date input     000Z            return date              Then  display local time like     order createDate   localdate   date    MMM d  y h mm a

User · Answer

I believe this is the best solution    let date   new Date objDate     date setMinutes date getTimezoneOffset      This will update your date by the offset appropriately since it is presented in minutes

User · Answer

In Angular I used Ben s answer this way     scope convert   function  thedate        var tempstr   thedate toString        var newstr   tempstr toString   replace  GMT   g           newstr   newstr     UTC       return new Date newstr        Edit  Angular 1 3 0 added UTC support to date filter  I haven t use it yet but it should be easier  here is the format      date expression   date   format   timezone     Angular 1 4 3 Date API

User · Answer

You should get the  UTC  offset  in minutes  of the client   var offset   new Date   getTimezoneOffset      And then do the correspondent adding or substraction to the time you get from the server     Hope this helps

User · Answer

Adorojan s answer is almost correct  But addition of offset is not correct since offset value will be negative if browser date is ahead of GMT and vice versa  Below is the solution which I came with and is working perfectly fine for me    x000D   x000D     Input time in UTC x000D  var inputInUtc    6 29 2011 4 52 48   x000D   x000D  var dateInUtc   new Date Date parse inputInUtc   UTC     x000D    Print date in UTC time x000D  document write  Date in UTC       dateInUtc toISOString     lt br gt     x000D   x000D  var dateInLocalTz   convertUtcToLocalTz dateInUtc   x000D    Print date in local time x000D  document write  Date in Local       dateInLocalTz toISOString     x000D   x000D  function convertUtcToLocalTz dateInUtc    x000D      Convert to local timezone x000D    return new Date dateInUtc getTime   - dateInUtc getTimezoneOffset   60 1000   x000D    x000D   x000D   x000D

User · Answer

This works for me   function convertUTCDateToLocalDate date        var newDate   new Date date getTime   - date getTimezoneOffset   60 1000       return newDate

User · Answer

I wrote a nice little script that takes a UTC epoch and converts it the client system timezone and returns it in d m Y H i s  like the PHP date function  format   getTimezoneDate   function   e          function p s    return  s  lt  10     0    s   s                 var t   new Date 0       t setUTCSeconds e        var d   p t getDate              m   p t getMonth   1            Y   p t getFullYear             H   p t getHours              i   p t getMinutes              s   p t getSeconds          d     d  m  Y  join               H  i  s  join            return d

User · Answer

After trying a few others posted here without good results  this seemed to work for me   convertUTCDateToLocalDate  function  date        return new Date Date UTC date getFullYear    date getMonth    date getDate     date getHours    date getMinutes    date getSeconds          And this works to go the opposite way  from Local Date to UTC   convertLocalDatetoUTCDate  function date       return new Date date getUTCFullYear    date getUTCMonth    date getUTCDate     date getUTCHours    date getUTCMinutes    date getUTCSeconds

User · Answer

In my case  I had to find the difference of dates in seconds  The date was a UTC date string  so I converted it to a local date object  This is what I did   let utc1   new Date    let utc2   null  const dateForCompare   new Date valueFromServer   dateForCompare setTime dateForCompare getTime   - dateForCompare getTimezoneOffset       60000   utc2   dateForCompare   const seconds   Math floor utc1 - utc2    1000

User · Answer

This is what I m doing to convert UTC to my Local Time   x000D   x000D  const dataDate    2020-09-15 07 08 08  const utcDate   new Date dataDate   const myLocalDate   new Date Date UTC     utcDate getFullYear       utcDate getMonth       utcDate getDate       utcDate getHours       utcDate getMinutes        document getElementById  dataDate   innerHTML   dataDate   document getElementById  myLocalDate   innerHTML   myLocalDate   x000D   lt p gt UTC lt p gt   lt p id  dataDate  gt  lt  p gt    lt p gt Local GMT  7  lt p gt   lt p id  myLocalDate  gt  lt  p gt  x000D   x000D   x000D   Result  Tue Sep 15 2020 14 08 00 GMT 0700  Indochina Time

User · Answer

I ve created one function which converts all the timezones into local time   I did not used getTimezoneOffset    because it does not returns proper offset value  Requirements   1  npm i moment-timezone  function utcToLocal utcdateTime  tz        var zone   moment tz tz  format  Z      Actual zone value e g  5 30     var zoneValue   zone replace    0-9    g         Zone value without   - chars     var operator   zone  amp  amp  zone split      amp  amp  zone split     0       -     -           operator for addition subtraction     var localDateTime     var hours   zoneValue split      0      var minutes   zoneValue split      1      if  operator      -             localDateTime   moment utcdateTime  subtract hours   hours   subtract minutes   minutes   format  YYYY-MM-DD HH mm ss         else if  operator            localDateTime   moment utcdateTime  add hours   hours   add minutes   minutes   format  YYYY-MM-DD HH mm ss         else           localDateTime    Invalid Timezone Operator            return localDateTime    utcToLocal  2019-11-14 07 15 37    Asia Kolkata      Returns  2019-11-14 12 45 37

User · Answer

For the TypeScript users  here is a helper function     Typescript Type  Date Options interface DateOptions     day   numeric     short     long     month   numeric     year   numeric     timeZone   UTC          Helper Function  Convert UTC Date To Local Date export const convertUTCDateToLocalDate    date  Date    gt         Date Options   const dateOptions  DateOptions         day   numeric       month   numeric       year   numeric       timeZone   UTC              Formatted Date  4 20 2020    const formattedDate   new Date date getTime   - date getTimezoneOffset     60   1000  toLocaleString  en-US   dateOptions     return formattedDate

User · Answer

Put this function in your head    lt script type  text javascript  gt  function localize t      var d new Date t   UTC      document write d toString        lt  script gt    Then generate the following for each date in the body of your page    lt script type  text javascript  gt localize  6 29 2011 4 52 48 PM    lt  script gt    To remove the GMT and time zone  change the following line   document write d toString   replace  GMT   g

User · Answer

Matt s answer is missing the fact that the daylight savings time could be different between Date   and the date time it needs to convert - here is my solution       function ConvertUTCTimeToLocalTime UTCDateString                var convertdLocalTime   new Date UTCDateString            var hourOffset   convertdLocalTime getTimezoneOffset     60           convertdLocalTime setHours  convertdLocalTime getHours     hourOffset              return convertdLocalTime          And the results in the debugger   UTCDateString   2014-02-26T00 00 00  convertdLocalTime  Wed Feb 26 2014 00 00 00 GMT-0800  Pacific Standard Time

User · Answer

To me the simplest seemed using  datetime setUTCHours datetime getHours     datetime setUTCMinutes datetime getMinutes        i thought the first line could be enough but there are timezones which are off in fractions of hours

User · Answer

You can get it done using moment js file   Its simple you have just mention the place of the timezone   Example  If you to convert your datetime to Asia Kolkata timezone you have to just mention the name of the timezone place obtained from moment js    x000D   x000D  var UTCDateTime  Your date obtained from UTC   x000D  var ISTleadTime  moment tz UTCDateTime   Africa Abidjan    tz  Asia Kolkata   format  YYYY-MM-DD LT    x000D   x000D   x000D

User · Answer

You can use momentjs  moment date  format   will always give result in local date    Bonus   you can format in any way you want  For eg    moment   format  MMMM Do YYYY  h mm ss a       September 14th 2018  12 51 03 pm moment   format  dddd                          Friday moment   format  MMM Do YY       For more details you can refer Moment js website

User · Answer

Use this for UTC and Local time convert and vice versa     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 getTime        if  toUTC            date   localTime   localOffset        else           date   localTime - localOffset            date   new Date date       console log  Converted time      date       return date

User · Answer

For me  this works well  if  typeof date      number       time   new Date date  toLocaleString        else if  typeof date      string      time   new Date    date  UTC   toLocaleString

User · Answer

tl dr  new Date  6 29 2011 4 52 48 PM UTC    toString   The source string must specify a time zone or UTC  One-liner   new Date  6 29 2011 4 52 48 PM UTC    toString    Result in one of my web browsers   quot Wed Jun 29 2011 09 52 48 GMT-0700  Pacific Daylight Time  quot   This approach even selects standard daylight time appropriately   new Date  1 29 2011 4 52 48 PM UTC    toString    Result in my browser   quot Sat Jan 29 2011 08 52 48 GMT-0800  Pacific Standard Time  quot

User · Answer

Add the time zone at the end  in this case  UTC    theDate   new Date  Date parse  6 29 2011 4 52 48 PM UTC       after that  use toLocale    function families to display the date in the correct locale   theDate toLocaleString         6 29 2011  9 52 48 AM  theDate toLocaleTimeString         9 52 48 AM  theDate toLocaleDateString         6 29 2011

User · Answer

For me above solutions didn t work   With IE the UTC date-time conversion to local is little tricky   For me  the date-time from web API is  2018-02-15T05 37 26 007  and I wanted to convert as per local timezone so I used below code in JavaScript   var createdDateTime   new Date  2018-02-15T05 37 26 007     Z

User · Answer

Append  UTC  to the string before converting it to a date in javascript   var date   new Date  6 29 2011 4 52 48 PM UTC    date toString       Wed Jun 29 2011 09 52 48 GMT-0700  PDT

User · Answer

This is an universal solution   function convertUTCDateToLocalDate date        var newDate   new Date date getTime   date getTimezoneOffset   60 1000        var offset   date getTimezoneOffset     60      var hours   date getHours         newDate setHours hours - offset        return newDate         Usage   var date   convertUTCDateToLocalDate new Date date string you received      Display the date based on the client local setting   date toLocaleString

User · Answer

function getUTC str        var arr   str split   -           var utc   new Date arr 0   arr 1 -1  arr 2   arr 3   arr 4   arr 5        utc setTime utc getTime   - utc getTimezoneOffset   60 1000      return utc      For others who visit - use this function to get a Local date  object from a UTC string  should take care of DST and will work on IE  IPhone etc   We split the string  Since JS Date parsing is not supported on some browsers  We get difference from UTC and subtract it from the UTC time  which gives us local time  Since offset returned is calculated with DST  correct me if I am wrong   so it will set that time back in the variable  utc   Finally return the date object

[javascript] Convert UTC date time to local date time

Examples related to javascript

Examples related to jquery

Examples related to datetime

Examples related to timezone

Examples related to utc