Embed Size (px)
Citation preview
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) "
Brokens!1. UTC and Local Context Switches2. No Time Zone Support3. Parsing (all of it)
• The spec is a disaster4. Formatting 5. Math APIs
MOMENT.JSQuality Date and Time in Javascript
Facts• Primary Date and Time Library for JavaScript• Community Based• 5 Years 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
FIXING DATE10 Days for a Whole Language
BROKEN 1: UTC AND LOCAL
5 O'clock Somewhere
PERSPECTIVEWe all see dates and times from different angles
The Global Timeline
1 2 3 4 5 6 7 8 9
Point in absolute time
Coordinated Universal Time (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
Local Time• 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)
UTC Time:2016-04-09T14:17:47ZWhat 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
Local Time: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
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"
BROKEN 2: TIME ZONES
There’s no support in Date. Does it matter?
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 Standard Time is UTC +5:45• Time zones frequently have multiple offsets• There are two main resources for time zones
• Internet Assigned Numbers Authority (IANA)• Windows Time Zones
• IANA time zones are more widely used, and more accurate
Time Zone: America/Chicago
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
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
Time Zones (With Moment TimeZone)
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"
BROKEN 3: PARSINGIt’s really, really, really broken
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.”
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
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"
BROKEN 4: FORMATTING
Your UX person just CAN’T DEAL
Formatting• JavaScript Date offers very limited formatting options
• .toString• .toDateString• .toLocaleString• .toLocaleDateString• .toLocaleTimeString• .toLocaleFormat• .toISOString
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”
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')" أبريل ٢٦ ٢١: ٢٠١٦نيسان ٣١ "
BROKEN 5: MATHThere are bad APIs, and then there are BAD APIs
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
As Seen on Stack Overflowvar 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);
moment().diff(moment(’08:30’, ’HH:mm’), ’minutes');
As Seen on Stack Overflow: With Moment
var a = new Date();a.setDate(a.getDate() - 5);
moment().subtract(5, 'days');
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')
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');
But Still, Use Caution!
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"
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
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"
Time Math vs Date MathTime 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
THE FUTUREWe don’t have a DeLorean
Roadmap• V3
• New Build Process• Immutability
• V4• Modularity• Internal refactor of time zone APIs
TC39 Collaboration• Working with Brian Terlson 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
Find Us!• www.momentjs.com• @momentjs• @timtamiam – Tim Wood (Author)• @maggiepint – Maggie Pint• @mj1856 – Matt Johnson• @icambron – Isaac Cambron• Iskren Chernev• Lucas Sanders
