{"id":23989,"date":"2015-05-21T21:01:12","date_gmt":"2015-05-21T13:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23989"},"modified":"2024-04-29T23:47:16","modified_gmt":"2024-04-29T15:47:16","slug":"time-date-web","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/","title":{"rendered":"Display Date and Time: How to Do It Right"},"content":{"rendered":"<p>We come across them dates and time\u2026 well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps and many other places. Yet in spite of seeing date and time every day and everywhere, <strong>we have yet to adopt a universal format for it.<\/strong><\/p>\n<p>For example, if I write 10\/05\/2015, you can never be sure if that \"10\" is the month or the date unless I tell you where I am from. Sometimes the format changes, other times the language.<\/p>\n<p>It is of importance that as web developers we pay attention to the date and time that we deal with in our projects, so that we can <strong>cater them to different geographic inhabitants<\/strong> without any conflict. In this post we\u2019ll be discussing <strong>what to avoid and what to embrace<\/strong> when it comes to displaying date-time.<\/p>\n<h2>Understanding Global Standards for Time Representation<\/h2>\n<p>If we choose not to adapt date and time formats for various international audiences, what approach could we take? Opting for a universal format might be the solution. At this point, it\u2019s important to note that the World Wide Web Consortium (W3C) endorses the use of the ISO 8601 date format in conjunction with the UTC timezone.<\/p>\n<h3>Introduction to ISO 8601<\/h3>\n<p>ISO 8601 sets the international standard for representing dates and times numerically.<\/p>\n<p>The standard format for a complete date is: <strong><code>YYYY-MM-DD<\/code><\/strong>, for instance, <strong><code>2015-07-28<\/code><\/strong>.<\/p>\n<ul>\n<li><code>YYYY = Four-digit year<\/code><\/li>\n<li><code>MM = Two-digit month (01=January, etc.)<\/code><\/li>\n<li><code>DD = Two-digit day (01 to 31)<\/code><\/li>\n<\/ul>\n<p>For a full date and time representation: <strong><code>YYYY-MM-DDThh:mm:ss.s<\/code><\/strong>, an example would be: <strong><code>2015-07-28T21:15:18.45<\/code><\/strong><\/p>\n<ul>\n<li><code>T = Separator for date and time as per ISO 8601<\/code><\/li>\n<li><code>mm = Two-digit minute (00 to 59)<\/code><\/li>\n<li><code>ss = Two-digit second (00 to 59)<\/code><\/li>\n<li><code>s = Decimal fraction of a second, 1 or more digits<\/code><\/li>\n<\/ul>\n<p>Note: The absence of a timezone in the examples means it is in local time. To specify UTC, add <strong>Z<\/strong> at the end of the time.<\/p>\n<p>For example: <strong><code>2015-07-28T21:15:18.45Z<\/code><\/strong> indicates UTC.<\/p>\n<p>For displaying local time with a UTC offset, use formats like <code>+hh:mm<\/code> or <code>-hh:mm<\/code> as needed.<\/p>\n<p>Example: <code>2015-07-28T21:15:18.45<\/code> in Eastern Standard Time (EST), which is 5 hours behind UTC, would be written as <strong><code>2015-07-28T21:15:18.45-05:00<\/code><\/strong>, equivalent to <code>2015-07-29T02:15:18.45Z<\/code> in UTC.<\/p>\n<h3>Understanding UTC and GMT<\/h3>\n<p>Though often considered the same, UTC and GMT are distinct. GMT has been a global standard for longer, frequently used when setting the time on devices like phones and computers.<\/p>\n<p>UTC, which succeeded GMT, is maintained by the International Telecommunications Union. It is recommended to use UTC over GMT for more accurate timekeeping.<\/p>\n<h3>Naming the Months<\/h3>\n<p>While ISO 8601 uses numbers to avoid language issues, you can use English names for months if your content is primarily in English. For example, instead of <code>2015-07-28<\/code>, you could write <code>July 28, 2015<\/code>, which may be clearer and more intuitive for many users.<\/p>\n<h2>Enhancing User Experience with Localization<\/h2>\n<p>Sometimes, providing services tailored to specific locales, including local time zones and languages, is essential. Numerous libraries and APIs are available to web developers for displaying dates and times relevant to the user\u2019s region.<\/p>\n<p>While you can detect the browser\u2019s default locale via the <code>Accept-Language<\/code> header or the <code>navigator.language<\/code> or <code>navigator.browserLanguage<\/code> JavaScript objects, a more reliable method is to <strong>allow users to select their preferred locale within your application<\/strong>.<\/p>\n<p>Once the locale is set, dates and times can be formatted accordingly. For example, using the <strong>Internationalization API,<\/strong> you can format a date in JavaScript with <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\/toLocaleDateString\"><code>toLocaleDateString<\/code><\/a>. For instance, <code>myDate.toLocaleDateString('ko-KR')<\/code> will output the date in the format used in South Korea.<\/p>\n<h3>Daylight Saving Time (DST)<\/h3>\n<p>Many countries adjust clocks forward by an hour during summer months to extend evening daylight. Be mindful of DST to ensure accurate local time representation in your services.<\/p>\n<p class=\"note\">Note that there is <strong>no daylight saving<\/strong> adjustment in the UTC timezone.<\/p>\n<h3>Avoiding Two-Digit Years<\/h3>\n<p>When localizing dates and times, always use the full four-digit year format. Relying on two-digit years, such as <code>64<\/code> or <code>99<\/code>, can lead to confusion and errors in the future. If your system currently uses two-digit years, consider updating it.<\/p>\n<h3>Leap Years and Other Calendars<\/h3>\n<p>In concluding this post, remember some additional considerations when managing dates. If you\u2019re handling dates manually (though generally not recommended), ensure you include February 29th in leap years.<\/p>\n<p>Also, be aware that the Gregorian calendar is not the only calendar system. Several regional calendars are used globally, particularly for observing local festivals and events.<\/p>\n<h2>References:<\/h2>\n<ul>\n<li>International Telecommunications Union: <a rel=\"noopener nofollow\" target=\"_blank\" href=\"https:\/\/www.itu.int\/ennet\/newsroom\/wrc\/2012\/reports\/atomic_time.as\">Status of Coordinated Universal Time (UTC) study in ITU-R<\/a><\/li>\n<li>ISO: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.iso.org\/iso-8601-date-and-time-format.html\">ISO 8601<\/a> \u2013 Date and time format<\/li>\n<li>Wikipedia: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Coordinated_Universal_Time\">Coordinated Universal Time<\/a><\/li>\n<li>Wikipedia: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Daylight_saving_time\">Daylight Saving Time<\/a><\/li>\n<li>Wikipedia: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Greenwich_Mean_Time\">Greenwich Mean Time<\/a><\/li>\n<li>W3C Note: <a rel=\"noopener nofollow\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/NOTE-datetime\">Date and Time Formats<\/a><\/li>\n<li>W3C Tips: <a rel=\"noopener nofollow\" target=\"_blank\" href=\"https:\/\/www.w3.org\/QA\/Tips\/iso-date\">Use international date format (ISO)<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>We come across them dates and time\u2026 well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps and many other places. Yet in spite of seeing date and time every day and everywhere, we have yet to adopt a universal format for&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Display Date and Time: How to Do It Right - Hongkiat<\/title>\n<meta name=\"description\" content=\"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/time-date-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display Date and Time: How to Do It Right\" \/>\n<meta property=\"og:description\" content=\"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/time-date-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-21T13:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T15:47:16+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Display Date and Time: How to Do It Right\",\"datePublished\":\"2015-05-21T13:01:12+00:00\",\"dateModified\":\"2024-04-29T15:47:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/\"},\"wordCount\":718,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/\",\"name\":\"Display Date and Time: How to Do It Right - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-05-21T13:01:12+00:00\",\"dateModified\":\"2024-04-29T15:47:16+00:00\",\"description\":\"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/time-date-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display Date and Time: How to Do It Right\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Display Date and Time: How to Do It Right - Hongkiat","description":"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/","og_locale":"en_US","og_type":"article","og_title":"Display Date and Time: How to Do It Right","og_description":"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps","og_url":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-05-21T13:01:12+00:00","article_modified_time":"2024-04-29T15:47:16+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Display Date and Time: How to Do It Right","datePublished":"2015-05-21T13:01:12+00:00","dateModified":"2024-04-29T15:47:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/"},"wordCount":718,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/time-date-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/","url":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/","name":"Display Date and Time: How to Do It Right - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2015-05-21T13:01:12+00:00","dateModified":"2024-04-29T15:47:16+00:00","description":"We come across them dates and time... well, every day. When it comes to the Web, you can spot them in your mobile apps, in emails, in your messaging apps","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/time-date-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/time-date-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Display Date and Time: How to Do It Right"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6eV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23989"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23989\/revisions"}],"predecessor-version":[{"id":71772,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23989\/revisions\/71772"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23989"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}