ㅇㅇㅈ Blog

프론트엔드 수행중

0%

day-library

Posted on Edited on In , ,

Moment 사용해보기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React from 'react';
import moment from 'moment-timezone';
import { useRef, useState } from 'react';

export default function MomentEx() {
  const momentDate = moment();
  const newMomentDate = momentDate.add(1, 'week');
  const cloneNewMomentDate = newMomentDate.clone().add(1, 'week');

  const [day, setDay] = useState('');
  const birthDayRef = useRef(null);
  const handleBirthDayChange = (e) => {
    setDay(moment(e.target.value, 'YYYY-MM-DD').format('dddd'));
  };
  return (
    <div>
      <h1>Moment</h1>
      <div>Immutable Check</div>
      <div>
        {momentDate.format()}
        <br />
        {newMomentDate.format()}
        <br />
        {cloneNewMomentDate.format()}
      </div>
      <br />
      <div>Summer Time (New York)</div>
      <br />
      <div>
        2018년 3월 10일 13시에 하루 더하기 <br />
        {moment
          .tz('2018-03-10 13:00:00', 'America/New_York')
          .add(1, 'day')
          .format()}
      </div>
      <br />
      <div>
        2018년 3월 10일 13시에 하루 더하기 <br />
        {moment
          .tz('2018-03-10 13:00:00', 'America/New_York')
          .add(24, 'hour')
          .format()}
      </div>
      <br />
      <div>Leap year (korea)</div>
      <br />
      <div>
        2017년 1월 1일에 1년 빼기 <br />
        {moment('2017-01-01 ').subtract(1, 'year').format()}
      </div>
      <br />
      <div>
        2017년 1월 1일에 365일 빼기 <br />
        {moment('2017-01-01 ').subtract(365, 'day').format()}
      </div>
      <br />
      <br />
      <div> 한국어로 표기</div>
      <div>{moment('07-17-2021').format('YYYY년 M월 D일')}</div>
      <br />
      <div>두 날짜 비교</div>
      <div>
        <input type='date' ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일 이었을까?</div>
        <div>{day}</div>
      </div>
      <br />
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00는 몇시간 차이인가?</div>
      <div>
        {moment('2021-07-17 03:00').diff(moment('2021-07-18 02:00'), 'hours')}
        시간
      </div>
    </div>
  );
}

Day.js 사용해보기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'react';
import { useRef, useState } from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/ko';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.locale('ko');
dayjs.extend(utc);
dayjs.extend(timezone);

export default function DayJsEx() {
  const [day, setDay] = useState('');
  const birthDayRef = useRef(null);
  const handleBirthDayChange = (e) => {
    setDay(dayjs(e.target.value, 'YYYY-MM-DD').format('dddd'));
  };

  const dayjsDate = dayjs();
  const newDayjsDate = dayjsDate.add(1, 'week');
  const cloneNewDayjs = newDayjsDate.add(1, 'week');
  return (
    <div>
      <h1>DayJS</h1>
      <div>
        {dayjsDate.format()}
        <br />
        {newDayjsDate.format()}
        <br />
        {cloneNewDayjs.format()}
        <br />
        <div>Leap year (korea)</div>
        <br />
      </div>
      <h2>Time Zone</h2>
      <div>{dayjs.tz.guess('2013-11-18 11:55', 'America/Toronto')}</div>
      <br />{' '}
      <div>
        2018년 3월 10일 13시에 하루 더하기 <br />
        {dayjs
          .tz('2018-03-10 13:00:00', 'America/New_York')
          .add(1, 'day')
          .format()}
      </div>
      <div>
        2018년 3월 10일 13시에 하루 더하기 <br />
        {dayjs
          .tz('2018-03-10 13:00:00', 'America/New_York')
          .add(24, 'hour')
          .format()}
      </div>
      <br />
      <br />
      <div>
        2017년 1월 1일에 1년 빼기 <br />
        {dayjs('2017-01-01 ').subtract(1, 'year').format()}
      </div>
      <br />
      <div>
        2017년 1월 1일에 365일 빼기 <br />
        {dayjs('2017-01-01 ').subtract(365, 'day').format()}
      </div>
      <div> 한국어로 표기</div>
      <div>{dayjs('07-17-2021').format('YYYY년 M월 D일')}</div>
      <br />
      <div>
        <input type='date' ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일 이었을까?</div>
        <div>{day}</div>
      </div>
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00는 몇시간 차이인가?</div>
      <div>
        {dayjs('2021-07-17 03:00').diff(dayjs('2021-07-18 02:00'), 'hours')}
        시간
      </div>
    </div>
  );
}

date-fns 사용해보기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from 'react';
import { useRef, useState } from 'react';
import { toDate, format as tzFormat } from 'date-fns-tz';
import { add, format, addWeeks, sub, differenceInHours } from 'date-fns';
import { ko } from 'date-fns/locale';

export default function DateFnsEx() {
  const [day, setDay] = useState('');
  const birthDayRef = useRef(null);
  const handleBirthDayChange = (e) => {
    setDay(format(new Date(e.target.value), 'EEEE', { locale: ko }));
  };

  const dayFnsDate = new Date();
  const newdayFnsDate = add(dayFnsDate, { weeks: 1 });
  const clonedayFnsDate = addWeeks(newdayFnsDate, 1);
  return (
    <div>
      <h1>date-fns</h1>
      <div>
        {format(dayFnsDate, 'yyyy-MM-dd')}
        <br />
        {format(newdayFnsDate, 'yyyy-MM-dd')}
        <br />
        {format(clonedayFnsDate, 'yyyy-MM-dd')}
        <br />
        <div>Leap year (korea)</div>
        <br />
      </div>
      <h2>Time Zone</h2>

      <br />
      <div>
        2018년 3월 10일 13시에 하루 더하기 <br />
        {format(
          add(new Date('2018-03-10 13:00'), { days: 1 }),
          'yyyy-MM-dd HH:mm:ssXXX',
          { timeZone: 'America/New_York' }
        )}
      </div>
      <div>
        2018년 3월 10일 13시에 24시간 더하기 <br />
        {tzFormat(
          add(
            toDate(new Date('2018-03-10 13:00'), {
              timeZone: 'America/New_York',
            }),
            { hours: 24 }
          ),
          'yyyy-MM-dd HH:mm:ssXXX',
          { timeZone: 'America/New_York' }
        )}
      </div>
      <br />
      <br />
      <div>
        2017년 1월 1일에 1년 빼기 <br />
        {format(sub(new Date('2017-01-01'), { years: 1 }), 'yyyy-MM-dd')}
      </div>
      <br />
      <div>
        2017년 1월 1일에 365일 빼기 <br />
        {format(sub(new Date('2017-01-01'), { days: 365 }), 'yyyy-MM-dd')}
      </div>
      <div> 한국어로 표기</div>
      <div>{format(new Date('07-17-2021'), 'yyyy년 M월 d일')}</div>
      <br />
      <div>
        <input type='date' ref={birthDayRef} onChange={handleBirthDayChange} />
        <div>무슨 요일 이었을까?</div>
        <div>{day}</div>
      </div>
      <div>두 날짜 비교</div>
      <div>2021-07-17 03:00 와 2021-07-18 02:00는 몇시간 차이인가?</div>
      <div>
        {differenceInHours(
          new Date('2021-07-17 03:00'),
          new Date('2021-07-18 02:00')
        )}
        시간
      </div>
    </div>
  );
}