기준일의 요일로 시작일과 종료일 구하기

년도

주차

일요일 월요일 화요일 수요일 목요일 금요일 토요일

시작 기준 요일

JavaScript Code (Function)

window.onload = reset

function reset() {
	const now = new Date()
	const nowYear = now.getFullYear()
    const nowDayOfWeek = now.getDay()
    
    const first = new Date(nowYear, 0 , 1)
	const days = Math.floor((now - first) / (24 * 60 * 60 * 1000))
    const nowWeek = Math.ceil((nowDayOfWeek + 1 + days) / 7)
    
    document.querySelector('#year').value = nowYear
    document.querySelector('#week').value = nowWeek
    document.querySelector('#start').value = nowDayOfWeek
    show()
}

function show () {
	document.querySelector('#result').innerHTML = weekRange(
    	document.querySelector('#week').value, 
    	document.querySelector('#year').value, 
    	document.querySelector('#start').value
   	)
}

function weekRange(week, year, start) {
  if (!week) return '몇 주차인지 설정해주세요'
  const standard = start || !isNaN(start) ? parseInt(start) : 0
  let date = new Date((year || new Date().getFullYear()), 0 , 1) // 기준(시작) 날짜
  date = new Date(date.setDate(date.getDate() + (7 * (week - 1))))
  const dayOfWeek = date.getDay()
  if (dayOfWeek > standard) {
    date = new Date(date.setDate(date.getDate() - (dayOfWeek - standard)))
  } else if (dayOfWeek < standard) {
    date = new Date(date.setDate(date.getDate() + (standard - dayOfWeek)))
  }
  
  const startDate = moment(date, 'YYYY-MM-DD')
  const endDate = moment(date.setDate(date.getDate() + 6), 'YYYY-MM-DD')
  return `${startDate} ~ ${endDate}`
}

function moment(date, format) {
  if (!date) return '-'
  if (!format) format = 'YYYY.MM.DD hh:mm'
  const data = new Date(date)
  const addZero = (num) => {
    if (num < 10) {
      return `0${num}`
    }
    return num
  }
  
  const YYYY = data.getFullYear()
  const YY = YYYY.toString().substring(2, 4)
  const M = data.getMonth() + 1
  const MM = addZero(M)
  const D = data.getDate()
  const DD = addZero(D)
  const h = data.getHours()
  const hh = addZero(h)
  const m = data.getMinutes()
  const mm = addZero(m)
  const s = data.getSeconds()
  const ss = addZero(s)

  return format
    .replace('YYYY', YYYY)
    .replace('YY', YY)
    .replace('MM', MM)
    .replace('M', M)
    .replace('DD', DD)
    .replace('D', D)
    .replace('hh', hh)
    .replace('h', h)
    .replace('mm', mm)
    .replace('m', m)
    .replace('ss', ss)
    .replace('s', s)
}

HTML CODE

<div class="w-full h-full">
      <div class="w-full min-h-[100px] text-center mb-8" id="result"></div>
      <div class="mx-auto mb-8">
          <div class="flex items-center justify-center gap-4 mb-4">
              <input type="number" max="9999" min="0" value="2023" id="year" class="w-1/3 min-w-[50px] border" />
              <p class="w-1/3">년</p>
          </div>
          <div class="flex items-center justify-center gap-4 mb-4">
              <input type="number" max="53" min="0" value="13" id="week" class="w-1/3 min-w-[50px] border" />
              <p class="w-1/3">주차</p>
          </div>
          <div class="flex items-center justify-center gap-4">
              <select id="start" class="w-1/3 min-w-[50px] border">
                  <option value="0">일요일</option>
                  <option value="1">월요일</option>
                  <option value="2">화요일</option>
                  <option value="3">수요일</option>
                  <option value="4">목요일</option>
                  <option value="5">금요일</option>
                  <option value="6">토요일</option>
              </select>
              <p class="w-1/3"></p>
          </div>
      </div>
      <div class="flex items-center justify-center gap-4">
          <button type="button" class="w-1/3 h-8 border rounded" onclick="reset()">초기화</button>
          <button type="button" class="w-1/3 h-8 border rounded" onclick="show()">계산</button>
      </div>
  </div>

 

저는 원래 Chart.js의 tooltip에서 사용할 목적으로 작성한 코드입니다.

프로젝트에 적용하려고 코드를 짰으나, 디자인과 맞지 않아서 사용을 못하였습니다.
누군가는 이 코드를 보고 잘 활용할것이라 믿고 올려봅니다..