[JS] Operations with Dates

udemy, The Complete JavaScript Course 2021: From Zero to Expert!

JavaScript에서 제공하는 Date objects 활용하기

 

 

 

---

 

 

 

const formatMovementDate = function (date) {
  const calcDayPassed = (date1, date2) =>
    (date2 - date1) / (1000 * 60 * 60 * 24);
  const dayPassed = Math.round(Math.abs(calcDayPassed(date, new Date())));

  if (dayPassed === 0) return 'Today';
  if (dayPassed === 1) return 'Yesterday';
  if (dayPassed <= 7) return `${dayPassed} days ago`;
  
  const year = date.getFullYear();
  const month = `${date.getMonth()}`.padStart(2, 0);
  const day = String(date.getDate()).padStart(2, 0);

  return `${day}/${month}/${year}`;
};

 

function formatMovementsDate에서 date를 받아와서 calcDayPassed와 dayPassed를 이용한다.

 

function calcDayPassed는 두 개의 날짜를 받아서 그 차이를 계산하는 역할을 한다. (1000 * 60 * 60 * 24)는 하루를 Milliseconds로 나타낸 것. 소수점을 덜어낸 상수 dayPassed의 값으로 'Today', 'Yesterday', '@days ago', 그리고 'day/month/year'의 값을 도출한다. 그러면 입출금기록에 따라 보여지는 결과값이 달라진다.

 

 

 

 

 

Intl.DateTimeFormat()

const formatMovementDate = function (date, locale) {
  const calcDayPassed = (date1, date2) =>
    (date2 - date1) / (1000 * 60 * 60 * 24);
  const dayPassed = Math.round(Math.abs(calcDayPassed(date, new Date())));

  if (dayPassed === 0) return 'Today';
  if (dayPassed === 1) return 'Yesterday';
  if (dayPassed <= 7) return `${dayPassed} days ago`;

  return new Intl.DateTimeFormat(locale).format(date);
};

Date obj를 활용해서 위의 코드처럼 날짜를 보이도록 생성할 수도 있지만, Intl.DateTimeFormat API를 통해서 날짜를 생성할 수 있다. 

 

 

 

 

 

JavaScript Date() objects와 Intl.DateTimeFormat 관하여 더 많은 정보를 얻고 싶다면,

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat