{"id":304,"date":"2023-01-11T05:00:00","date_gmt":"2023-01-11T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=304"},"modified":"2023-01-10T15:27:15","modified_gmt":"2023-01-10T23:27:15","slug":"how-to-do-advanced-date-formatting","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-do-advanced-date-formatting\/","title":{"rendered":"How to do advanced date formatting?"},"content":{"rendered":"\n<p>This week, we covered <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/date-pipe-default-format-and-timezone\/\" target=\"_blank\" rel=\"noopener\" title=\"\">basic date formatting with the <code>date<\/code> pipe<\/a> and <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/formatting-functions-in-angular\/\" target=\"_blank\" rel=\"noopener\" title=\"\">the <code>dateFormat<\/code> function<\/a>. While those tools work perfectly well for most basic scenarios, there are times when we want to do more complex date manipulation, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adding\/subtracting days to a date<\/li>\n\n\n\n<li>Displaying a duration, such as: &#8220;<em>Last update: 2 days ago<\/em>&#8220;<\/li>\n\n\n\n<li>Comparing dates<\/li>\n<\/ul>\n\n\n\n<p>Most people use Moment.js for such use cases, but <a href=\"https:\/\/momentjs.com\/docs\/#\/-project-status\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Moment.js is now officially done<\/a> and in maintenance mode.<\/p>\n\n\n\n<p>One of the best alternatives available is <a href=\"https:\/\/date-fns.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">date-fns<\/a>. It uses modern Javascript and relies on the native Date object as much as possible. If you&#8217;ve used Moment.js in the past, <code>date-fns<\/code> is going to look very familiar:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { format, formatDistance, formatRelative, subDays } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'date-fns'<\/span>\n\nformat(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(), <span class=\"hljs-string\">\"'Today is a' eeee\"<\/span>)\n<span class=\"hljs-comment\">\/\/=&gt; \"Today is a Friday\"<\/span>\n\nformatDistance(subDays(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(), <span class=\"hljs-number\">3<\/span>), <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(), { <span class=\"hljs-attr\">addSuffix<\/span>: <span class=\"hljs-literal\">true<\/span> })\n<span class=\"hljs-comment\">\/\/=&gt; \"3 days ago\"<\/span>\n\nformatRelative(subDays(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>(), <span class=\"hljs-number\">3<\/span>), <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>())\n<span class=\"hljs-comment\">\/\/=&gt; \"last Friday at 7:26 p.m.\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The library contains some interesting helper functions, such as <code><a href=\"https:\/\/date-fns.org\/v2.29.3\/docs\/closestTo\" target=\"_blank\" rel=\"noopener\" title=\"\">closestTo<\/a><\/code> to get which date in an array is the closest to a given date, or <code><a href=\"https:\/\/date-fns.org\/v2.29.3\/docs\/formatDistanceToNow\" target=\"_blank\" rel=\"noopener\" title=\"\">formatDistanceToNow<\/a><\/code>, which returns meaningful, readable distances such as &#8220;less than a minute&#8221; or &#8220;about one month.&#8221;<\/p>\n\n\n\n<p>These features are independent functions, which is excellent for Angular applications as it allows tree-shaking at build time (only the functions we need are included in our build output), compared to Moment, which had one single <code>moment()<\/code> function that had everything in it, preventing proper tree-shaking.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week, we covered basic date formatting with the date pipe and the dateFormat function. While those tools work perfectly well for most basic scenarios, there are times when we want to do more complex date manipulation, such as: Most people use Moment.js for such use cases, but Moment.js is now officially done and in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-304","post","type-post","status-publish","format-standard","hentry","category-date-formatting"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/304\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}