[JavaScript] input type="week" value를 javascript로 세팅하기 (ISO 8601 week number)

 

 

날짜 선택을 위한 input 중 주(week, 週)를 선택할 수 있게 해주는 type="week" 이란게 있다.

참고: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week

 

ISO 8601의 week number를 따르는데 형식은 YYYY-W01 ~ YYYY-W53 같은 형식이다.

https://en.wikipedia.org/wiki/ISO_8601#Week_dates

https://en.wikipedia.org/wiki/ISO_week_date#First_week

 

항상 월요일부터 시작하므로, 

1월 1일이 월요일 ~ 목요일 사이에 있으면 1월 1일은 YYYY-W01 이 되며,

1월 1일이 금요일 ~ 토요일 사이에 있으면 그 전년도의 52 혹은 53주가 된다.

2020년 1월 1일은 수요일이므로 2020-W01 이 되고,

2021년 1월 1일은 금요일므로 2020-W53 이 된다.

 

input[type=week]의 value를 뽑아보면 2020-W24 같은 문자열이 나온다.

이걸 JavaScript를 이용해 YYYY-W00 ↔ YYYY-mm-dd 형태로 서로 변환하는 방법은 아래를 참조.

 

// Date 객체를 받아 week number를 반환
// 참고: https://weeknumber.net/how-to/javascript
function getWeekFromISODate(dt)
{
    dt.setHours(0,0,0,0);
    dt.setDate(dt.getDate() + 3 - (dt.getDay() + 6) % 7);
    const week1 = new Date(dt.getFullYear(), 0, 4);
 
    const weekNumber = 1 + Math.round(((dt.getTime() - week1.getTime())/ 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
 
    return `${dt.getFullYear()}-W${weekNumber}`;
}
 
 
// YYYY-W00 형태의 ISO 8601 week number를 받아 해당 주의 월요일 Date 객체를 반환
// https://stackoverflow.com/questions/16590500/javascript-calculate-date-from-week-number
function getStartDateFromISOWeek(ISOweek)
{
    const y = parseInt(ISOweek.substring(0, 4));
    const w = parseInt(ISOweek.substring(6, 8));
 
    const simpleDate = new Date(y, 0, 1 + (w - 1) * 7);
    const dayOfWeek = simpleDate.getDay();
    const ISOweekStart = simpleDate;
    if (dayOfWeek <= 4) {
        ISOweekStart.setDate(simpleDate.getDate() - simpleDate.getDay() + 1);
    }
    else {
        ISOweekStart.setDate(simpleDate.getDate() + 8 - simpleDate.getDay());
    }
 
    return ISOweekStart;
}
 
 
// 2020-06-11 -> 2020-W24
console.log(getWeekFromISODate(new Date(2020, 5, 11)));
// 2020년 첫째주 월요일 Date = 2019-12-30
console.log(getStartDateFromISOWeek('2020-W01'));