Display date time in user s locale format and time offset

Question

I want the server to always serve dates in UTC in the HTML  and have JavaScript on the client site convert it to the user s local timezone   Bonus if I can output in the user s locale date format

User · Answer

x000D   x000D     new Date year  monthIndex    day    hours    minutes    seconds    milliseconds       x000D  var serverDate   new Date 2018  5  30  19  13  15      just any date that comes from server x000D  var serverDateStr   serverDate toLocaleString  en-US     x000D    year   numeric   x000D    month   numeric   x000D    day   numeric   x000D    hour   numeric   x000D    minute   numeric   x000D    second   numeric  x000D     x000D  var userDate   new Date serverDateStr     UTC    x000D  var locale   window navigator userLanguage    window navigator language  x000D   x000D  var clientDateStr   userDate toLocaleString locale    x000D    year   numeric   x000D    month   numeric   x000D    day   numeric  x000D      x000D   x000D  var clientDateTimeStr   userDate toLocaleString locale    x000D    year   numeric   x000D    month   numeric   x000D    day   numeric   x000D    hour   numeric   x000D    minute   numeric   x000D    second   numeric  x000D      x000D   x000D  console log  Server UTC date      serverDateStr   x000D  console log  User s local date      clientDateStr   x000D  console log  User s local date amp time      clientDateTimeStr   x000D   x000D   x000D

User · Answer

With date from PHP code I used something like this    function getLocalDate php date      var dt   new Date php date     var minutes   dt getTimezoneOffset      dt   new Date dt getTime     minutes 60000     return dt      We can call it like this  var localdateObj   getLocalDate  2015-09-25T02 57 46

User · Answer

You can use new Date   getTimezoneOffset   60 for the timezone  There is also a toLocaleString   method for displaying a date using the user s locale   Here s the whole list  Working with Dates

User · Answer

With date from PHP code I used something like this    function getLocalDate php date      var dt   new Date php date     var minutes   dt getTimezoneOffset      dt   new Date dt getTime     minutes 60000     return dt      We can call it like this  var localdateObj   getLocalDate  2015-09-25T02 57 46

User · Answer

The best solution I ve come across is to create  time display  llll  datetime  UTC TIME      Tags  and use javascript  jquery  to parse and display it relative to the user s time   http   momentjs com  Moment js   will display the time nicely

User · Answer

Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC    methods to set it to the date time you want   Then the various toLocale   String methods will provide localized output   Example    x000D   x000D     This would come from the server  x000D     Also  this whole block could probably be made into an mktime function  x000D     All very bare here for quick grasping  x000D  d   new Date    x000D  d setUTCFullYear 2004   x000D  d setUTCMonth 1   x000D  d setUTCDate 29   x000D  d setUTCHours 2   x000D  d setUTCMinutes 45   x000D  d setUTCSeconds 26   x000D   x000D  console log d                             - gt  Sat Feb 28 2004 23 45 26 GMT-0300  BRT  x000D  console log d toLocaleString              - gt  Sat Feb 28 23 45 26 2004 x000D  console log d toLocaleDateString          - gt  02 28 2004 x000D  console log d toLocaleTimeString          - gt  23 45 26 x000D   x000D   x000D    Some references    toLocaleString toLocaleDateString toLocaleTimeString getTimezoneOffset

User · Answer

For new projects  just use moment js  This question is pretty old  so moment js didn t exist at that time  but for new projects  it simplifies tasks like this a lot    It s best to parse your date string from UTC as follows  create an ISO-8601 compatible string on the server to get consistent results across all browsers    var m   moment  2013-02-08T09 30 26Z      Now just use m in your application  moment js defaults to the local timezone for display operations  There are many ways to format the date and time values or extract portions of it   You can even format a moment object in the users locale like this   m format  LLL      Returns  February 8 2013 8 30 AM  on en-us   To transform a moment js object into a different timezone  i e  neither the local one nor UTC   you ll need the moment js timezone extension  That page has also some examples  it s pretty simple to use

User · Answer

getTimeZoneOffset   and toLocaleString are good for basic date work  but if you need real timezone support  look at mde s TimeZone js    There s a few more options discussed in the answer to this question

User · Answer

I mix the answers so far and add to it  because I had to read all of them and investigate additionally for a while to display a date time string from db in a user s local timezone format   The datetime string comes from a python django db in the format  2016-12-05T15 12 24 215Z  Reliable detection of the browser language in JavaScript doesn t seem to work in all browsers  see JavaScript for detecting browser language preference   so I get the browser language from the server   Python Django  send request browser language as context parameter   language   request META get  HTTP ACCEPT LANGUAGE   return render request   cssexy index html      language   language      HTML  write it in a hidden input    lt input type  hidden  id  browserlanguage  value    language     gt    JavaScript  get value of hidden input e g  en-GB en-US q 0 8 en q 0 6  and then take the first language in the list only via replace and regular expression  const browserlanguage   document getElementById  browserlanguage   value  var defaultlang   browserlanguage replace    w 2  - w 2          1      JavaScript  convert to datetime and format it   var options     hour   2-digit   minute   2-digit     var dt    new Date str   toLocaleDateString defaultlang  options     See  https   developer mozilla org en docs Web JavaScript Reference Global Objects Date toLocaleDateString  The result is  browser language is en-gb   05 12 2016  14 58

User · Answer

You could use the following  which reports the timezone offset from GMT in minutes     new Date   getTimezoneOffset      Note    - this function return a negative number

User · Answer

You could use the following  which reports the timezone offset from GMT in minutes     new Date   getTimezoneOffset      Note    - this function return a negative number

User · Answer

You can use new Date   getTimezoneOffset   60 for the timezone  There is also a toLocaleString   method for displaying a date using the user s locale   Here s the whole list  Working with Dates

User · Answer

getTimeZoneOffset   and toLocaleString are good for basic date work  but if you need real timezone support  look at mde s TimeZone js    There s a few more options discussed in the answer to this question

User · Answer

The  getTimezoneOffset   method reports the time-zone offset in minutes  counting  westwards  from the GMT UTC timezone  resulting in an offset value that is negative to what one is commonly accustomed to   Example  New York time would be reported to be  240 minutes or  4 hours   To the get a normal time-zone offset in hours  you need to use   var timeOffsetInHours   - new Date    getTimezoneOffset   60   Important detail  Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset

User · Answer

Here s what I ve used in past projects   var myDate   new Date    var tzo    myDate getTimezoneOffset   60   -1     get server date value here  the parseInvariant is from MS Ajax  you would need to do something similar on your own myDate   new Date parseInvariant   lt   DataCurrentDate  gt     yyyyMMdd hh mm ss    myDate setHours myDate getHours     tzo     here you would have to get a handle to your span   div to set   again  I m using MS Ajax s  get var dateSpn    get  dataDate    dateSpn innerHTML   myDate localeFormat  F

User · Answer

The  getTimezoneOffset   method reports the time-zone offset in minutes  counting  westwards  from the GMT UTC timezone  resulting in an offset value that is negative to what one is commonly accustomed to   Example  New York time would be reported to be  240 minutes or  4 hours   To the get a normal time-zone offset in hours  you need to use   var timeOffsetInHours   - new Date    getTimezoneOffset   60   Important detail  Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset

User · Answer

You can use new Date   getTimezoneOffset   60 for the timezone  There is also a toLocaleString   method for displaying a date using the user s locale   Here s the whole list  Working with Dates

User · Answer

Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC    methods to set it to the date time you want   Then the various toLocale   String methods will provide localized output   Example    x000D   x000D     This would come from the server  x000D     Also  this whole block could probably be made into an mktime function  x000D     All very bare here for quick grasping  x000D  d   new Date    x000D  d setUTCFullYear 2004   x000D  d setUTCMonth 1   x000D  d setUTCDate 29   x000D  d setUTCHours 2   x000D  d setUTCMinutes 45   x000D  d setUTCSeconds 26   x000D   x000D  console log d                             - gt  Sat Feb 28 2004 23 45 26 GMT-0300  BRT  x000D  console log d toLocaleString              - gt  Sat Feb 28 23 45 26 2004 x000D  console log d toLocaleDateString          - gt  02 28 2004 x000D  console log d toLocaleTimeString          - gt  23 45 26 x000D   x000D   x000D    Some references    toLocaleString toLocaleDateString toLocaleTimeString getTimezoneOffset

User · Answer

In JS there are no simple and cross platform ways to format local date time  outside of converting each property as mentioned above    Here is a quick hack I use to get the local YYYY-MM-DD  Note that this is a hack  as the final date will not have the correct timezone anymore  so you have to ignore timezone   If I need anything else more  I use moment js    var d   new Date        d   new Date d getTime   - d getTimezoneOffset     60000  var yyyymmdd   t toISOString   slice 0 0       2017-05-09T08 24 26 581Z  but this is not UTC    The d getTimezoneOffset   returns the time zone offset in minutes  and the d getTime   is in ms  hence the x 60 000

User · Answer

getTimeZoneOffset   and toLocaleString are good for basic date work  but if you need real timezone support  look at mde s TimeZone js    There s a few more options discussed in the answer to this question

User · Answer

To convert date to local date use toLocaleDateString   method   var date    new Date str   toLocaleDateString defaultlang  options     To convert time to local time use toLocaleTimeString   method   var time    new Date str   toLocaleTimeString defaultlang  options

User · Answer

For new projects  just use moment js  This question is pretty old  so moment js didn t exist at that time  but for new projects  it simplifies tasks like this a lot    It s best to parse your date string from UTC as follows  create an ISO-8601 compatible string on the server to get consistent results across all browsers    var m   moment  2013-02-08T09 30 26Z      Now just use m in your application  moment js defaults to the local timezone for display operations  There are many ways to format the date and time values or extract portions of it   You can even format a moment object in the users locale like this   m format  LLL      Returns  February 8 2013 8 30 AM  on en-us   To transform a moment js object into a different timezone  i e  neither the local one nor UTC   you ll need the moment js timezone extension  That page has also some examples  it s pretty simple to use

User · Answer

Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC    methods to set it to the date time you want   Then the various toLocale   String methods will provide localized output   Example    x000D   x000D     This would come from the server  x000D     Also  this whole block could probably be made into an mktime function  x000D     All very bare here for quick grasping  x000D  d   new Date    x000D  d setUTCFullYear 2004   x000D  d setUTCMonth 1   x000D  d setUTCDate 29   x000D  d setUTCHours 2   x000D  d setUTCMinutes 45   x000D  d setUTCSeconds 26   x000D   x000D  console log d                             - gt  Sat Feb 28 2004 23 45 26 GMT-0300  BRT  x000D  console log d toLocaleString              - gt  Sat Feb 28 23 45 26 2004 x000D  console log d toLocaleDateString          - gt  02 28 2004 x000D  console log d toLocaleTimeString          - gt  23 45 26 x000D   x000D   x000D    Some references    toLocaleString toLocaleDateString toLocaleTimeString getTimezoneOffset

User · Answer

You could use the following  which reports the timezone offset from GMT in minutes     new Date   getTimezoneOffset      Note    - this function return a negative number

User · Answer

To convert date to local date use toLocaleDateString   method   var date    new Date str   toLocaleDateString defaultlang  options     To convert time to local time use toLocaleTimeString   method   var time    new Date str   toLocaleTimeString defaultlang  options

User · Answer

Don t know how to do locale  but javascript is a client side technology   usersLocalTime   new Date      will have the client s time and date in it  as reported by their browser  and by extension the computer they are sitting at    It should be trivial to include the server s time in the response and do some simple math to guess-timate offset

User · Answer

getTimeZoneOffset   and toLocaleString are good for basic date work  but if you need real timezone support  look at mde s TimeZone js    There s a few more options discussed in the answer to this question

User · Answer

Here s what I ve used in past projects   var myDate   new Date    var tzo    myDate getTimezoneOffset   60   -1     get server date value here  the parseInvariant is from MS Ajax  you would need to do something similar on your own myDate   new Date parseInvariant   lt   DataCurrentDate  gt     yyyyMMdd hh mm ss    myDate setHours myDate getHours     tzo     here you would have to get a handle to your span   div to set   again  I m using MS Ajax s  get var dateSpn    get  dataDate    dateSpn innerHTML   myDate localeFormat  F

User · Answer

The  getTimezoneOffset   method reports the time-zone offset in minutes  counting  westwards  from the GMT UTC timezone  resulting in an offset value that is negative to what one is commonly accustomed to   Example  New York time would be reported to be  240 minutes or  4 hours   To the get a normal time-zone offset in hours  you need to use   var timeOffsetInHours   - new Date    getTimezoneOffset   60   Important detail  Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset

User · Answer

The  getTimezoneOffset   method reports the time-zone offset in minutes  counting  westwards  from the GMT UTC timezone  resulting in an offset value that is negative to what one is commonly accustomed to   Example  New York time would be reported to be  240 minutes or  4 hours   To the get a normal time-zone offset in hours  you need to use   var timeOffsetInHours   - new Date    getTimezoneOffset   60   Important detail  Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset

User · Answer

Here s what I ve used in past projects   var myDate   new Date    var tzo    myDate getTimezoneOffset   60   -1     get server date value here  the parseInvariant is from MS Ajax  you would need to do something similar on your own myDate   new Date parseInvariant   lt   DataCurrentDate  gt     yyyyMMdd hh mm ss    myDate setHours myDate getHours     tzo     here you would have to get a handle to your span   div to set   again  I m using MS Ajax s  get var dateSpn    get  dataDate    dateSpn innerHTML   myDate localeFormat  F

User · Answer

Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC    methods to set it to the date time you want   Then the various toLocale   String methods will provide localized output   Example    x000D   x000D     This would come from the server  x000D     Also  this whole block could probably be made into an mktime function  x000D     All very bare here for quick grasping  x000D  d   new Date    x000D  d setUTCFullYear 2004   x000D  d setUTCMonth 1   x000D  d setUTCDate 29   x000D  d setUTCHours 2   x000D  d setUTCMinutes 45   x000D  d setUTCSeconds 26   x000D   x000D  console log d                             - gt  Sat Feb 28 2004 23 45 26 GMT-0300  BRT  x000D  console log d toLocaleString              - gt  Sat Feb 28 23 45 26 2004 x000D  console log d toLocaleDateString          - gt  02 28 2004 x000D  console log d toLocaleTimeString          - gt  23 45 26 x000D   x000D   x000D    Some references    toLocaleString toLocaleDateString toLocaleTimeString getTimezoneOffset

User · Answer

I mix the answers so far and add to it  because I had to read all of them and investigate additionally for a while to display a date time string from db in a user s local timezone format   The datetime string comes from a python django db in the format  2016-12-05T15 12 24 215Z  Reliable detection of the browser language in JavaScript doesn t seem to work in all browsers  see JavaScript for detecting browser language preference   so I get the browser language from the server   Python Django  send request browser language as context parameter   language   request META get  HTTP ACCEPT LANGUAGE   return render request   cssexy index html      language   language      HTML  write it in a hidden input    lt input type  hidden  id  browserlanguage  value    language     gt    JavaScript  get value of hidden input e g  en-GB en-US q 0 8 en q 0 6  and then take the first language in the list only via replace and regular expression  const browserlanguage   document getElementById  browserlanguage   value  var defaultlang   browserlanguage replace    w 2  - w 2          1      JavaScript  convert to datetime and format it   var options     hour   2-digit   minute   2-digit     var dt    new Date str   toLocaleDateString defaultlang  options     See  https   developer mozilla org en docs Web JavaScript Reference Global Objects Date toLocaleDateString  The result is  browser language is en-gb   05 12 2016  14 58

User · Answer

Don t know how to do locale  but javascript is a client side technology   usersLocalTime   new Date      will have the client s time and date in it  as reported by their browser  and by extension the computer they are sitting at    It should be trivial to include the server s time in the response and do some simple math to guess-timate offset

User · Answer

Here s what I ve used in past projects   var myDate   new Date    var tzo    myDate getTimezoneOffset   60   -1     get server date value here  the parseInvariant is from MS Ajax  you would need to do something similar on your own myDate   new Date parseInvariant   lt   DataCurrentDate  gt     yyyyMMdd hh mm ss    myDate setHours myDate getHours     tzo     here you would have to get a handle to your span   div to set   again  I m using MS Ajax s  get var dateSpn    get  dataDate    dateSpn innerHTML   myDate localeFormat  F

User · Answer

The best solution I ve come across is to create  time display  llll  datetime  UTC TIME      Tags  and use javascript  jquery  to parse and display it relative to the user s time   http   momentjs com  Moment js   will display the time nicely

User · Answer

In JS there are no simple and cross platform ways to format local date time  outside of converting each property as mentioned above    Here is a quick hack I use to get the local YYYY-MM-DD  Note that this is a hack  as the final date will not have the correct timezone anymore  so you have to ignore timezone   If I need anything else more  I use moment js    var d   new Date        d   new Date d getTime   - d getTimezoneOffset     60000  var yyyymmdd   t toISOString   slice 0 0       2017-05-09T08 24 26 581Z  but this is not UTC    The d getTimezoneOffset   returns the time zone offset in minutes  and the d getTime   is in ms  hence the x 60 000

User · Answer

Don t know how to do locale  but javascript is a client side technology   usersLocalTime   new Date      will have the client s time and date in it  as reported by their browser  and by extension the computer they are sitting at    It should be trivial to include the server s time in the response and do some simple math to guess-timate offset

User · Answer

Don t know how to do locale  but javascript is a client side technology   usersLocalTime   new Date      will have the client s time and date in it  as reported by their browser  and by extension the computer they are sitting at    It should be trivial to include the server s time in the response and do some simple math to guess-timate offset

User · Answer

Once you have your date object constructed  here s a snippet for the conversion   The function takes a UTC formatted Date object and format string  You will need a Date strftime prototype   function UTCToLocalTimeString d  format        if  timeOffsetInHours    null            timeOffsetInHours    new Date   getTimezoneOffset   60     -1             d setHours d getHours     timeOffsetInHours        return d strftime format

User · Answer

Once you have your date object constructed  here s a snippet for the conversion   The function takes a UTC formatted Date object and format string  You will need a Date strftime prototype   function UTCToLocalTimeString d  format        if  timeOffsetInHours    null            timeOffsetInHours    new Date   getTimezoneOffset   60     -1             d setHours d getHours     timeOffsetInHours        return d strftime format

User · Answer

You could use the following  which reports the timezone offset from GMT in minutes     new Date   getTimezoneOffset      Note    - this function return a negative number

User · Answer

x000D   x000D     new Date year  monthIndex    day    hours    minutes    seconds    milliseconds       x000D  var serverDate   new Date 2018  5  30  19  13  15      just any date that comes from server x000D  var serverDateStr   serverDate toLocaleString  en-US     x000D    year   numeric   x000D    month   numeric   x000D    day   numeric   x000D    hour   numeric   x000D    minute   numeric   x000D    second   numeric  x000D     x000D  var userDate   new Date serverDateStr     UTC    x000D  var locale   window navigator userLanguage    window navigator language  x000D   x000D  var clientDateStr   userDate toLocaleString locale    x000D    year   numeric   x000D    month   numeric   x000D    day   numeric  x000D      x000D   x000D  var clientDateTimeStr   userDate toLocaleString locale    x000D    year   numeric   x000D    month   numeric   x000D    day   numeric   x000D    hour   numeric   x000D    minute   numeric   x000D    second   numeric  x000D      x000D   x000D  console log  Server UTC date      serverDateStr   x000D  console log  User s local date      clientDateStr   x000D  console log  User s local date amp time      clientDateTimeStr   x000D   x000D   x000D

User · Answer

You can use new Date   getTimezoneOffset   60 for the timezone  There is also a toLocaleString   method for displaying a date using the user s locale   Here s the whole list  Working with Dates

[javascript] Display date/time in user's locale format and time offset

Examples related to javascript

Examples related to datetime

Examples related to timezone