date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

date-fns 홈페이지

Installation

npm install date-fns --save
# or
yarn add date-fns

To use submodule features, install the npm package and then import a function from a submodule:

// The main submodule:
import addDays from 'date-fns/addDays'

// FP variation:
import addDays from 'date-fns/fp/addDays'

// UTC variation:
import addDays from 'date-fns/utc/addDays'

// Both FP and UTC:
import addDays from 'date-fns/fp/utc/addDays'

// With tree-shaking enabled:
import { addDays, format } from 'date-fns/fp'

Start using:

import { formatDistance, subDays } from 'date-fns'

formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
//=> "3 days ago"

날짜 더하고 빼기

import { add, format, sub, differenceInHours } from 'date-fns;
// local 설정
import { ko } from 'date-fns/locale';

const dateFnsDate = new Date();

// 일주일 더하기
const newDateFnsDate = add(dateFnsDate, { weeks: 1});

// 일주일 더하기 v2
import addWeeks from 'date-fns/addWeeks';
const newDateFnsDate2 = addWeeks(newDateFnsDate, 1);

// 인풋 요일 찾기
const birthDayRef = useRef(null);
const [day, setDay] = useState("");
const handleBirthDayChange = (event) => {
  setDay(format(new Date(event.target.value), "EEEE", { locale: ko }));
}

return (
  <>
    <div>
    <!-- 년도랑 날짜는 소문자로!! -->
      {format(dateFnsDate, "yyyy-MM-dd")}
    </div>
    <div>
      2017년 1월 1일에 1년 빼기:
      {format(sub(new Date("2017-01-01"), { years: 1 }), "yyyy-MM-dd")}
    </div>
    <div>
      한국어로 표기 (07-17-2021을 2021년 7월 17일로 표기)
      {format(new Date("2017-07-17"), "yyyy년 M월 dd일")}
    </div>
    <div>자기 생일 요일 찾기</div>
      <div>
        <input
          type="date"
          ref={birthDayRef}
          onChange={handleBirthDayChange}
        />
    </div>
    <div>
      2017-07-17 03:00 와 2021-07-18 02:00는 몇시간 차이인가?
      <div>
        {`${differenceInHours(new Date("2021-07-17 03:00"), new Date("2021-07-18 02:00"))}시간`}
      </div>
    </div>
  </>
)