This document discusses issues with the native Date object in JavaScript and how Moment.js addresses these issues. It outlines 5 main problems with Date: 1) UTC and local time context switches are confusing, 2) there is no time zone support, 3) parsing dates from strings is unreliable, 4) formatting options are limited, and 5) date math APIs are bare-bones. It then explains how Moment.js provides clear and reliable functions for parsing, formatting, and manipulating dates while properly handling time zones and edge cases. The future of Moment.js and potential collaboration on a new native Date API in JavaScript is also mentioned.

2. About Me
www.maggiepint.com
@maggiepint
maggiepint@gmail.com

3. var a = new Date('2016-01-04');
a.toString();
" Sun Jan 03 2016 16:00:00 GMT-0800 (PST) "
var a = new Date('1/4/2016');
a.toString();
" Mon Jan 04 2016 00:00:00 GMT-0800 (PST) "

4. Brokens!
1. UTC and Local Context Switches
2. NoTime Zone Support
3. Parsing (all of it)
• The spec is a disaster
4. Formatting
5. Math APIs

5. MOMENT.JS
Quality Date andTime in Javascript

6. Facts
• Primary Date andTime Library for JavaScript
• Community Based
• 5Years Old
• 5 Core Maintainers and 1 Author Emeritus
• All part-time, unpaid
• No Corporate backing
• 28,157 Stars
• 3,961 Forks
• 6,676,292 NPM Downloads In the Last Month
• 10th Most Depended Upon NPM Package

7. FIXING DATE
10 Days for aWhole Language

8. BROKEN 1: UTC AND
LOCAL

9. 5 O'clock Somewhere

10. PERSPECTIVE
We all see dates and times from different angles

11. The GlobalTimeline
1 2 3 4 5 6 7 8 9
Point in absolute time

12. Coordinated UniversalTime (UTC)
• A perspective of the global timeline
• Allows us to keep track of absolute time
• Primary standard by which the world regulates clocks
• Defined precisely by scientific community
• Has no relationship to geography

13. LocalTime
• A local time is a perspective of time
• It does not represent a point on the global timeline
• It is usually not a contiguous timeline (DST)

14. UTC Time:
2016-04-09T14:17:47Z
What we know
• The point in absolute time
• Whether this time is before or after
another point in time
What we don’t know
• Whether it is morning or night
• What day of the week it is

15. LocalTime:
Saturday,April 9, 2016 9:11 AM
We Know
• It is Saturday
• It is morning
We Don’t Know
• What point this is on the global
timeline
• Whether it is before or after a time
from a different locality
• What the time will be if we add one
hour to this time

16. var a = new Date(Date.UTC(2016,0,1));
a.setUTCDate(3);
a.toISOString(); //if you want local, must use different function
//"2016-01-03T00:00:00Z"
moment.utc(‘2016-01-01’).date(3).format();
//"2016-01-03T00:00:00Z"

17. BROKEN 2:TIME ZONES
There’s no support in Date. Does it matter?

18. Time Zone Basics
• A time zone is a region that observes a uniform standard time
• A time zone is defined by a set of offsets from UTC
• Offsets are typically in one hour intervals, but not always
• Nepal StandardTime is UTC +5:45
• Time zones frequently have multiple offsets
• There are two main resources for time zones
• Internet Assigned Numbers Authority (IANA)
• WindowsTime Zones
• IANA time zones are more widely used, and more accurate

19. Time Zone: America/Chicago

20. Politics
• Time zones are inherently political
• Governments change time zones regularly
• Governments change time zones suddenly
• In 2016 Egypt decided to do DST 3 months ahead of time, and cancelled it 2 weeks
ahead of time
• The actual time on computers was erratic
• Morocco has 4 transitions due to Ramadan
• Assume nothing

21. Time Zones are not Offsets!
"2016-04-09T19:39:00-05:00“
This date could be in:
• America/Chicago
• America/Bahia_Banderas
• America/Bogata
• America/Cancun
• America/Cayman
• And more

22. Time Zones (With MomentTimeZone)
moment.tz('2016-04-25T02:30:00Z', 'America/Los_Angeles').format()
"2016-04-24T19:30:00-07:00"
moment.tz('2016-04-25T02:30:00Z', 'Europe/Berlin').format()
"2016-04-25T04:30:00+02:00"

23. BROKEN 3: PARSING
It’s really, really, really broken

24. Parsing
• JavaScript date will not reliably parse any format
• It tries to reliably parse ISO8601 ("2016-01-03T00:00:00.000Z”) but fails
• The rules for ISO8601 are completely unintuitive
• “When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-
time forms are interpreted as a local time.”

25. var a = new Date('2016-01-04');
a.toString();
" Sun Jan 03 2016 16:00:00 GMT-0800 (PST) "
var a = new Date('1/4/2016');
a.toString();
" Mon Jan 04 2016 00:00:00 GMT-0800 (PST) "
var a = new Date('2016-01-04T00:00:00');
a.toString();
" Sun Jan 03 2016 16:00:00 GMT-0800 (PST)” //Chrome
“Mon Jan 04 2016 00:00:00 GMT-0800 (PST)” //Firefox

26. moment('2016-12-21T13:25:22').format()
"2016-12-21T13:25:22-06:00"
moment('30/04/2016', 'DD/MM/YYYY').format()
"2016-04-30T00:00:00-05:00"
moment('February 25, 2016', 'MMMM DD, YYYY').format()
"2016-02-25T00:00:00-06:00"
moment('octubre 25, 2016', 'MMMM DD, YYYY', 'es').format()
"2016-10-25T00:00:00-05:00"

27. BROKEN 4:
FORMATTING
Your UX person just CAN’T DEAL

28. Formatting
• JavaScript Date offers very limited formatting options
• .toString
• .toDateString
• .toLocaleString
• .toLocaleDateString
• .toLocaleTimeString
• .toLocaleFormat
• .toISOString

29. moment().format('MM/DD/YYYY')
"04/26/2016"
moment().format('MMMM D, YYYY hh:mm a')
"April 26, 2016 09:26 pm"
moment().format('YYYY-MM')
“2016-04”

30. moment().format('LLL')
"April 26, 2016 9:28 PM"
moment().format('L')
"04/26/2016"
moment().locale('en-gb').format('L')
"26/04/2016"
moment().locale('ar').format('LLL')
"٢٦‫أبريل‬ ‫نيسان‬٢٠١٦٢١:٣١"

31. BROKEN 5: MATH
There are bad APIs, and then there are BAD APIs

32. Math
• JavaScript Date APIs for Math are very bare-bones
• This frequently causes unintuitive and wrong code
• Moment increases your ability to write readable code

33. As Seen on Stack Overflow
var startHours = 8;
var startMinutes = 30;
var ed = new Date();
var endHours = ed.getHours();
var endMinutes = ed.getMinutes();
var elapsedMinutes = (endHours * 60 + endMinutes) - (startHours * 60 +
startMinutes);
console.log(elapsedMinutes);

34. moment().diff(moment(’08:30’, ’HH:mm’), ’minutes');
As Seen on Stack Overflow:With Moment

35. var a = new Date();
a.setDate(a.getDate() - 5);
moment().subtract(5, 'days');

36. var d = new Date();
var diff = d.getDate() - d.getDay() + (day == 0 ? -6:1);
d.setDate(diff);
d.setHours(0,0,0,0);
moment().startOf('week')

37. var d1 = new Date();
var d2 = new Date(‘01/01/2016’);
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth() + 1;
months += d2.getMonth();
var diff = months <= 0 ? 0 : months;
moment().diff('2016-01-01', 'months');

39. moment('2016-03-12 12:00').add(1, 'day').format('LLL')
"March 13, 2016 12:00 PM"
moment('2016-03-12 12:00').add(24,'hour').format('LLL')
"March 13, 2016 1:00 PM"

40. moment('2016-02-28').add(365, 'days').format('LLL')
"February 27, 2017 12:00 AM"
moment('2016-02-28').add(1, 'year').format('LLL')
"February 28, 2017 12:00 AM"
Assuming there were 365 days in a year caused every 30GB Zune to break on December 31, 2008

41. moment('2016-01-01').add(1.5, 'hours').format('LLL')
"January 1, 2016 1:30 AM“
moment('2016-01-01').add(1.5, 'days').format('LLL')
"January 3, 2016 12:00 AM"

42. Time Math vs Date Math
Time math:
• Refers to operations involving hours, minutes, seconds, milliseconds
• Works by incrementing or decrementing the position on the global timeline by the number of
units in question
• Can use fractional units
Date Math:
• Refers to all operations larger than hours – days, months, years, quarters, etc.
• Works by moving places on the calendar
• Cannot be converted to time math
• Cannot use fractional units

43. THE FUTURE
We don’t have a DeLorean

44. Roadmap
• V3
• New Build Process
• Immutability
• V4
• Modularity
• Internal refactor of time zoneAPIs

45. TC39 Collaboration
• Working with BrianTerlson to create a new DateTime API in JavaScript
• Favoring basing API on the JodaTime family of Date APIs
• Hope to port Moment to live on top of the new API when it is available

46. Find Us!
• www.momentjs.com
• @momentjs
• @timtamiam –Tim Wood (Author)
• @maggiepint – Maggie Pint
• @mj1856 – Matt Johnson
• @icambron – Isaac Cambron
• Iskren Chernev
• Lucas Sanders