$30 off During Our Annual Pro Sale. View Details »

WAT JavaScript Date

othree
August 10, 2017

WAT JavaScript Date

othree

August 10, 2017
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. .(6a6&;YGU]6]?
    S]EY??

    View Slide

  2. O?
    㗢 S]EY??SQQ]?YQ?]
    㗢 E]]U[㗣㘍㘍9MSC㗿S]EY??㗿Q?]
    㗢 .?9&]6Q=6Y=SMMSd?Y㗦YSQ]?Q=
    QCGQ??Y
    㗢 &* 㗦&㗦&㗦 㗿㗿㗿

    View Slide

  3. .(6a6&;YGU]6]?

    View Slide

  4. .(6a6&;YGU]6]?

    View Slide

  5. “Wat” is a variant of the English word “what” that is often
    used to express confusion or disgust, much like its better
    known acronym “WTF,” short for “what the fuck.”
    http://knowyourmeme.com/memes/wat

    View Slide

  6. 0.1 + 0.2

    View Slide

  7. 0.1 + 0.2
    // 0.30000000000000004

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. https://www.destroyallsoftware.com/talks/wat

    View Slide

  17. .(6a6&;YGU]6]?

    View Slide

  18. // Firefox latest
    new Date("2005-07-08");

    View Slide

  19. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z

    View Slide

  20. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    new Date("2005/07/08");

    View Slide

  21. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    new Date("2005/07/08");
    // Date 2005-07-07T16:00:00.000Z

    View Slide

  22. View Slide

  23. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    // July 8th 00:00 UTC
    new Date("2005/07/08");
    // Date 2005-07-07T16:00:00.000Z
    // July 8th 00:00 local time

    View Slide

  24. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    // July 8th 00:00 UTC
    new Date("2005/07/08");
    // Date 2005-07-07T16:00:00.000Z
    // July 8th 00:00 local time
    (Date.parse("2005-07-08") - Date.parse("2005/07/08")) / 36e5
    // 8 hours

    View Slide

  25. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    // July 8th 00:00 UTC
    new Date("2005/07/08");
    // Date 2005-07-07T16:00:00.000Z
    // July 8th 00:00 local time
    (Date.parse("2005-07-08") - Date.parse("2005/07/08")) / 36e5
    // 8 hours
    // Chrome latest
    new Date("2005-07-08");

    View Slide

  26. // Firefox latest
    new Date("2005-07-08");
    // Date 2005-07-08T00:00:00.000Z
    // July 8th 00:00 UTC
    new Date("2005/07/08");
    // Date 2005-07-07T16:00:00.000Z
    // July 8th 00:00 local time
    (Date.parse("2005-07-08") - Date.parse("2005/07/08")) / 36e5
    // 8 hours
    // Chrome latest
    new Date("2005-07-08");
    // Fri Jul 08 2005 08:00:00 GMT+0800 (CST)
    // July 8th 00:00 local time

    View Slide

  27. View Slide

  28. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);

    View Slide

  29. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z

    View Slide

  30. View Slide

  31. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z
    // 2 -> March, 0 based

    View Slide

  32. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z
    // 2 -> March, 0 based
    // UTC Time: 03/02 16:00
    // UTC+8 Time: 03/03 00:00

    View Slide

  33. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z
    // 2 -> March, 0 based
    // UTC Time: 03/02 16:00
    // UTC+8 Time: 03/03 00:00
    theday.getDate()
    // 3
    theday.getUTCDate()
    // 2

    View Slide

  34. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z
    // 2 -> March, 0 based
    // UTC Time: 03/02 16:00
    // UTC+8 Time: 03/03 00:00
    theday.getDate()
    // 3
    theday.getUTCDate()
    // 2
    new Date(2017, 2, 3, 8, 0, 0, 0);
    // Date 2017-03-03T00:00:00.000Z

    View Slide

  35. // Firefox
    var theday = new Date(2017, 2, 3, 0, 0, 0, 0);
    // Date 2017-03-02T16:00:00.000Z
    // 2 -> March, 0 based
    // UTC Time: 03/02 16:00
    // UTC+8 Time: 03/03 00:00
    theday.getDate()
    // 3
    theday.getUTCDate()
    // 2
    new Date(2017, 2, 3, 8, 0, 0, 0);
    // Date 2017-03-03T00:00:00.000Z
    new Date(Date.UTC(2017, 2, 3, 8, 0, 0, 0));
    // Date 2017-03-03T08:00:00.000Z

    View Slide

  36. var d = new Date(2016, 12, 31);
    d.setMonth(d.getMonth() + 1);
    d.toISOString();

    View Slide

  37. new Date('0');
    new Date(0);
    new Date(0, 0);
    new Date(0, 0, 0);

    View Slide

  38. View Slide

  39. [[_?[
    㗢 Y?CSYG6Q;6M?Q=6YSQMh
    㗢 _]69M?㗦 SSY =?[GCQ
    㗢 㖍96[?=OSQ]E
    㗢 *Q?fU?;]?=U6Y[?Y9?E6aGSY
    㗢 S(GO?4SQ?6Q=&([_UUSY]
    㗢 S=_Y6]GSQ㗦U?YGS=

    View Slide

  40. (E?6]?9I?;]
    㗢 S;E6QC?[GQ;?6a6&;YGU]㖎㗿㖍
    㗢 6[?=SQ6a6㖎9?]66]㖎㖖㖖㖒
    㗢 I6a6㗿_]GM㗿6]?

    View Slide

  41. https://twitter.com/BrendanEich/status/481939099138654209

    View Slide

  42. (E?6]?
    㗢 S;E6QC?[GQ;?6a6&;YGU]㖎㗿㖍
    㗢 6[?=SQ6a6㖎9?]66]㖎㖖㖖㖒
    㗢 I6a6㗿_]GM㗿6]?
    㗢 6a6㖎㗿㖍Y?M?6[?=6]6Q㖎㖖㖖㖓
    㗢 ?UY?;6]?=6MOS[]?Q]GY?6]?GQ6a6㖎㗿㖎6]?9㖎㖖㖖㖔

    View Slide

  43. https://www.cs.princeton.edu/courses/archive/fall97/cs461/jdkdocs/relnotes/deprecatedlist.html

    View Slide

  44. https://www.cs.princeton.edu/courses/archive/fall97/cs461/jdkdocs/relnotes/deprecatedlist.html

    View Slide

  45. 6]?㛱(GO?

    View Slide

  46. 6]?㛱(GO?
    㗢 ?6Uh?6Y㗦M?6U[?;SQ=
    㗢 (GO?jSQ?
    㗢 6M?Q=6Y[
    㗢 &(
    㗢 6]E
    㗢 S;6MGj6]GSQ

    View Slide

  47. 6]E
    㗢 ==㖏OSQ]E]S㖎㘍㖐㖎

    View Slide

  48. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");

    View Slide

  49. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");
    thedate.add(2, 'months').format();

    View Slide

  50. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");
    thedate.add(2, 'months').format();
    // "2017-03-31T00:00:00+08:00"

    View Slide

  51. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");
    thedate.add(2, 'months').format();
    // "2017-03-31T00:00:00+08:00"
    thedate.add(1, 'months').add(1, 'months').format();

    View Slide

  52. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");
    thedate.add(2, 'months').format();
    // "2017-03-31T00:00:00+08:00"
    thedate.add(1, 'months').add(1, 'months').format();
    // "2017-03-28T00:00:00+08:00"

    View Slide

  53. // momentjs
    var thedate = moment("20170131", "YYYYMMDD");
    thedate.add(2, 'months').format();
    // "2017-03-31T00:00:00+08:00"
    thedate.add(1, 'months').add(1, 'months').format();
    // "2017-03-28T00:00:00+08:00"
    thedate.add(1, 'months').format();
    // "2017-02-28T00:00:00+08:00"

    View Slide

  54. (GO?4SQ?
    㗢 *(]GO?;E6QC?[㖎ES_YASYd6Y=6Q=96;Kd6Y=
    ;SYY?[USQ=GQC]S6㖎㙐ES_Y=GAA?Y?Q;?GQO?6Q[SM6Y]GO?
    ASY?a?Yh㖎㖒=?CY??[
    https://www.timeanddate.com/time/time-zones.html

    View Slide

  55. (GO?4SQ?
    㗢 [G6㘍69_M 㚗㖍㖑㗣㖐㖍

    View Slide

  56. (GO?4SQ?
    㗢 [G6㘍69_M 㚗㖍㖑㗣㖐㖍
    㗢 [G6㘍6]O6Q=_ 㚗㖍㖒㗣㖑㖒

    View Slide

  57. 6hMGCE]&6aGQC(GO?
    㗢 ۃႌͧ⯇ႏᯒ߭ॶ⤼౟î৩჋
    㗢 ᘔ৫ʼnଋᡦႫ
    㗢 ἥῲᡦႫ᫨≡ᙩᖵ⇖

    View Slide

  58. // moment.js
    moment.tz("2014-02-09T02:30", "US/Pacific").format()
    // "2014-02-09T02:30:00-08:00"

    View Slide

  59. // moment.js
    moment.tz("2014-02-09T02:30", "US/Pacific").format()
    // "2014-02-09T02:30:00-08:00"
    moment.tz("2014-03-09T02:30", "US/Pacific").format()
    // "2014-03-09T03:30:00-07:00"

    View Slide

  60. // moment.js
    moment.tz("2014-02-09T02:30", "US/Pacific").format()
    // "2014-02-09T02:30:00-08:00"
    moment.tz("2014-03-09T02:30", "US/Pacific").format()
    // "2014-03-09T03:30:00-07:00"
    // Daylight Saving Time

    View Slide

  61. https://time.is/en/PT

    View Slide

  62. (GO?4SQ?6]696[?
    㗢 9h6aG=M[SQ
    㗢 SdSU?Y6]?[9h
    㗢 ?AGQG]GSQSA6]GO?jSQ?
    㗢 6O?[SA]GO?jSQ?[
    㗢 6hMGCE][6aGQC]GO?㘵&(㘸Y_M?[
    㗢 ?6U[?;SQ=

    View Slide

  63. https://www.iana.org/time-zones

    View Slide

  64. S;6MGj6]GSQ
    㗢 㖏㖍㖎㖔㘍㖍㖔㘍㖍㖖㙐(6Gd6Q
    㗢 㖍㖔㘍㖍㖖㘍㖏㖍㖎㖔㙐*&
    㗢 㖍㖖㘍㖍㖔㘍㖏㖍㖎㖔㙐SYS;;S
    㗢 㖍㖖㗿㖍㖔㗿㖏㖍㖎㖔㙐?YO6Q
    㗢 㖍㖖㙐㖍㖔㙐㖏㖍㖎㖔㙐_];E
    㗢 ٠٩㘍٠٧㘍٢٠١٧㙐Y69G;

    View Slide

  65. 6M?Q=6Y[
    㗢 Y?CSYG6Q6M?Q=6Y
    㗢 Ⱑᄞ㘶_Q6Y6M?Q=6Y㘹
    㗢 ᒧڳᄞ
    㗢 [M6OG;6M?Q=6Y

    View Slide

  66. G9Y6Yh]S]E?$?[;_?

    View Slide

  67. G9Y6YG?[

    View Slide

  68. G9Y6YG?[
    㗢 SO?Q]㗿I[
    㗢 =6]?㙐AQ[
    㗢 I[㙐IS=6

    View Slide

  69. View Slide

  70. SO?Q]㗿I[
    㗢 _MMA_Q;]GSQ=6]?]GO?MG9Y6Yh
    㗢 &_UUSY][㗣
    㗢 U?YGS=㗦=_Y6]GSQ
    㗢 ]GO?jSQ?㘵]j=9㘸
    㗢 G㖎㖕Q㘵dSYKGQCSQ$㘸

    View Slide

  71. View Slide

  72. =6]?㙐AQ[
    㗢 *[?A_MA_Q;]GSQ[]SdSYKdG]E6]?S9I?;]
    㗢 S=_M6YGj?=[O6MMA_Q;]GSQ[
    㗢 OO_]69M?
    㗢 G㖎㖕Q

    View Slide

  73. import addMonths from 'date-fns/add_months'
    var thedate = new Date(2017, 0, 31);
    addMonths(thedate, 2);

    View Slide

  74. View Slide

  75. I[㙐IS=6
    㗢 6a6S=6㙐(GO? GOUM?O?Q]6]GSQSQ6a6&;YGU]
    㗢 9I?;]96[?= =?[GCQ

    View Slide

  76. S=6㙐(GO?
    㗢 9h&]?UE?QSM?9S_YQ?6]㖏㖍㖍㖏
    㗢 ć၏Ŕ„
    㗢 CSSCM?㗣㘍㘍ᆱȍ⍝S=6

    View Slide

  77. var thedate = LocalDate.parse('2017-01-31').atStartOfDay();
    var after2m = thedate.plusMonths(2);
    after2m.toString();
    // "2017-03-31T00:00"
    var sixtydays = Duration.ofDays(60);
    thedate.plus(sixtydays).toString();
    // "2017-04-01T00:00"
    ZonedDateTime.now(ZoneId.of('Europe/Paris')).toString();
    // "2017-02-04T17:01:15.846+01:00[Europe/Paris]"

    View Slide

  78. View Slide

  79. (Sd6Y=]SGf
    6a6&;YGU]6]?

    View Slide

  80. (SGf6a6&;YGU]
    㗢 S]69M?]S;E6QC?SM=[]_AA
    㗢 Y?6]?Q?d]EGQC[G[㘵6MOS[]㘸SK

    View Slide

  81. (SGf6a6&;YGU]
    㗢 S]69M?]S;E6QC?SM=[]_AA
    㗢 Y?6]?Q?d]EGQC[G[㘵6MOS[]㘸SK
    㗢 Y?6]?6Q?d6]?

    View Slide

  82. ]?OUSY6M

    View Slide

  83. ]?OUSY6M
    㗢 ?dUYSUS[6M
    㗢 S=6MGK? =?[GCQ
    㗢 6CCG? GQ]㘵G;YS[SA]㘸
    㗢 6]]SEQ[SQ㘵G;YS[SA]㗦6_]ESYSASO?Q]㗿I[㘸
    㗢 YG6Q(?YM[SQ㘵G;YS[SA]㘸

    View Slide

  84. https://github.com/tc39/proposal-temporal

    View Slide

  85. ]?OUSY6M

    &;YGU]&]6C?㖎
    㗢 Q6;]Ga?=?a?MSUO?Q]QSd
    㗢 I[㙐IS=6MGK? 㘵ASYQSd㘸
    㗢 QG]E_9

    View Slide

  86. ?6]_Y?[
    㗢 㖎96[?=OSQ]E
    㗢 OO_]69M?
    㗢 (GO?jSQ?[_UUSY]
    㗢 ?]]?Y

    View Slide

  87. SY?SQ;?U][
    㗢 Q[]6Q]
    㗢 ?YGS=
    㗢 _Y6]GSQ

    View Slide

  88. var ldt = new temporal.LocalDateTime(2017, 12, 31, 23, 59);
    var addHours = new temporal.LocalDateTime(
    2017, 12, 31, 23, 00).add(2, 'hours');
    var zdt = new temporal.ZonedDateTime('America/New_York',
    2017, 12, 31, 23, 59);

    View Slide

  89. var ldt = new CivilDateTime(2017, 12, 31, 23, 59);
    var addHours = new CivilDateTime(2017, 12, 31, 23, 00)
    .add(2, 'hours');
    var zdt = ldt.withZone(‘America/New_York');

    View Slide

  90. (6K?_]
    㗢 6]?㗦]GO?G[;SOUM?f
    㗢 6a6&;YGU]6]?G[9YSK?Q
    㗢 SSY 㗦QS]GO?jSQ?㗦M6;KSA;SQ;?U][
    㗢 *[?MG9Y6YG?[
    㗢 ?MUAGfG]㘵]?OUSY6M㘸

    View Slide

  91. (E6QK[

    View Slide