WAT JavaScript Date

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