{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: romulocintra:dev","description":"The latest articles on DEV Community by romulocintra:dev (@romulocintra).","link":"https:\/\/dev.to\/romulocintra","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F71173%2F77348680-4294-41e4-8ab0-d29836656dc2.jpeg","title":"DEV Community: romulocintra:dev","link":"https:\/\/dev.to\/romulocintra"},"language":"en","item":{"title":"Temporal - Date & Time in JavaScript today!","pubDate":"Wed, 26 Aug 2020 10:03:08 +0000","link":"https:\/\/dev.to\/romulocintra\/temporal-date-time-in-javascript-today-23cb","guid":"https:\/\/dev.to\/romulocintra\/temporal-date-time-in-javascript-today-23cb","description":"<blockquote>\n<p><strong>Important!<\/strong>: This article as been written almost 2 years ago <code>Temporal<\/code> updated their API and is even more awesome now - Part two of the article coming soon!<\/p>\n<\/blockquote>\n\n<p>Every developer at some point in their careers had to play with <strong>Date<\/strong> &amp; <strong>Time<\/strong> and if you are lucky... You only had to deal with <strong>time zones<\/strong> when you are travelling.<\/p>\n\n<p>The JavaScript community &amp; developers have been trying to solve this in different ways, either by developing their own libraries or by using any popular solution like <strong>moment<\/strong>, <strong>date-fns<\/strong> or <strong>DayJS<\/strong> among others. There is a nice blog post about <a href=\"https:\/\/maggiepint.com\/2017\/04\/09\/fixing-javascript-date-getting-started\/\" rel=\"noopener noreferrer\">Fixing JavaScript Date<\/a>.<\/p>\n\n<h3>\n  \n  \n  <em>\"It's 2020... and <code>moment<\/code> still in my package.json\"<\/em>\n<\/h3>\n\n<p>Not having nothing against all these folks and the community that made an awesome job with these libraries, I believe that it's time to have a solution that is part of the standards, solving this long-standing issue at once... as an alternative, we can build <code>moment<\/code> into the browser too.<\/p>\n\n<p><iframe class=\"tweet-embed\" id=\"tweet-1275505462797053952-500\" src=\"https:\/\/platform.twitter.com\/embed\/Tweet.html?id=1275505462797053952\">\n<\/iframe>\n\n  \/\/ Detect dark theme\n  var iframe = document.getElementById('tweet-1275505462797053952-500');\n  if (document.body.className.includes('dark-theme')) {\n    iframe.src = \"https:\/\/platform.twitter.com\/embed\/Tweet.html?id=1275505462797053952&amp;theme=dark\"\n  }\n\n\n\n<\/p>\n\n<h3>\n  \n  \n  \"<em>Yeahhhh!<\/em> <strong>Temporal<\/strong> <em>is here...<\/em> &amp; What is this ?\"\n<\/h3>\n\n<p>Temporal is a new proposal, already at Stage 2 that brings a modern date\/time API to the ECMAScript land.<\/p>\n\n<blockquote>\n<p>At the time of writing there is no browser implementation yet, a polyfill is available at <a href=\"https:\/\/www.npmjs.com\/package\/proposal-temporal\" rel=\"noopener noreferrer\">npm<\/a>, please give it a try and provide <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSeYdvnDZZS6tKn18jiomfN7u_rq-_-_BqOevTzAcfgE3J4kHA\/viewform\" rel=\"noopener noreferrer\">feedback<\/a>.<\/p>\n<\/blockquote>\n\n<h3>\n  \n  \n  Cool things about <strong>Temporal<\/strong>?\n<\/h3>\n\n<ul>\n<li>Providing easy-to-use APIs for date and time computations<\/li>\n<li>Dealing only with immutable objects<\/li>\n<li>Parsing a strictly specified string format: ISO-8601<\/li>\n<li>Supporting non-Gregorian calendars, and time zones other than the user's local time and UTC<\/li>\n<li>Still being an experimental API, but hopefully it will eventually be a standard, built-in to JS<\/li>\n<li>Is local aware, support time zones and locales by default, no extra plugins or data are required<\/li>\n<li>It is designed to be used directly, with an easy API, as well as embedding well in other libraries<\/li>\n<\/ul>\n\n\n\n\n<h1>\n  \n  \n  Overview\n<\/h1>\n\n<p>This overview covers functionalities that I use most in my projects and I\u2019d like you to know the goals &amp; non-goals that we are trying to accomplish through this overview.<\/p>\n\n<h3>\n  \n  \n  Outline\n<\/h3>\n\n<ul>\n<li>Review what Temporal has to offer and highlight some API's<\/li>\n<li>Compare the ergonomics and functionality with existing libraries<\/li>\n<li>Learn and understand how it works<\/li>\n<li>Provide valuable feedback from my usage and experience with <code>Temporal<\/code>\n<\/li>\n<\/ul>\n\n<p>This post doesn\u2019t cover all API surface, for that please refer to their <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/\" rel=\"noopener noreferrer\">documentation<\/a> that has excellent <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/cookbook.html\" rel=\"noopener noreferrer\">examples<\/a>.It also omits any benchmarks--the polyfill may be slow, but that\u2019s because it hasn\u2019t been optimized yet.<\/p>\n\n<h3>\n  \n  \n  Usage\n<\/h3>\n\n<blockquote>\n<p>Intentionally no configuration or extra plugins for time zone &amp; locales are used,  this is required by some libraries and may affect results that won't be showing accordingly with my time zone(Europe\/Madrid) or locale(es-ES).<\/p>\n<\/blockquote>\n\n<h4>\n  \n  \n  Date of Month\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">.<\/span><span class=\"nf\">date<\/span><span class=\"p\">().<\/span><span class=\"nx\">day<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ moment<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">().<\/span><span class=\"nf\">date<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ dayjs<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">().<\/span><span class=\"nf\">date<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getDate<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">getDate<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">());<\/span>\n\n<span class=\"c1\">\/\/ =&gt; 14 (Current Day)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Day of Week\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">.<\/span><span class=\"nf\">date<\/span><span class=\"p\">().<\/span><span class=\"nx\">dayOfWeek<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ moment<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">().<\/span><span class=\"nf\">day<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ dayjs<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">().<\/span><span class=\"nf\">day<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getDay<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">getDay<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">());<\/span>\n\n<span class=\"c1\">\/\/ =&gt; 2 (Current Day of Week)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Add\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">.<\/span><span class=\"nf\">absolute<\/span><span class=\"p\">().<\/span><span class=\"nf\">plus<\/span><span class=\"p\">({<\/span> <span class=\"na\">days<\/span><span class=\"p\">:<\/span> <span class=\"mi\">7<\/span> <span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/ =&gt; 2020-07-22T13:03:01.419163174Z<\/span>\n\n<span class=\"c1\">\/\/ moment<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">().<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">days<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ =&gt; Wed Jul 22 2020 15:03:24 GMT+0200<\/span>\n\n<span class=\"c1\">\/\/ dayjs<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">().<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">day<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ =&gt; Wed, 22 Jul 2020 13:03:52 GMT<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">add<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"na\">days<\/span><span class=\"p\">:<\/span> <span class=\"mi\">7<\/span> <span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/ =&gt; 2020-07-22T13:04:37.366Z<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Subtract\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">.<\/span><span class=\"nf\">absolute<\/span><span class=\"p\">().<\/span><span class=\"nf\">minus<\/span><span class=\"p\">({<\/span> <span class=\"na\">days<\/span><span class=\"p\">:<\/span> <span class=\"mi\">7<\/span> <span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/ =&gt; 2020-07-08T13:07:17.807181419Z<\/span>\n\n<span class=\"c1\">\/\/ moment<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">().<\/span><span class=\"nf\">subtract<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">days<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ =&gt; Wed Jul 08 2020 15:08:03 GMT+0200<\/span>\n\n<span class=\"c1\">\/\/ dayjs<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">().<\/span><span class=\"nf\">subtract<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">day<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ =&gt; Wed, 08 Jul 2020 13:08:24 GMT<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">sub<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">sub<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"na\">days<\/span><span class=\"p\">:<\/span> <span class=\"mi\">7<\/span> <span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/ =&gt; 2020-07-08T13:08:54.558Z<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Difference\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">startDate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">1986-07-1<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">endDate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-07-1<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">temporalStart<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">Absolute<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">startDate<\/span><span class=\"p\">.<\/span><span class=\"nf\">toISOString<\/span><span class=\"p\">());<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">temporalEnd<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">Absolute<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">endDate<\/span><span class=\"p\">.<\/span><span class=\"nf\">toISOString<\/span><span class=\"p\">());<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">temporalDiff<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">temporalEnd<\/span><span class=\"p\">.<\/span><span class=\"nf\">difference<\/span><span class=\"p\">(<\/span><span class=\"nx\">temporalStart<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">largestUnit<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">days<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">temporalDiff<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">());<\/span>\n<span class=\"c1\">\/\/ =&gt; P12419D (ISO 8601 notation)<\/span>\n<span class=\"c1\">\/\/ Or `temporalDiff.days`<\/span>\n<span class=\"c1\">\/\/ =&gt; 12419<\/span>\n\n<span class=\"c1\">\/\/ moment &amp; dayjs have similar API<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">momentStart<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"nx\">startDate<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">momentEnd<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"nx\">endDate<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">momentDiff<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">momentEnd<\/span><span class=\"p\">.<\/span><span class=\"nf\">diff<\/span><span class=\"p\">(<\/span><span class=\"nx\">momentStart<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">days<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">momentDiff<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">());<\/span>\n<span class=\"c1\">\/\/ =&gt; 12419<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">differenceInDays<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">differenceInDays<\/span><span class=\"p\">(<\/span><span class=\"nx\">startDate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">endDate<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; -12419<\/span>\n<span class=\"nf\">differenceInDays<\/span><span class=\"p\">(<\/span><span class=\"nx\">endDate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">startDate<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; 12419<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Duration\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"k\">new<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nc\">Duration<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">23<\/span><span class=\"p\">,<\/span> <span class=\"mi\">59<\/span><span class=\"p\">,<\/span> <span class=\"mi\">59<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">Duration<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">({<\/span> <span class=\"na\">hours<\/span><span class=\"p\">:<\/span> <span class=\"mi\">23<\/span><span class=\"p\">,<\/span> <span class=\"na\">minutes<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span><span class=\"p\">,<\/span> <span class=\"na\">seconds<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span> <span class=\"p\">});<\/span>\n\n<span class=\"c1\">\/\/ moment<\/span>\n<span class=\"nx\">moment<\/span><span class=\"p\">.<\/span><span class=\"nf\">duration<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">23:59:59<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">moment<\/span><span class=\"p\">.<\/span><span class=\"nf\">duration<\/span><span class=\"p\">({<\/span> <span class=\"na\">hours<\/span><span class=\"p\">:<\/span> <span class=\"mi\">23<\/span><span class=\"p\">,<\/span> <span class=\"na\">minutes<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span><span class=\"p\">,<\/span> <span class=\"na\">seconds<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span> <span class=\"p\">});<\/span>\n\n<span class=\"c1\">\/\/ dayjs<\/span>\n<span class=\"c1\">\/\/ =&gt; This dependent on `Duration` plugin to work<\/span>\n\n<span class=\"c1\">\/\/ .toString() output<\/span>\n<span class=\"c1\">\/\/ =&gt; PT23H59M59S<\/span>\n<span class=\"c1\">\/\/ =&gt; PT23H59M59S<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">formatISODuration<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns\/formatISODuration<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ ESM export is not working<\/span>\n<span class=\"nf\">formatISODuration<\/span><span class=\"p\">({<\/span> <span class=\"na\">hours<\/span><span class=\"p\">:<\/span> <span class=\"mi\">23<\/span><span class=\"p\">,<\/span> <span class=\"na\">minutes<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span><span class=\"p\">,<\/span> <span class=\"na\">seconds<\/span><span class=\"p\">:<\/span> <span class=\"mi\">59<\/span> <span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/=&gt; P0Y0M0DT23H59M59S<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Days in Month\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"k\">new<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nc\">YearMonth<\/span><span class=\"p\">(<\/span><span class=\"mi\">2020<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">daysInMonth<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">new<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nc\">YearMonth<\/span><span class=\"p\">(<\/span><span class=\"mi\">2021<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">daysInMonth<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Moment<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-02<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">YYYY-MM<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">daysInMonth<\/span><span class=\"p\">();<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2021-02<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">daysInMonth<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ DayJS<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-02<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">daysInMonth<\/span><span class=\"p\">();<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2021-02<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">YYYY-MM<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">daysInMonth<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getDaysInMonth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"c1\">\/\/ https:\/\/date-fns.org\/v2.14.0\/docs\/getDaysInMonth<\/span>\n<span class=\"nf\">getDaysInMonth<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"mi\">2020<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n<span class=\"nf\">getDaysInMonth<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"mi\">2021<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n\n<span class=\"c1\">\/\/ Output<\/span>\n<span class=\"c1\">\/\/ =&gt; 29<\/span>\n<span class=\"c1\">\/\/ =&gt; 28<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Compare\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">t1<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-02-20<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">t2<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-03-21<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">compare<\/span><span class=\"p\">(<\/span><span class=\"nx\">t1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">t2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `\u22121` if one comes before two;<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">compare<\/span><span class=\"p\">(<\/span><span class=\"nx\">t2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">t1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `1` if one comes after two.<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">compare<\/span><span class=\"p\">(<\/span><span class=\"nx\">t2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">t2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt;  `0` if one and two are the same;<\/span>\n\n<span class=\"c1\">\/\/ moment &amp; dayjs have similar API<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">m1<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2020-02-20<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">m2<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2020-03-21<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"nx\">m1<\/span><span class=\"p\">).<\/span><span class=\"nf\">isBefore<\/span><span class=\"p\">(<\/span><span class=\"nx\">m2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ =&gt; true<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"nx\">m1<\/span><span class=\"p\">).<\/span><span class=\"nf\">isAfter<\/span><span class=\"p\">(<\/span><span class=\"nx\">m2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ =&gt; false<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">(<\/span><span class=\"nx\">m1<\/span><span class=\"p\">).<\/span><span class=\"nf\">isSame<\/span><span class=\"p\">(<\/span><span class=\"nx\">m1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ =&gt; true<\/span>\n\n<span class=\"c1\">\/\/ date-fns<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">compareAsc<\/span><span class=\"p\">,<\/span> <span class=\"nx\">compareDesc<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">fns1<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-02-20<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">fns2<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2020-03-21<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"nf\">compareAsc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `-1` if the first date is before the second<\/span>\n<span class=\"nf\">compareAsc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `1` if the first date is after the second<\/span>\n<span class=\"nf\">compareAsc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `0` if dates are equal.<\/span>\n<span class=\"nf\">compareDesc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `1` if the first date is before the second<\/span>\n<span class=\"nf\">compareDesc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns1<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `-1` if the first date is after the second<\/span>\n<span class=\"nf\">compareDesc<\/span><span class=\"p\">(<\/span><span class=\"nx\">fns2<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fns2<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; `0` if dates are equal.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  i18n\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Temporal<\/span>\n<span class=\"nx\">Temporal<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">.<\/span><span class=\"nf\">date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toLocaleString<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">es-ES<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">weekday<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">long<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span> <span class=\"c1\">\/\/ =&gt; martes<\/span>\n\n<span class=\"c1\">\/\/ moment (only works loading locale strings separately - 4.04 KB)<\/span>\n<span class=\"nf\">moment<\/span><span class=\"p\">().<\/span><span class=\"nf\">locale<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">es-ES<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">format<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dddd<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; martes<\/span>\n\n<span class=\"c1\">\/\/ dayjs (only works loading locale strings separately - 1.01 KB)<\/span>\n<span class=\"nf\">dayjs<\/span><span class=\"p\">().<\/span><span class=\"nf\">locale<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">es-ES<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">format<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dddd<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/=&gt; martes<\/span>\n\n<span class=\"c1\">\/\/ date-fns only works import locale strings separately - no size info)<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">format<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">es<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">date-fns\/locale<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nf\">format<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(),<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">cccc<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">locale<\/span><span class=\"p\">:<\/span> <span class=\"nx\">es<\/span> <span class=\"p\">});<\/span> <span class=\"c1\">\/\/=&gt; martes<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n\n<h1>\n  \n  \n  Summing up\n<\/h1>\n\n<h3>\n  \n  \n  First impressions\n<\/h3>\n\n<p>As I described before, at the time of writing the <code>Temporal<\/code> proposal is Stage 2, but it is already in very good shape. The functionality covers a wide spectrum of use cases, arithmetic with dates and times, work with different calendar systems, time zones and more.<\/p>\n\n<p>The surface of the API together with all other Intl <code>built-in<\/code> objects play an important role in this long-standing dilemma of dealing with date\/time in the browser together with the internationalization.<\/p>\n\n<p>API is accessible and easy to use and includes good <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n\n<h3>\n  \n  \n  Adoption\n<\/h3>\n\n<p><code>Temporal<\/code> is part of the <code>standards<\/code> and follows the <a href=\"https:\/\/tc39.es\/process-document\/\" rel=\"noopener noreferrer\">TC39 process<\/a> to become part of the ECMAScript language and be implemented in the browsers.<\/p>\n\n<p>The <strong>adoption<\/strong> can start by including the <code>proposal-temporal<\/code> polyfill in your projects  <a href=\"https:\/\/github.com\/tc39\/proposal-temporal\/tree\/main\/polyfill#import-as-a-module\" rel=\"noopener noreferrer\">following the instructions<\/a>.<\/p>\n\n<p><strong><em>Voilaaa!<\/em><\/strong> no more extra dependencies, no more loading locale-specific data and full functionality.<\/p>\n\n<p><a href=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6d9znvwyc0ky46eoxy0d.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6d9znvwyc0ky46eoxy0d.png\" alt=\"Alt Text\"><\/a><\/p>\n\n<p>Remember that a polyfill <a href=\"https:\/\/en.wikipedia.org\/wiki\/Polyfill_(programming)\" rel=\"noopener noreferrer\"><em>\"...is code that implements a feature on web browsers that do not support the feature...\"<\/em><\/a>, if they do support, you won't need it, that\u2019s the big difference from using a library.<\/p>\n\n<blockquote>\n<p>note: specification text, documentation and polyfill at time of writing still under development and should be understood non-production ready.<\/p>\n<\/blockquote>\n\n<h3>\n  \n  \n  Benefits and opportunities\n<\/h3>\n\n<p><strong>for Users<\/strong><\/p>\n\n<ul>\n<li>Simple and ergonomic API to handle date\/time and time zones in the browser<\/li>\n<li>Dependency free(no extra data, no libraries)<\/li>\n<li>Works well with <code>Intl<\/code>, which provides high-quality date and time formatting with many languages and options<\/li>\n<li>Have multiple choices and one that is part of the <code>standards<\/code>\n<\/li>\n<\/ul>\n\n<p><strong>for Libraries<\/strong><\/p>\n\n<ul>\n<li>Stable and lean API to build features on top of<\/li>\n<li>Reduce the need for loading extra data to time zones or locales<\/li>\n<li>Reduced bundle size<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Present\n<\/h3>\n\n<p>All those libraries <code>moment(12.443.725)<\/code>, <code>date-fns(6.499.163)<\/code> and <code>dayJS(1.941.696)<\/code> sum up to 20M weekly downloads, this validates the need of having a solution directly on the language, in the other hand, these figures are a clear indicator about the future impact that <code>Temporal<\/code> will have in the JavaScript landscape.<\/p>\n\n<p>This new API is also paving the base for future improvements on existing ones you have the example of <code>Intl.DisplayNames<\/code> that would benefit from the <code>Temporal<\/code> calendar to provide even more options(<a href=\"https:\/\/github.com\/tc39\/proposal-intl-displaynames\/issues\/75#issuecomment-631744838\" rel=\"noopener noreferrer\">read more here<\/a>).<\/p>\n\n<h3>\n  \n  \n  Future\n<\/h3>\n\n<p><code>Temporal<\/code>, has a marathon ahead of them before is widely accepted, this happened with most of the standards we know <code>_.assign()<\/code> vs <code>Object.assign()<\/code> etc... The transition process requires a well-defined path and then things will follow naturally.<\/p>\n\n<p>I don't see the end of the road for those libraries, but more likely a sensation of accomplishing a goal. Future looks promising and different synergies can come up from this new <code>standard<\/code>.<\/p>\n\n<h3>\n  \n  \n  Help and Feedback\n<\/h3>\n\n<p>Never had been so easy to have a <strong>voice<\/strong> on the standards, you can start by testing, reading the documentation and contribute by filling the <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSeYdvnDZZS6tKn18jiomfN7u_rq-_-_BqOevTzAcfgE3J4kHA\/viewform\" rel=\"noopener noreferrer\">feedback form<\/a> or by opening <a href=\"https:\/\/github.com\/tc39\/proposal-temporal\/issues\/new\" rel=\"noopener noreferrer\">Github issues<\/a> with ideas or feedback that can be helpful to make <code>Temporal<\/code> even better.<\/p>\n\n<p>Overall, I have some concerns with <code>Temporal<\/code>, which I\u2019ve been raising on issues in the issue tracker like <a href=\"https:\/\/github.com\/tc39\/proposal-temporal\/issues\/770\" rel=\"noopener noreferrer\">#770<\/a>, <a href=\"https:\/\/github.com\/tc39\/proposal-temporal\/issues\/772\" rel=\"noopener noreferrer\">#772<\/a>. It remains unclear to me how the transition from JS date libraries to Temporal will work exactly, and so I\u2019ve been participating in the Temporal issue tracker to help find a direction. I hope you\u2019ll share your thoughts as well!<\/p>\n\n\n\n\n<p>\ud83d\udc4f  Kudos to all library authors that kept our backs during this time and to the <code>Temporal<\/code> team that is working hard to make it part of the language. <\/p>\n\n\n\n\n<p>Let me know what you think about this post on <a href=\"https:\/\/twitter.com\/romulocintra\" rel=\"noopener noreferrer\">Twitter<\/a> and I hope you enjoyed it. <\/p>\n\n<p>Thanks to all the people who helped me review this article.<\/p>\n\n","category":["javascript","webdev","i18n","internationalization"]}}}