Talk on date and time in JS and the future of the Moment.js library.

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