Internationalization API

vuejs 에서 사용하는 v-calendar를 custom하는 과정에서 알게된 내용을 적어본다.

v-calendar의 locale을 확인하다가 해당문서에서 새로운 기능이 있음을 발견한다. 링크

다국어 처리관련 locales(i18n)을 매번 만들어주었는데. 언제부터인가.. 공식 API에서 제공했다고...

아래는 캘린더나 시간 관련 프로그래밍 시 일단 만들고 보는것..

// 달력 lables
const monthNames = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
const monthShortNames = ["일", "월", "화", "수", "목", "금", "토"];

// 원하는 형식의 문자열 반환 함수
function getDateFormatString(date){
    let formatted = '';
    ...
    return formatted;
}

이제는 Intl을 이용하면 Date객체를 형식에 맞게 변환할 수 있다.

일단 기억이 사라지기 전에 링크 및 날짜 관련 테스트 해 보았던 코드만 갈무리 한다.

(function(){
    const defaultOptions = Intl.DateTimeFormat('default').resolvedOptions();
    console.log('브라우저 기본 옵션', defaultOptions);

    const options = {
        weekday: "narrow", // narrow, short, long
        era: "narrow", // narrow, short, long
        year: "2-digit", // 2-digit, numeric
        month: "2-digit", // 2-digit, numeric, narrow, short, long
        day: "2-digit", // 2-digit, numeric
        dayPeriod: "narrow", // narrow, short, long
        hour: "2-digit", // 2-digit, numeric
        minute: "2-digit", // 2-digit, numeric
        second: "2-digit", // 2-digit, numeric
        //fractionalSecondDigits: "1𝔽", // 1𝔽, 2𝔽, 3𝔽
        timeZoneName: "short", // short, long

        weekday: 'narrow' || 'short' || 'long',
        era: 'narrow' || 'short' || 'long',
        year: 'numeric' || '2-digit',
        month: 'numeric' || '2-digit' || 'narrow' || 'short' || 'long',
        day: 'numeric' || '2-digit',
        dayPeriod: "narrow" || "short" || "long",
        hour: 'numeric' || '2-digit',
        minute: 'numeric' || '2-digit',
        second: 'numeric' || '2-digit',
        timeZoneName: 'short' || 'long',

        // Time zone to express it in
        timeZone: 'Asia/Seoul',
        // Force 12-hour or 24-hour
        hour12: true || false,

        // Rarely-used options
        hourCycle: 'h11' || 'h12' || 'h23' || 'h24',
        formatMatcher: 'basic' || 'best fit'
    };

    const formatter = new Intl.DateTimeFormat('ko-KR', options);

    const now = new Date();
    const formatted = formatter.format(now);
    console.log('옵션을 이용해 포멧팅한 결과', formatted, formatter.formatToParts());
})();

관련링크

브라우저 호환성 확인 - 링크
ECMAScript Intl - 링크
DateTimeFormat - 링크