JavaScript에서 날짜 형식 지정

날짜와 관련하여 우리는 종종 간단한 날짜 형식을 지정하기 위해 Moment.js 또는 Luxon과 같은 큰 라이브러리를 추가합니다. 그러나 실제로는 toLocalDateString() 메서드를 사용하는 것보다 훨씬 간단합니다. 패키지를 설치할 필요가 없습니다. 그냥 작동

아래 예제에서는 Vue를 사용하므로 formatDate()라는 메서드를 만들고 형식을 지정할 날짜를 전달합니다. 그런 다음 날짜를 표시하는 방법에 대한 옵션을 설정합니다. 이것은 예를 들어 월을 숫자로 할지 아니면 길게 할지 선택할 수 있는 객체입니다. 그런 다음 형식을 지정하려는 날짜를 전달하는 새 날짜를 반환합니다. 그런 다음 사용하려는 언어와 옵션을 차례로 전달하는 toLocalDateString() 메서드를 연결합니다.

<script>
export default {
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString('en', options)
    },
  }
};
</script>

다른 옵션

그런 다음 원하는 형식의 날짜를 전달하는 템플릿의 Vue 메서드를 사용하는 것처럼 메서드를 사용할 수 있습니다.

<template>
  <p>
    {{ formatDate('2020-12-25') }}
  </p>
</template>

결과: 2020년 12월 25일

다른 옵션을 사용할 수도 있습니다. 아마도 우리는 요일을 표시하고 싶을 것입니다. 요일을 추가하여 이 작업을 수행할 수 있습니다.

formatDateDay(date) {
  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-us', options)
},

결과: 2020년 10월 9일 금요일

다른 로케일

또한 다른 로케일을 전달할 수 있으므로 영국 대 미국 날짜 형식으로 작업할 때 특히 유용한 올바른 순서로 날짜를 얻을 수 있습니다.

formatDateEN(date) {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-GB', options)
},

결과: 2020/12/25

formatDateUS(date) {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-US', options)
},

결과: 2020년 12월 25일

물론 날짜와 월을 다른 언어로 표시하도록 형식을 변경할 수도 있습니다.

formatDateDayEs(date) {
  const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString('es', options)
},

결과: 비엔나, 2020년 2월 25일

예시

See my CodePen 날짜를 가지고 놀아보세요.

자세한 내용은 See the Mozilla Docs를 참조하십시오.