{"id":1582,"date":"2023-03-07T22:00:00","date_gmt":"2023-03-07T21:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/momentjs\/"},"modified":"2025-11-28T13:31:44","modified_gmt":"2025-11-28T12:31:44","slug":"momentjs","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/","title":{"rendered":"Moment.js Tutorial"},"content":{"rendered":"<p>Dates are interpreted as local time. Unless instantiated with <code>moment.utc()<\/code>.<\/p>\n<pre><code class=\"language-javascript\">const now = moment(); \/\/ current local time\nconst a = moment('2016-01-05');\nconst b = a.clone().add(1, 'week');\nb.format('YYYY-MM-DD HH:mm:ss');\n<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/moment\/moment\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/moment\/moment.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/moment\/moment\">moment\/moment<\/a>: Parse, validate, manipulate, and display dates in javascript.<\/p>\n<h1 id=\"install\">Install<\/h1>\n<p>Give yourself a moment<\/p>\n<pre><code>npm install moment\n<\/code><\/pre>\n<h1 id=\"parse\">Parse<\/h1>\n<p>Many Moment functions accept a <code>moment-like<\/code> argument. Where moment-like is <code>Moment | String | Number | Date | Array | Object<\/code>.<\/p>\n<h4 id=\"another-date\">Another date<\/h4>\n<p><code>moment(Date)<\/code> and <code>moment(Moment)<\/code> == <code>moment().clone()<\/code><\/p>\n<h4 id=\"an-array\">An array<\/h4>\n<p><code>moment([year, month, day, hour, minute, second, ms])<\/code>. Only year is required. Mirrors date so <strong>month is zero indexed<\/strong>. <code>moment().toArray()<\/code> returns this format.<\/p>\n<h4 id=\"an-object\">An object<\/h4>\n<p><code>moment({year: 2010, month: 3, ...})<\/code> or just <code>moment({y: 1, M: 0, d: 1, h: 0, m: 0, s: 0, ms: 0})<\/code>. Can provide <code>year<\/code>, <code>years<\/code> or <code>y<\/code>. Accepts numbers or strings. <code>date<\/code> is an additional alias for <code>day<\/code>. Note a capital M for months and lowercase m for minutes. <code>moment().toObject()<\/code> returns an object with plural key names (and <code>date<\/code>).<\/p>\n<h4 id=\"a-number--unix-timestamp\">A number \/ Unix timestamp<\/h4>\n<ul>\n<li><code>moment(milliseconds)<\/code>.<\/li>\n<li><code>moment.unix(seconds).utc()<\/code>. Without <code>.utc()<\/code> will create a local date.<\/li>\n<\/ul>\n<h4 id=\"partials\">Partials<\/h4>\n<p><code>moment('15', 'hh')<\/code> == today 15:00:00.000<\/p>\n<h2 id=\"parse-strings\">Parse strings<\/h2>\n<p><code>moment(str)<\/code> accepts <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_8601\">ISO 8601 dates<\/a>. If you\u2019re not using an ISO 8601 date string, provide the format and turn off <code>forgiving mode<\/code> by passing true as the third argument. Otherwise fallback to <code>new Date(str)<\/code> which has varying browser support.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Forgiving mode (default)\nmoment('01-01-2016', 'MM\/DD\/YYYY', false).format();\n\/\/ --&gt; 2016-01-01T00:00:00-06:00\n\n\/\/ Strict mode\nmoment('01-01-2016', 'MM\/DD\/YYYY', true).format();\n\/\/ --&gt; Invalid date\n\n\/\/ Forgiving is very forgiving\nmoment('2016 is a date', 'YYYY-MM-DD').isValid();\n\/\/ --&gt; true because 2016 was matched\n<\/code><\/pre>\n<ul>\n<li>Also accepts an array for allowing multiple formats. First exact hit matches. Docs mention multiple formats is considerably slower.<\/li>\n<li>Third parameter true means <code>strict mode<\/code>. Otherwise <code>forgiving mode<\/code>.<\/li>\n<li>Third parameter could also be the locale ex <code>fr<\/code>. The fourth parameter is then the mode.<\/li>\n<\/ul>\n<h2 id=\"iso-8601-formats\">ISO 8601 formats<\/h2>\n<table class=\"table-code\">\n<thead>\n<tr>\n<th>Example<\/th>\n<th>Remarks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>2019-03-10<\/td>\n<td>Optionally add only hour, or hour:minute<\/td>\n<\/tr>\n<tr>\n<td>2019-03-10T00:04:48+00:00<\/td>\n<td>Can also use a space instead of <code>T<\/code><\/td>\n<\/tr>\n<tr>\n<td>2019-03-10T00:04:48Z<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>2019-03-10T00:04:48.123<\/td>\n<td>Can also use a <code>,<\/code> (comma) instead of a <code>.<\/code> (dot)<\/td>\n<\/tr>\n<tr>\n<td>20190310T000448Z<\/td>\n<td>All formats also work without separator<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>More <a href=\"http:\/\/momentjs.com\/docs\/#\/parsing\/string\/\">exotic ISO 8601 formats<\/a>:<\/p>\n<ul>\n<li><code>2019-W10<\/code>: Week<\/li>\n<li><code>2019-W10-7<\/code>: Date with week number<\/li>\n<li><code>--03-10<\/code>: Date without year<\/li>\n<li><code>2019-069<\/code>: Ordinal date<\/li>\n<\/ul>\n<p class=\"title-url\"><a href=\"http:\/\/momentjs.com\/docs\/#\/parsing\/string-format\/\">Parse Docs<\/a><\/p>\n<h2 id=\"common-formats\">Common formats<\/h2>\n<h4 id=\"dates\">Dates<\/h4>\n<table class=\"table-code no-wrap-first-column\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Description<\/th>\n<th>Remarks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>YYYY YY<\/td>\n<td>Year: 2019 and 19<\/td>\n<td>For YY 68 is the pivoting year. Alter with fn <code>moment.parseTwoDigitYear<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>M MM<\/td>\n<td>Month: 1 and 01<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>D DD<\/td>\n<td>Day: 1 and 01<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Do<\/td>\n<td>Day name: 1st<\/td>\n<td>Ordinal determined by moment.locale()<\/td>\n<\/tr>\n<tr>\n<td>ddd dddd<\/td>\n<td>Day name: Mon and Monday<\/td>\n<td>Determined by moment.locale()<\/td>\n<\/tr>\n<tr>\n<td>MMM MMMM<\/td>\n<td>Month name: Jan and Januari<\/td>\n<td>Determined by moment.locale()<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"times\">Times<\/h4>\n<table class=\"table-code no-wrap-first-column\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Description<\/th>\n<th>Remarks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>H HH<\/td>\n<td>0..23 hours<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>h a<\/td>\n<td>1..12 hours with am\/pm<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>hh A<\/td>\n<td>01..12 hours with AM\/PM<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>m mm<\/td>\n<td>Minutes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>s ss<\/td>\n<td>Seconds<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>S SS SSS<\/td>\n<td>Fractional seconds<\/td>\n<td>Parse up to 9 but only top 3 is considered<\/td>\n<\/tr>\n<tr>\n<td>Z ZZ<\/td>\n<td>Offset from UTC as <code>+-HH:mm<\/code>, <code>+-HHmm<\/code>, or <code>Z<\/code><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"locale-aware\">Locale aware<\/h4>\n<table class=\"table-code no-wrap-first-column\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Example<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>L<\/td>\n<td>04\/09\/1986<\/td>\n<\/tr>\n<tr>\n<td>LL<\/td>\n<td>September 4 1986<\/td>\n<\/tr>\n<tr>\n<td>LLL<\/td>\n<td>September 4 1986 8:30 PM<\/td>\n<\/tr>\n<tr>\n<td>LLLL<\/td>\n<td>Thursday, September 4 1986 8:30 PM<\/td>\n<\/tr>\n<tr>\n<td>LT<\/td>\n<td>08:30 PM<\/td>\n<\/tr>\n<tr>\n<td>LTS<\/td>\n<td>08:30:00 PM<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"other\">Other<\/h4>\n<table class=\"table-code no-wrap-first-column\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>X x<\/td>\n<td>Unix timestamp and Unix ms timestamp<\/td>\n<\/tr>\n<tr>\n<td>Q<\/td>\n<td>Quarter (1..4)<\/td>\n<\/tr>\n<tr>\n<td>DDD DDDD<\/td>\n<td>Day of year: 1..365<\/td>\n<\/tr>\n<tr>\n<td>W ww<\/td>\n<td>ISO week of year and Locale week of year<\/td>\n<\/tr>\n<tr>\n<td>E e<\/td>\n<td>ISO day of week and Locale day of week<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1 id=\"display\">Display<\/h1>\n<ul>\n<li><code>toISOString()<\/code>: Example: <code>2019-04-19T11:57:15.094Z<\/code>. Aliases: <code>toJSON()<\/code> and <code>JSON.stringify(moment())<\/code>.<\/li>\n<li><code>toISOString(keepOffset = false)<\/code>: Passing <code>keepOffset = true<\/code>: <code>2019-04-19T13:57:15.094+02:00<\/code>. Alias: <code>format()<\/code><\/li>\n<li><code>valueOf()<\/code> or <code>+moment()<\/code>: Unix Timestamp (ms). Like Date.valueOf().<\/li>\n<li><code>.unix()<\/code>: Unix Timestamp (s).<\/li>\n<\/ul>\n<p class=\"title-url\"><a href=\"http:\/\/momentjs.com\/docs\/#\/displaying\/format\/\">format Docs<\/a><\/p>\n<h4 id=\"format\">format<\/h4>\n<p>Accepts a string parameter like \u201cParse strings\u201d but with some additional options<\/p>\n<ul>\n<li><code>[literal]<\/code><\/li>\n<li><code>Mo<\/code>: 1st -&gt; 12th month<\/li>\n<li><code>Qo<\/code>: 1st quarter<\/li>\n<li><code>DDDo<\/code>: 1st -&gt; 365th day<\/li>\n<\/ul>\n<p class=\"title-url\"><a href=\"http:\/\/momentjs.com\/docs\/#\/displaying\/fromnow\/\">fromNow Docs<\/a><\/p>\n<h4 id=\"fromnow\">fromNow<\/h4>\n<pre><code class=\"language-javascript\">moment().fromNow(); \/\/ a few seconds ago\nmoment().fromNow(true); \/\/ a few seconds\n<\/code><\/pre>\n<p>There is also:<\/p>\n<ul>\n<li><code>moment().from([, Boolean])<\/code><\/li>\n<li><code>moment().toNow()<\/code><\/li>\n<li><code>moment().to(moment-like[, Boolean])<\/code><\/li>\n<li><a href=\"https:\/\/momentjs.com\/docs\/#\/durations\/humanize\/\"><code>moment.duration(1, 'minutes').humanize()<\/code><\/a>: \u201ca minute\u201d<\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/displaying\/calendar-time\/\"><code>moment().calendar()<\/code><\/a>: Last\/Next Monday, Yesterday, Today, Tomorrow or else <code>DD\/MM\/YYYY<\/code>.<\/li>\n<\/ul>\n<h1 id=\"query\">Query<\/h1>\n<p>All these methods return a <code>Boolean<\/code>.<\/p>\n<pre><code class=\"language-javascript\">moment.isMoment(m);\nmoment.isDate(new Date());\n\nconst m = moment();\nm.isValid();\n\nmoment.max(moment(), moment(), ...);\nmoment.min([moment(), moment()]);\n\nm.isBefore(moment-like = moment(), String = 'milliseconds');\n\/\/ .isAfter()\n\/\/ .isSame(), .isSameOrBefore(), .isSameOrAfter()\n\nm.isBetween(moment-like, moment-like, String = 'milliseconds', String = '()');\n<\/code><\/pre>\n<p>Last parameter of <a href=\"https:\/\/momentjs.com\/docs\/#\/query\/is-between\/\"><code>isBetween<\/code><\/a>:<\/p>\n<ul>\n<li><code>()<\/code>: Both exclusive (default)<\/li>\n<li><code>[]<\/code>: Both inclusive<\/li>\n<li><code>[)<\/code>: First inclusive, second exclusive<\/li>\n<\/ul>\n<h2 id=\"difference\">Difference<\/h2>\n<pre><code class=\"language-javascript\">const m = moment();\n\nm.diff(moment-like = moment(), String = 'milliseconds', Boolean = false);\n\/\/ --&gt; Negative result: m is earlier than first argument. Think \"m - argument &lt; 0\"\n\nm.diff(moment(), 'days');\n\/\/ --&gt; in days, truncated\nm.diff(moment(), 'days', true);\n\/\/ --&gt; result as floating point\n<\/code><\/pre>\n<p class=\"title-url\"><a href=\"https:\/\/momentjs.com\/docs\/#\/durations\/\">Duration Docs<\/a><\/p>\n<h4 id=\"diff-as-a-duration\">Diff as a Duration<\/h4>\n<p><!-- Durations probably deserve their own h1... --> <\/p>\n<pre><code class=\"language-javascript\">const duration = moment.duration(m.diff(m));\nduration.milliseconds(); \/\/ amount of milliseconds in the duration\nduration.asMilliseconds(); \/\/ entire duration in milliseconds\n<\/code><\/pre>\n<p class=\"title-url\"><a href=\"https:\/\/momentjs.com\/docs\/#\/manipulating\">Manipulate Docs<\/a><\/p>\n<h1 id=\"mutate\">Mutate<\/h1>\n<pre><code class=\"language-javascript\">const m = moment();\nm.add(Number, 'days'); \/\/ or just 'd'\nm.add(moment.duration());\nm.add({days: 1, M: 1});\n\/\/ Also: .subtract()\n\nm.startOf('day'); \/\/ year, second, isoWeek, quarter, ...\n\/\/ Also: .endOf()\n<\/code><\/pre>\n<h2 id=\"get--set\">Get + Set<\/h2>\n<p>Overloaded getters\/setters jQuery style. Both singular and plural names exist. Setters mutate the Moment object. Prefer singular names because plural names tend to get deprecated. \ud83d\ude03 (So far: years, months and dates are deprecated)<\/p>\n<pre><code class=\"language-javascript\">const m = moment();\n\n\/\/ getters\nm.second();\n\n\/\/ setters\nm.second(0);\n\n\/\/ for:\n\/\/ .milliseconds() .seconds() .minutes() .hours()\n\/\/ .year() .month() .date()\n\/\/ .dayOfYear() .quarter()\n\n\/\/ .day(Number | String) \/\/ day of the week with 0=Sunday and 6=Saturday\n\/\/ .weekday(Number) \/\/ day of the week, locale aware\n\/\/ .isoWeekday(Number | String) \/\/ day of the week with 1=Monday and 7=Sunday\n\/\/ .weekYear() and .isoWeekYear()\n\/\/ .week() and .isoWeek() \/\/ week of year\n\n\/\/ Getters only\n\/\/ .weeksInYear() and .isoWeeksInYear()\n\/\/ .daysInMonth()\n\/\/ .isLeapYear()\n\/\/ .isDST() \/\/ Is Daylight Saving Time\n\n\/\/ Chaining: order is important\nm.year(1).month(0).date(1);\n\n\n\/\/ get\nm.get('minute'); \/\/ Also 'minutes' and 'm'\nm.get('months'); \/\/ Also 'month' and 'M'\n\n\/\/ set\nm.set('unit', 1);\nm.set({years: 1, M: 2, date: 3}); \/\/ 'day' doesn't work here!\n<\/code><\/pre>\n<h1 id=\"locales\">Locales<\/h1>\n<p class=\"title-url\"><a href=\"https:\/\/momentjs.com\/docs\/#\/i18n\/\">i18n Docs<\/a><\/p>\n<p>By default <code>en<\/code> is loaded.<\/p>\n<pre><code class=\"language-javascript\">require('moment\/locale\/fr'); \/\/ Averages 3-5kb per locale\n\n\/\/ All loaded locales as String[]\nmoment.locales();\n\n\/\/ New default locale for all newly created moments\nmoment.locale('fr');\n\n\/\/ Getter\/Setter jQuery style\nmoment().locale('en');\n<\/code><\/pre>\n<p>Or <a href=\"http:\/\/momentjs.com\/docs\/#\/customization\">customize yourself<\/a><\/p>\n<h4 id=\"special-calendars\">Special calendars<\/h4>\n<ul>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/plugins\/jalaali\/\">Jalaali Calendar<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/plugins\/hijri\/\">Hijri Calendar<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/plugins\/islamic-civil\/\">Islamic Civil Calendar<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/plugins\/taiwan\/\">Taiwan Calendar<\/a><\/li>\n<\/ul>\n<h1 id=\"timezones\">Timezones<\/h1>\n<pre><code class=\"language-javascript\">moment();     \/\/ --&gt; 2019-04-19T17:16:28+02:00\nmoment.utc(); \/\/ --&gt; 2019-04-19T15:16:28Z\nmoment.utc() == moment().utc()\nmoment.utc().local() == moment()\n\nmoment().utcOffset(); \/\/ 120 (in minutes)\n\n\/\/ Converted to local timezone\nmoment('2019-04-19T20:16:28+05:00');\n\/\/ --&gt; 2019-04-19T17:16:28+02:00\n\n\/\/ Keep timezone from input\nmoment.parseZone('2019-04-19T20:16:28+05:00');\n\/\/ --&gt; 2019-04-19T20:16:28+05:00\n<\/code><\/pre>\n<h4 id=\"setting-utcoffset\">Setting utcOffset<\/h4>\n<pre><code class=\"language-javascript\">moment().utcOffset(String | Number, Boolean);\n<\/code><\/pre>\n<ul>\n<li>First parameter\n<ul>\n<li>Strings <code>-00:00<\/code>, <code>+0000<\/code> and <code>Z<\/code><\/li>\n<li><code>-16<\/code> to <code>16<\/code>: A number of hours<\/li>\n<li><code>16-<\/code> or <code>16+<\/code>: A number of minutes<\/li>\n<li>Any ISO8601 formatted string<\/li>\n<\/ul>\n<\/li>\n<li>Second parameter\n<ul>\n<li><code>false<\/code> (default): Keep the same Universal Time, change the local time.<\/li>\n<li><code>true<\/code>: Keep the same local time, change the Universal Time.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1 id=\"plugins\">Plugins<\/h1>\n<p><a href=\"https:\/\/github.com\/rotaready\/moment-range\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/rotaready\/moment-range.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/rotaready\/moment-range\">rotaready\/moment-range<\/a>: Fancy date ranges for Moment.js <a href=\"https:\/\/github.com\/icambron\/twix.js\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/icambron\/twix.js.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/icambron\/twix.js\">icambron\/twix.js<\/a>: A date range plugin for moment.js <a href=\"https:\/\/github.com\/c-trimm\/moment-recur\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/c-trimm\/moment-recur.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/c-trimm\/moment-recur\">c-trimm\/moment-recur<\/a>: A momentjs plugin for matching and generating recurring dates. <a href=\"https:\/\/github.com\/jsmreese\/moment-duration-format\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/jsmreese\/moment-duration-format.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/jsmreese\/moment-duration-format\">jsmreese\/moment-duration-format<\/a>: Format function plugin for the Moment Duration object. <a href=\"https:\/\/github.com\/jmeas\/moment-business\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/jmeas\/moment-business.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/jmeas\/moment-business\">jmeas\/moment-business<\/a>: Utilities for Western workweeks (addWeekDays, isWeekDay, isWeekendDay etc)<\/p>\n<h1 id=\"alternatives\">Alternatives<\/h1>\n<p>If your date needs are few, a few helper methods can save you the Moment (50kb) dependency. There is a reason <code>Date<\/code> is not covered in <a href=\"http:\/\/shop.oreilly.com\/product\/9780596517748.do\">JavaScript: The Good Parts<\/a> though.<\/p>\n<h4 id=\"you-dont-need-moment\">You Don\u2019t Need Moment<\/h4>\n<p><a href=\"https:\/\/github.com\/you-dont-need\/You-Dont-Need-Momentjs\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/you-dont-need\/You-Dont-Need-Momentjs.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/you-dont-need\/You-Dont-Need-Momentjs\">you-dont-need\/You-Dont-Need-Momentjs<\/a>: List of functions which you can use to replace moment.js + ESLint Plugin<\/p>\n<h4 id=\"replace-moment-with-a-smaller-project\">Replace Moment with a smaller project<\/h4>\n<p><a href=\"https:\/\/github.com\/moment\/moment\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/moment\/moment.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/moment\/moment\">moment\/moment<\/a>: This one \ud83d\ude42 <a href=\"https:\/\/github.com\/moment\/luxon\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/moment\/luxon.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/moment\/luxon\">moment\/luxon<\/a>: A library for working with dates and times in JS (7kb) <a href=\"https:\/\/github.com\/date-fns\/date-fns\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/date-fns\/date-fns.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/date-fns\/date-fns\">date-fns\/date-fns<\/a>: \u231b Modern JavaScript date utility library \u231b (13kb). Functional and tree shakeable! <a href=\"https:\/\/github.com\/iamkun\/dayjs\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/iamkun\/dayjs.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/iamkun\/dayjs\">iamkun\/dayjs<\/a>: \u23f0 Immutable date library alternative to Moment.js with the same modern API (2kb) <a href=\"https:\/\/github.com\/hustcc\/timeago.js\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/hustcc\/timeago.js.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/hustcc\/timeago.js\">hustcc\/timeago.js<\/a>: A tiny library used to format date with <code>*** time ago<\/code> statement. eg: \u20183 hours ago\u2019. No dependency &amp; localization &amp; tiny. (2kb)<\/p>\n<h4 id=\"steven-levithan\">Steven Levithan<\/h4>\n<p><a href=\"http:\/\/blog.stevenlevithan.com\/archives\/date-time-format\">JavaScript Date Format<\/a> at his \u201cFlagrant Badassery\u201d blog adds a <code>Date.prototype.format<\/code> function. (2kb)<\/p>\n<p><a href=\"https:\/\/github.com\/felixge\/node-dateformat\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/felixge\/node-dateformat.svg?style=social&amp;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/felixge\/node-dateformat\">felixge\/node-dateformat<\/a>: A node.js package for Steven Levithan\u2019s excellent dateFormat() function.<\/p>\n<h2 id=\"sticking-with-date\">Sticking with Date<\/h2>\n<pre><code class=\"language-javascript\">const pad = value =&gt; ('0' + value).slice(-2);\nconst format = d =&gt; `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n\/\/ --&gt; 2019-04-14 04:14:00\n<\/code><\/pre>\n<h1 id=\"debugging\">Debugging<\/h1>\n<ul>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/utilities\/invalid\"><code>moment().invalid(obj)<\/code><\/a>: Create an \u2018Invalid date\u2019.\n<ul>\n<li><code>moment().parsingFlags()<\/code>: Get details when <code>!isValid()<\/code>.<\/li>\n<li><code>moment().invalidAt(): number<\/code>: 0=years, 1=months, \u2026, 6=milliseconds.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/displaying\/inspect\"><code>moment().inspect(): string<\/code><\/a> == <code>moment(\"2019-04-19T14:12:35.694\")<\/code>.<\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/parsing\/creation-data\"><code>moment().creationData()<\/code><\/a> == <code>{input: string, format: string, locale: Locale, isUTC: boolean, strict: boolean}<\/code>.<\/li>\n<li><a href=\"https:\/\/momentjs.com\/docs\/#\/i18n\/pseudo-locale\/\"><code>moment.locale('x-pseudo')<\/code><\/a><\/li>\n<\/ul>\n<h1>Extras<\/h1>\n<p><b>Other interesting reads<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/devhints.io\/moment\">Moment Cheat Sheet<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/\">Official docs<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/guides\/#\/externalresources\/\">Official Docs: External Resources (videos, blogs, &#8230;)<\/a><\/li>\n<li><a href=\"http:\/\/momentjs.com\/docs\/#\/parsing\/special-formats\/\">Parsing Special Formats which match Html input types<\/a><\/li>\n<li><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1lPzBlmJVAkN6HUw28wBJmY1SdbSInRIBY0JCmBUDUmk\/edit?amp;hl=en_US#gid=0\">Comparison of Date formatting tokens (moment, php, &#8230;)<\/a><\/li>\n<\/ul>\n<h1>Updates<\/h1>\n<ul>\n<li> 8 March 2023: Added notice about MomentJS being in maintenance mode<\/li>\n<\/ul>\n<h1> Package Versions <i class=\"fa fa-info-circle\" style=\"float: right; color: cornflowerblue; font-size: 28px\" title=\"Package versions used for this post and in the accompanying code on Github\"><\/i><\/h1>\n<div><a href=\"https:\/\/github.com\/moment\/moment\" class=\"github\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/github\/stars\/moment\/moment.svg?style=social&#038;label=Star\" \/><\/a><a href=\"https:\/\/github.com\/moment\/moment\">moment\/moment<\/a>: v2.24.0 <\/div>\n","protected":false},"excerpt":{"rendered":"<p class=\"notice--danger\"><strong>Moment.js is a legacy project, now in maintenance mode. In most cases, you should choose a different library.<\/strong><br \/> See some <a href=\"#alternatives\">alternatives<\/a> at the end of this post.<\/p>\n<hr \/>\n<h1 id=\"proceed-at-your-own-peril\">Proceed at your own peril<\/h1>\n<p>Moment.js is a <strong>mutable<\/strong> wrapper with a fluent interface for the native JavaScript date object (property <code>_d<\/code>). Use <code>.toDate()<\/code> to convert back to a JavaScript date.<\/p>\n","protected":false},"author":1,"featured_media":2076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[13,6],"class_list":["post-1582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-cheat-sheet","tag-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Moment.js Tutorial - Itenium<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Moment.js Tutorial - Itenium\" \/>\n<meta property=\"og:description\" content=\"Moment.js is a legacy project, now in maintenance mode. In most cases, you should choose a different library. See some alternatives at the end of this post.Proceed at your own perilMoment.js is a mutable wrapper with a fluent interface for the native JavaScript date object (property _d). Use .toDate() to convert back to a JavaScript date.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Itenium\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-07T21:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-28T12:31:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Usdevelop\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Usdevelop\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/\",\"name\":\"Moment.js Tutorial - Itenium\",\"isPartOf\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg\",\"datePublished\":\"2023-03-07T21:00:00+00:00\",\"dateModified\":\"2025-11-28T12:31:44+00:00\",\"author\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\"},\"breadcrumb\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg\",\"contentUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg\",\"width\":360,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.sidekick.be\/itenium\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Moment.js Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/\",\"name\":\"Itenium\",\"description\":\"We build software. We build careers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\",\"name\":\"Usdevelop\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"caption\":\"Usdevelop\"},\"sameAs\":[\"https:\/\/demo.sidekick.be\/itenium\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Moment.js Tutorial - Itenium","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Moment.js Tutorial - Itenium","og_description":"Moment.js is a legacy project, now in maintenance mode. In most cases, you should choose a different library. See some alternatives at the end of this post.Proceed at your own perilMoment.js is a mutable wrapper with a fluent interface for the native JavaScript date object (property _d). Use .toDate() to convert back to a JavaScript date.","og_url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/","og_site_name":"Itenium","article_published_time":"2023-03-07T21:00:00+00:00","article_modified_time":"2025-11-28T12:31:44+00:00","og_image":[{"width":360,"height":300,"url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg","type":"image\/jpeg"}],"author":"Usdevelop","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Usdevelop","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/","url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/","name":"Moment.js Tutorial - Itenium","isPartOf":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage"},"image":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage"},"thumbnailUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg","datePublished":"2023-03-07T21:00:00+00:00","dateModified":"2025-11-28T12:31:44+00:00","author":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022"},"breadcrumb":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#primaryimage","url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg","contentUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/momentjs.jpg","width":360,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/momentjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.sidekick.be\/itenium\/"},{"@type":"ListItem","position":2,"name":"Moment.js Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/demo.sidekick.be\/itenium\/#website","url":"https:\/\/demo.sidekick.be\/itenium\/","name":"Itenium","description":"We build software. We build careers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022","name":"Usdevelop","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","caption":"Usdevelop"},"sameAs":["https:\/\/demo.sidekick.be\/itenium"]}]}},"_links":{"self":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/comments?post=1582"}],"version-history":[{"count":3,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1582\/revisions"}],"predecessor-version":[{"id":2293,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1582\/revisions\/2293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media\/2076"}],"wp:attachment":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media?parent=1582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/categories?post=1582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/tags?post=1582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}