{"id":206436,"date":"2015-08-12T10:56:35","date_gmt":"2015-08-12T17:56:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=206436"},"modified":"2015-08-12T10:56:35","modified_gmt":"2015-08-12T17:56:35","slug":"localizing-times-in-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/localizing-times-in-javascript\/","title":{"rendered":"Localizing Times in JavaScript"},"content":{"rendered":"<p>Say you have a <strong>time<\/strong> you&#8217;d like to display on your site. You&#8217;ve entered it in <em>your<\/em> time zone. You can always be specific and say something like: <strong>3:00 PM Eastern Standard Time<\/strong>. Then leave it up to whoever is reading to convert it to their local time. <a href=\"http:\/\/everytimezone.com\/\" rel=\"noopener\">Every Time Zone<\/a> is a great site for that.<\/p>\n<p>But it can be nice to localize the time <em>for<\/em> the reader. Time zone conversion is notoriously confusing. And it&#8217;s the type of thing computers are good at. JavaScript know what time zone the reader is in, after all.<\/p>\n<p><!--more--><\/p>\n<p>I&#8217;m sure there are a number of ways to do this. I had to do it recently on a new project, and I followed Dave Rupert&#8217;s lead, who implemented it on <a href=\"http:\/\/shoptalkshow.com\/\" rel=\"noopener\">ShopTalk&#8217;s website<\/a> to display the localized time for our next live show.<\/p>\n<h3>Libraries<\/h3>\n<p><a href=\"http:\/\/momentjs.com\/\" rel=\"noopener\">Moment.js<\/a> and <a href=\"http:\/\/momentjs.com\/timezone\/\" rel=\"noopener\">Moment Timezone<\/a> are a pair that can get this done. And if you need to do any other heavier date and time manipulation or relative calculations (e.g. &#8220;32 minutes ago&#8221;, &#8220;12 de Agosto de 2015&#8221;), you&#8217;ll be in good hands with these libraries.<\/p>\n<p>We&#8217;ll also need to detect the time zone itself, and thankfully there is <a href=\"https:\/\/bitbucket.org\/pellepim\/jstimezonedetect\" rel=\"noopener\">a library for that<\/a>.<\/p>\n<p>So we&#8217;ll be using:<\/p>\n<ul>\n<li>jstz.js<\/li>\n<li>moment.js<\/li>\n<li>moment-timezone.js<\/li>\n<\/ul>\n<p>Package or link those up however you will.<\/p>\n<h3>Step 1: Get the Timezone<\/h3>\n<p>Might as well stash it in localStorage after you&#8217;ve gotten it. That requires less effort on the browser&#8217;s part to retrieve next time. <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">if (!sessionStorage.getItem('timezone')) {\r\n  var tz = jstz.determine() || 'UTC';\r\n  sessionStorage.setItem('timezone', tz.name());\r\n}\r\nvar currTz = sessionStorage.getItem('timezone');<\/code><\/pre>\n<h3>Step 2: Get a Time Value<\/h3>\n<p>Moment expects a date\/time value (in <a href=\"https:\/\/en.wikipedia.org\/wiki\/Coordinated_Universal_Time\" rel=\"noopener\">UTC<\/a>) like:<\/p>\n<pre><code>2015-08-12T14:30Z<\/code><\/pre>\n<p>If we&#8217;re only interested in the time, we can create the date portion of that string from Moment itself of today&#8217;s date (just makes the formatting way easier). The date actually kinda matters since UGHGKGJHGH daylight savings.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var date = moment().format(\"YYYY-MM-DD\");<\/code><\/pre>\n<p>Then we&#8217;ll create the final string, assuming we have a variable with the time we want:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var stamp = date + \"T\" + theTime + \"Z\";<\/code><\/pre>\n<p>And turn it into a Moment object:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var momentTime = moment(stamp);<\/code><\/pre>\n<h3>Step 3: Localize the time<\/h3>\n<p>Now we can adjust\/localize that time with Moment Timezone:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var tzTime = momentTime.tz(currTz);<\/code><\/pre>\n<p>And properly format it for display:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var formattedTime = tzTime.format('h:mm A');<\/code><\/pre>\n<h3>Step 4: Use it<\/h3>\n<p>Now we can drop it on the page anywhere we want. If you output the time zone as well, you could even replace the time currently output on the page, since even if detecting the time zone fails it will fall back to UTC and output that as the time zone.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">output.textContent = \"Time in \" + currTz + \": \" + formattedTime;<\/code><\/pre>\n<h3>Adjusting Times<\/h3>\n<p>Sometimes it makes sense (perhaps from a CMS perspective) to ask people to input time in a local time zone. But in order to do the conversion correctly, it makes more sense to have that time in UTC. <\/p>\n<p>Moment itself can help with adjusting times, like:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">moment().subtract(4, 'hours');\r\nmoment().add(3, 'hours');<\/code><\/pre>\n<p>Server side languages can help too. For instance PHP can do math on times:<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">&lt;?php var $sixHoursAgo = strtotime(\"-6 hours\", time()); ?&gt;<\/code><\/pre>\n<p>It probably makes the most sense to do that with <a href=\"http:\/\/momentjs.com\/timezone\/\" rel=\"noopener\">Moment Timezone<\/a>, because it&#8217;s not always an exact formula (again UGHADKGHK daylight savings). <\/p>\n<h3>Demo<\/h3>\n<p>In this demo we use an HTML5 time input and adjust it on the fly to a localized time.<\/p>\n<p data-height=\"248\" style=\"height: 248px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"WvWeNa\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/WvWeNa\/\" rel=\"noopener\">Adjusting Times to Local Time Zones<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Other Ways<\/h3>\n<p>Do you have any experience with this? How did you handle it? <\/p>\n<p>The dependencies we used here are not insignificant! It appears there are native JavaScript methods (e.g. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\/getTimezoneOffset\" rel=\"noopener\">getTimezoneOffset()<\/a>) that have pretty good support that could be used to similar effect. Any experience relying on those?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Say you have a time you&#8217;d like to display on your site. You&#8217;ve entered it in your time zone. You can always be specific and say something like: 3:00 PM Eastern Standard Time. Then leave it up to whoever is reading to convert it to their local time. Every Time Zone is a great site [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":272575,"url":"https:\/\/css-tricks.com\/handling-errors-with-error-boundary\/","url_meta":{"origin":206436,"position":0},"title":"Handling Errors with Error Boundary","date":"June 26, 2018","format":false,"excerpt":"Thinking and building in React involves approaching application design in chunks, or components. Each part of your application that performs an action can and should be treated as a component. In fact, React is component-based and, as Tomas Eglinkas recently wrote, we should leverage that concept and err on the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/error-long-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270655,"url":"https:\/\/css-tricks.com\/locate-and-identify-website-visitors-by-ip-address\/","url_meta":{"origin":206436,"position":1},"title":"Locate and identify website visitors by IP address","date":"May 10, 2018","format":false,"excerpt":"Big thanks to ipstack for sponsoring CSS-Tricks this week! Have you ever had the need to know the general location of a visitor of your website? You can get that information, without having to explicitly ask for it, by the user\u2019s IP address. You\u2019re just going to need a API\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":682,"url":"https:\/\/css-tricks.com\/some-updated-and-improved-examples\/","url_meta":{"origin":206436,"position":2},"title":"Some Updated and Improved Examples","date":"April 16, 2008","format":false,"excerpt":"We are all learning and becoming better web designers and developers all the time. At least I hope we are, that is the whole point of this site! It is always a good idea to re-visit things from time to time and make sure we did things as well and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1877,"url":"https:\/\/css-tricks.com\/dynamic-faq-page\/","url_meta":{"origin":206436,"position":3},"title":"Dynamic FAQ Page &#8211; A Lesson in Accessibility and Progressive Enhancement","date":"December 29, 2008","format":false,"excerpt":"The idea is to make a question & answer style page which is embellished in functionality by JavaScript (jQuery). Each question will be shown in a box with a tag hanging from the bottom of the box. When clicked, the tag will slide out and reveal another box with the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/faq-example.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":247549,"url":"https:\/\/css-tricks.com\/lazy-loading-responsive-adsense-ads\/","url_meta":{"origin":206436,"position":4},"title":"Lazy Loading Responsive Adsense Ads","date":"November 15, 2016","format":false,"excerpt":"You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":358672,"url":"https:\/\/css-tricks.com\/confused-about-ssgs\/","url_meta":{"origin":206436,"position":5},"title":"I&#8217;m confused about Static Site Generators. Are they only for informational sites where I can&#8217;t log in or display any dynamic data?","date":"December 14, 2021","format":false,"excerpt":"I got this question from a listener the other day. Fair question, I'd say. The word \"Static\" in \"Static Site Generator\" is at-odds with the word \"Dynamic.\" It seems to imply that the website created with a Static Site Generator (SSG) is locked in stone, only to be changed when\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/static-dynamic.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206436"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=206436"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206436\/revisions"}],"predecessor-version":[{"id":206443,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206436\/revisions\/206443"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=206436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=206436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=206436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}