Convert date to another timezone in JavaScript

Question

I am looking for a function to convert date in one timezone to another    It need two parameters     date  in format  2012 04 10 10 10 30  0000    timezone string   Asia Jakarta     The timezone string is described in http   en wikipedia org wiki Zone tab  Is there an easy way to do this

User · Answer

Stolen shamelessly from  http   www techrepublic com article convert-the-local-time-to-another-time-zone-with-this-javascript 6016329         function to calculate local time    in a different city    given the city s UTC offset     function calcTime city  offset            create Date object for current location     var d   new Date               get UTC time in msec     var utc   d getTime               create new Date object for different city        using supplied offset     var nd   new Date utc    3600000 offset               return time as a string     return  quot The local time in  quot    city    quot  is  quot    nd toLocaleString       this function is useful to calculate time zone value by providing name of a city country and offset value

User · Answer

If you just need to convert timezones I have uploaded a stripped-down version of moment-timezone with just the bare minimum functionallity  Its  1KB   data   S loadData        zones              Europe Paris CET CEST -10 -20 01010101010101010101010 1GNB0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 11e6            Australia Sydney AEDT AEST -b0 -a0 01010101010101010101010 1GQg0 1fA0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 40e5               links              Europe Paris Europe Madrid              let d   new Date    console log S tz d   Europe Madrid   toLocaleString     console log S tz d   Australia Sydney   toLocaleString

User · Answer

Provide the desired time zone  for example  quot Asia Tehran quot  to change the current time to that timezone  I used  quot Asia Seoul quot   You can use the following codes  change the style if you need to do so  please keep in mind that if you want to have h m s format instead of HH MM SS  you ll have to remove  quot function kcwcheckT i  quot    x000D   x000D  function kcwcheckT i      if  i  lt  10        i    0    i        return i    function kcwt     var d   new Date   toLocaleString  en-US    timeZone   Asia Seoul     d   new Date d     var h   d getHours      var m   d getMinutes      var s   d getSeconds      h   kcwcheckT h     m   kcwcheckT m     s   kcwcheckT s     document getElementById  kcwcurtime   innerHTML   h         m         s    var days     Sunday   Monday   Tuesday   Wednesday   Thursday   Friday   Saturday    document getElementById  kcwcurday   innerHTML   days d getDay      kcwt    window setInterval kcwt  1000   x000D   import url  https   fonts googleapis com css2 family Nunito amp display swap      kcwsource  color  040505 cursor  pointer display block width  100  border  none border-radius 5px text-align center padding  5px 10px 5px 10px    kcwsource p  font-family   Nunito   sans-serif      CurTbx  color  040505 cursor  pointer display block width  100  border  none border-radius 5px text-align center padding  5px 10px 5px 10px    kcwcstyle  font-family   Nunito   sans-serif  font-size  22px display  inline-block    kcwcurstinf  font-family   Nunito   sans-serif  font-size  18px display  inline-block margin  0    kcwcurday  margin  0    kcwcurst  margin  0 10px 0 5px      Using the css below you can make your style responsive      media  max-width  600px      kcwcstyle  font-size  14px      kcwcurstinf  font-size  12px     x000D   lt div class  kcwsource  gt  lt p gt This Pen was originally developed for  lt a href  http   kocowafa com  target   blank  gt KOCOWAFA com lt  a gt  lt  p gt  lt  div gt   lt div class  CurTbx  gt  lt p class  kcwcurst kcwcstyle  id  kcwcurday  gt  lt  p gt  lt p class  kcwcurst kcwcstyle  id  kcwcurtime  gt  lt  p gt  lt p class  kcwcurstinf  gt  Seoul  Korea  lt  p gt  lt  div gt  x000D   x000D   x000D

User · Answer

Having looked around a lot including links from this page i found this great article  using moment timezone   https   www webniraj com 2016 11 23 javascript-using-moment-js-to-display-dates-times-in-users-timezone   To summarise it   Get the user s timezone  var tz   moment tz guess    console info  Timezone      tz     Returns eg  Timezone  Europe London  Set the default user timezone  moment tz setDefault tz     Set custom timezone  moment tz setDefault  America Los Angeles      Convert date   time to local timezone  assumes original date time is in UTC  moment utc  2016-12-25 07 00   tz tz  format  ddd  Do MMMM YYYY  h mma      Returns  Sun  25th December 2016  7 00am  Convert date time to LA Time  moment utc  2016-12-25 07 00   tz  America Los Angeles   format  ddd  Do MMMM YYYY  h mma      Returns  Sat  24th December 2016  11 00pm  Convert from LA time to London  moment tz  2016-12-25 07 00    America Los Angeles   tz  Europe London   format   ddd  Do MMMM YYYY  h mma       Returns  Sun  25th December 2016  3 00pm

User · Answer

Do it as easy   x000D   x000D  const timeZone   Intl DateTimeFormat   resolvedOptions   timeZone  console log timeZone    var d   new Date    console log d toLocaleString  en-US     timeZone      x000D   x000D   x000D

User · Answer

Most browsers support the toLocaleString function with arguments  older browsers usually ignore the arguments   x000D   x000D  const str   new Date   toLocaleString  en-US     timeZone   Asia Jakarta      console log str   x000D   x000D   x000D

User · Answer

If you don t want to import some big library you could just use Intl DateTimeFormat to convert Date objects to different timezones   x000D   x000D     Specifying timeZone is what causes the conversion  the rest is just formatting const options       year   2-digit   month   2-digit   day   2-digit     hour   2-digit   minute   2-digit   second   2-digit     timeZone   Asia Jakarta     timeZoneName   short    const formatter   new Intl DateTimeFormat  sv-SE   options  const startingDate   new Date  2012 04 10 10 10 30  0000    const dateInNewTimezone   formatter format startingDate   console log dateInNewTimezone     12-04-10 17 10 30 GMT 7 x000D   x000D   x000D   Offsets  daylight saving  and changes in the past will be taken care of for you

User · Answer

quick and dirty manual hour changer and return   return new Date new Date   setHours new Date   getHours   3   getHours

User · Answer

I don t know an easy method to convert a date object to any time zone  but if you want to convert it to the local time zone  you can just convert it with Date prototype getTime   to the corresponding number of milliseconds  and back again    date   new Date  2016-05-24T13 07 20    date   new Date date getTime       For example  date getHours   will now return 15 instead of 13 if you are  like me  in Austria  and it s summer     I ve read that the various datetime functions may exhibit non-standard behaviour in some browsers  so test this first  I can confirm that it works in Chrome

User · Answer

Here is the one-liner   x000D   x000D  function convertTZ date  tzString        return new Date  typeof date      string    new Date date    date  toLocaleString  en-US    timeZone  tzString              usage  Asia Jakarta is GMT 7 convertTZ  2012 04 10 10 10 30  0000    Asia Jakarta      Tue Apr 10 2012 17 10 30 GMT 0700  Western Indonesia Time      Resulting value is regular Date   object const convertedDate   convertTZ  2012 04 10 10 10 30  0000    Asia Jakarta    convertedDate getHours       17     Bonus  You can also put Date object to first arg const date   new Date   convertTZ date   Asia Jakarta      current date-time in jakarta       x000D   x000D   x000D   This is the MDN Reference  Beware the caveat  function above works by relying on parsing toLocaleString result  which is string of a date formatted in en-US locale   e g   quot 4 10 2012  5 10 30 PM quot   Each browser may not accept en-US formatted date string to its Date constructor and it may return unexpected result  it may ignore daylight saving   Currently all modern browser accept this format and calculates daylight saving correctly  it may not work on older browser and or exotic browser   side-note  It would be great if modern browser have toLocaleDate function  so we don t have to use this hacky work around

User · Answer

For moment js users  you can now use moment-timezone   Using it  your function would look something like this   function toTimeZone time  zone        var format    YYYY MM DD HH mm ss ZZ       return moment time  format  tz zone  format format

User · Answer

Okay  found it   I m using timezone-js  this is the code   var dt   new timezoneJS Date  2012 04 10 10 10 30  0000    Europe London    dt setTimezone  Asia Jakarta     console debug dt     return formatted date-time in asia jakarta

User · Answer

People familiar with the java 8 java time package  or joda-time will probably love the new kid on the block  the js-joda library   Install    npm install js-joda js-joda-timezone --save   Example     lt script src  node modules js-joda dist js-joda js  gt  lt  script gt   lt script src  node modules js-joda-timezone dist js-joda-timezone js  gt  lt  script gt   lt script gt  var dateStr    2012 04 10 10 10 30  0000   JSJoda use JSJodaTimezone   var j   JSJoda     https   js-joda github io js-joda esdoc class src format DateTimeFormatter js DateTimeFormatter html static-method-of-pattern var zonedDateTime   j ZonedDateTime parse dateStr  j DateTimeFormatter ofPattern  yyyy MM dd HH mm ss xx     var adjustedZonedDateTime   zonedDateTime withZoneSameInstant j ZoneId of  America New York     console log zonedDateTime toString       gt    adjustedZonedDateTime toString        2012-04-10T10 10 30Z   gt  2012-04-10T06 10 30-04 00 America New York   lt  script gt    In true java nature  it s pretty verbose lol  But  being a ported java library  especially considering they ported 1800 ish test cases  it also probably works superbly accurately   Chrono manipulation is hard  That s why many other libraries are buggy in edge cases  Moment js seems to get timezones right  but the other js libs I ve seen  including timezone-js  don t seem trustworthy

User · Answer

Set a variable with year  month  and day separated with  -  symbols  plus a  T  and the time in HH mm ss pattern  followed by  01 00 at the end of the string  in my case the time zone is  1   Then use this string as the argument for the date constructor     desired format  2001-02-04T08 16 32 01 00 dateAndTime   year  -  month  -  day  T  hour     minutes   00 01 00    var date   new Date dateAndTime

User · Answer

You can also use  https   www npmjs com package ctoc timezone  It has got much simple implementation and format customisation   Changing format in toTimeZone    CtoC toTimeZone new Date    EST   Do MMM YYYY hh mm ss   EST      Output    28th Feb 2013 19 00 00 EST  You can explore multiple functionalities in the doc

User · Answer

I was having trouble using Moment Timezone  I am adding this answer just so if somebody else faces the same issue  So I have a date string 2018-06-14 13 51 00 coming from my API  I know that this is stored in UTC but the string doesn t speak for itself   I let moment timezone know  what timezone this date is from by doing   let uTCDatetime   momentTz tz  2018-06-14 13 51 00    UTC   format       If your datetime is from any other timezone then add that instead of  UTC     this actually makes the date as   2018-06-14T13 51 00Z   Now I would like to convert it to a specific timezone by doing   let dateInMyTimeZone   momentTz tz uTCDatetime   Asia Kolkata   format  YYYY-MM-DD HH mm ss       now this results into  2018-06-14 19 21 00  which is the corresponding date in my timezone

User · Answer

You can try this also for convert date timezone to India   var indianTimeZoneVal   new Date   toLocaleString  en-US    timeZone   Asia Kolkata     var indainDateObj   new Date indianTimeZoneVal   indainDateObj setHours indainDateObj getHours     5   indainDateObj setMinutes indainDateObj getMinutes     30   console log indainDateObj

User · Answer

Here is my code  it is working perfectly  you can try with give below demo     x000D   x000D    document  ready function     x000D       EST x000D  setInterval  function     x000D  var estTime   new Date    x000D   var currentDateTimeCentralTimeZone   new Date estTime toLocaleString  en-US     timeZone   America Chicago       x000D  var seconds   currentDateTimeCentralTimeZone getSeconds    x000D  var minutes   currentDateTimeCentralTimeZone getMinutes    x000D  var hours    currentDateTimeCentralTimeZone getHours   1   new Date   getHours    x000D   var am pm   currentDateTimeCentralTimeZone getHours    gt   12    PM     AM   x000D   x000D  if  hours  lt  10   x000D       hours    0    hours  x000D    x000D   x000D  if  minutes  lt  10   x000D       minutes    0    minutes  x000D    x000D  if  seconds  lt  10   x000D       seconds    0    seconds  x000D    x000D      var mid  PM   x000D      if hours  0     At 00 hours we need to show 12 am x000D      hours 12  x000D        x000D      else if hours gt 12  x000D        x000D      hours hours 12  x000D      mid  AM   x000D        x000D      var x3   hours     minutes     seconds      am pm x000D     Add a leading zero to seconds value x000D      sec   html x3   x000D    1000   x000D   x000D   x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt p class  date time  gt  lt strong id  sec  gt  lt  strong gt  lt  p gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use to toLocaleString   method for setting the timezone   new Date   toLocaleString  en-US     timeZone   Indian Christmas       For India you can use  Indian Christmas  and the following are the various timeZones    Antarctica Davis        Asia Bangkok        Asia Hovd        Asia Jakarta        Asia Phnom Penh        Asia Pontianak        Asia Saigon        Asia Vientiane        Etc GMT-7        Indian Christmas

User · Answer

Time Zone Offset for your current timezone  date   s -d  1 Jan 1970    For my GMT 10 timezone  Australia  it returned -36000

User · Answer

there is an npm module called  timezones json  you can use for this  it basically consists of a json file with objects containing information on daylight savings and offset       for asia jakarta it would be able to return this object        value    SE Asia Standard Time      abbr    SAST      offset   7     isdst   false     text     UTC 07 00  Bangkok  Hanoi  Jakarta      utc          Antarctica Davis        Asia Bangkok        Asia Hovd        Asia Jakarta        Asia Phnom Penh        Asia Pontianak        Asia Saigon        Asia Vientiane        Etc GMT-7        Indian Christmas          you can find it here   https   github com dmfilipenko timezones json  https   www npmjs com package timezones json  hope it s useful

User · Answer

Got it    Wanted to force the date shown   server date  no mattter the local settings  UTC    My server is GMT-6 --  new Date   getTimezoneOffset     360   myTZO   360  myNewDate new Date myOldDateObj getTime      60000  myOldDateObj getTimezoneOffset  -myTZO     alert myNewDate

User · Answer

I should note that I am restricted with respect to which external libraries that I can use   moment js and timezone-js were NOT an option for me   The js date object that I have is in UTC   I needed to get the date AND time from this date in a specific timezone  America Chicago  in my case       var currentUtcTime   new Date       This is in UTC      Converts the UTC time to a locale specific format  including adjusting for timezone   var currentDateTimeCentralTimeZone   new Date currentUtcTime toLocaleString  en-US     timeZone   America Chicago         console log  currentUtcTime      currentUtcTime toLocaleDateString      console log  currentUtcTime Hour      currentUtcTime getHours      console log  currentUtcTime Minute      currentUtcTime getMinutes      console log  currentDateTimeCentralTimeZone             currentDateTimeCentralTimeZone toLocaleDateString      console log  currentDateTimeCentralTimeZone Hour      currentDateTimeCentralTimeZone getHours      console log  currentDateTimeCentralTimeZone Minute      currentDateTimeCentralTimeZone getMinutes       UTC is currently 6 hours ahead of  America Chicago   Output is   currentUtcTime  11 25 2016 currentUtcTime Hour  16 currentUtcTime Minute  15  currentDateTimeCentralTimeZone  11 25 2016 currentDateTimeCentralTimeZone Hour  10 currentDateTimeCentralTimeZone Minute  15

User · Answer

I recently did this in Typescript       fromTimezone example   Europe Paris  toTimezone example  Europe London private calcTime  fromTimezone  string  toTimezone  string  dateFromTimezone  Date    Date     const dateToGetOffset   new Date  2018  5  1  12       const fromTimeString   dateToGetOffset toLocaleTimeString   en-UK     timeZone  fromTimezone  hour12  false        const toTimeString   dateToGetOffset toLocaleTimeString   en-UK     timeZone  toTimezone  hour12  false         const fromTimeHours  number   parseInt  fromTimeString substr  0  2    10      const toTimeHours  number   parseInt  toTimeString substr  0  2    10       const offset  number   fromTimeHours - toTimeHours        convert to msec      add local time zone offset      get UTC time in msec   const dateFromTimezoneUTC   Date UTC  dateFromTimezone getUTCFullYear        dateFromTimezone getUTCMonth        dateFromTimezone getUTCDate        dateFromTimezone getUTCHours        dateFromTimezone getUTCMinutes        dateFromTimezone getUTCSeconds               create new Date object for different city      using supplied offset   const dateUTC   new Date  dateFromTimezoneUTC     3600000   offset            return time as a string   return dateUTC      I Use  en-UK  format because it is a simple one  Could have been  en-US  or whatever works   If first argument is your locale timezone and seconde is your target timezone it returns a Date object with the correct offset

User · Answer

Just set your desire country timezone and You can easily show in html it update using SetInteval   function after every one minut  function formatAMPM   manage 12 hour format and AM PM time display     document  ready function            var pakTime   new Date   toLocaleString  en-US    timeZone   Asia Karachi             pakTime   new Date pakTime            var libyaTime   new Date   toLocaleString  en-US    timeZone   Africa Tripoli             libyaTime   new Date libyaTime               document getElementById  pak   innerHTML    PAK    formatAMPM pakTime            document getElementById  ly   innerHTML    LY      formatAMPM libyaTime            setInterval function today                var pakTime   new Date   toLocaleString  en-US    timeZone   Asia Karachi                 pakTime   new Date pakTime                var libyaTime   new Date   toLocaleString  en-US    timeZone   Africa Tripoli                 libyaTime   new Date libyaTime                document getElementById  pak   innerHTML    PAK    formatAMPM pakTime              document getElementById  ly   innerHTML    LY     formatAMPM libyaTime              10000             function formatAMPM date                var hours   date getHours                var minutes   date getMinutes                var ampm   hours  gt   12    pm     am               hours   hours   12              hours   hours   hours   12     the hour  0  should be  12              minutes   minutes  lt  10    0  minutes   minutes              var strTime   hours         minutes         ampm              return strTime

User · Answer

there is server issue pick gmt 0000 standard time zone you can change it by using library moment-timezone in javascript const moment   require  quot moment-timezone quot   const dateNew   new Date   const changeZone   moment dateNew   changeZone tz  quot Asia Karachi quot   format  quot ha z quot       here you can paste  quot your time zone string quot

[javascript] Convert date to another timezone in JavaScript

Examples related to javascript

Examples related to timezone