dayjs를 이용한 주간 날짜 구하기 - javascript

주간 날짜 구하기

---

html(template)

...
<div class="week_txt_line">
  <button class="btn_cal left" @click="currentWeek('prev')">
    <img src="@/assets/images/icon_arrow_cal.svg" alt="">
  </button>
  <p class="week_txt">{{ showeek }}</p>
  <button class="btn_cal right" @click="currentWeek('next')">
    <img src="@/assets/images/icon_arrow_cal.svg" alt="">
  </button>
</div>
...

javascript

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
//
const info = ref({
  weeks: [],// 현재 '주'의 날짜들
  moveweekno: 0,// ± 이동한 주
})

// 현재 '주'의 날짜구하기(일0 ~ 토6)
const selectWeek = (date) => {
  return Array(7).fill(new Date(date)).map((el, idx) =>
    new Date(el.setDate(el.getDate() - el.getDay() + idx))
  )
}

// 현재 '주'의 날짜
const arrWeek = (date) => {
  let week = selectWeek(date)
  info.value.weeks = []
  week.forEach((e, i) => {
    info.value.weeks.push(dayjs(e).format("YY년 M월 D일"))
  })
}
arrWeek(new Date()) // 이번주 일 ~ 토

// 보여지는 주의 일 - 토 날짜
const showeek = computed(() => {
  return `${info.value.weeks[0]} - ${info.value.weeks[6]}`
})

// dayjs의 isSameOrAfter(), isSameOrBefore() 사용하기 위해 포맷 변경
// isSameOrAfter() : 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이후이거나 같은지 확인
// isSameOrBefore() : 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이전이거나 같은지 확인
const dayformat = (no, week) => {
  return dayjs().add(no, week).format("YYYY-MM-DD")
}

// 최대 6개월 이동
const currentWeek = (n) => {
  if(n === "prev") {
    // 6개월 전보다 이후일 때
    if(dayjs(dayformat(info.value.moveweekno, 'week')).isSameOrAfter(dayformat(-6, 'month'))) {
      info.value.moveweekno -= 1
    }
    // 6개월 이전이면
    else {
      info.value.moveweekno = info.value.moveweekno;
    }
  }
  else {
    // 6개월 후보다 이전일 때
    if(dayjs(dayformat(info.value.moveweekno, 'week')).isSameOrBefore(dayformat(6, 'month'))) {
      info.value.moveweekno += 1
    }
    // 6개월 이후면
    else {
      info.value.moveweekno = info.value.moveweekno;
    }
  }
  arrWeek(dayformat(info.value.moveweekno, 'week'))
}
</script>

dayjs를 이용하여 특정 날을 기준으로 해당일을 포함하여 이전과 이후를 확인할 수 있다.

끝.