[JavaScript, Vue3, Tabulator] 날짜 관련 스크립트

YYYY년 M월 => YYYY-MM 형태로 변환

function convertKoreanDate(str) {

  // "2025 년 4월"에서 숫자만 추출

  const match = str.match(/(\d{4})\s*년\s*(\d{1,2})월/);

  if (!match) return null;

  const year = match[1];

  // 월은 항상 2자리로 맞춤

  const month = match[2].padStart(2, '0');

  return `${year}-${month}`;

}

dayjs()를 활용하여 날짜 범위 기본값 셋팅

const dateRange = ref([

  dayjs().subtract(28, 'day').format('YYYY-MM-DD'),

  dayjs().format('YYYY-MM-DD'),

]);

 

Tabulator 그리드 날짜 컬럼 포맷터

/**

 * Custom Date formatter

 * @param Tabulator Cell

 * @param Object formatterParams

 * - editable - true/false(default) // Edit 필드 배경색 적용

 * - inputFormat : 입력값 날짜포맷 (미입력 시 자동 감지)

 * - outputFormat : 출력값 날짜포맷 (미입력 시 Default 처리 : yyyy-mm-dd 또는 yyyy-mm)

 * - ※ Format 지원형식 : yyyymmdd, yyyy-mm-dd, yyyy/mm/dd, yyyymm, yyyy-mm, yyyy/mm)

 * @return cell value

 */

export const rowColorAndDateFormatter = (cell, formatterParams) => {

  const cellElement = cell.getElement();

  const editable = formatterParams.editable ?? false;

  if (editable) {

    cellElement.style.backgroundColor = '#F4FBFF';

  }

  const cellValue = cell.getValue();

  if (!cellValue) {

    return cellValue;

  }

  // 정규식을 사용하여 입력 값이 어떤 형식인지 감지

  const patterns = {

    'yyyy-mm-dd': /^(\d{4})-(\d{1,2})-(\d{1,2})$/, // 2025-03-17

    'yyyy/mm/dd': /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/, // 2025/03/17

    'yyyymmdd': /^(\d{4})(\d{2})(\d{2})$/, // 20250317

    'yyyy-mm': /^(\d{4})-(\d{1,2})$/, // 2025-03

    'yyyy/mm': /^(\d{4})\/(\d{1,2})$/, // 2025/03

    'yyyymm': /^(\d{4})(\d{2})$/, // 202503

  };

  let detectedFormat = formatterParams.inputFormat;

  // 입력 포맷이 없을 경우 자동 감지

  if (!formatterParams.inputFormat) {

    Object.keys(patterns).forEach((key) => {

      if (patterns[key].test(cellValue)) {

        detectedFormat = key;

      }

    });

  }

  // 입력값이 어떤 포맷에도 맞지 않으면 입력 값 반환

  if (!detectedFormat) return cellValue;

  const match = cellValue.match(patterns[detectedFormat]);

  const year = parseInt(match[1], 10);

  const month = parseInt(match[2] || '1', 10); // 월이 없을 경우 기본값 `1`

  const day = parseInt(match[3] || '1', 10); // 일이 없을 경우 기본값 `1`

  // 존재하지 않는 날짜 감지 ('2월 30일', '13월' 등)

  const dateObj = new Date(year, month - 1, day);

  if (

    dateObj.getFullYear() !== year

    || dateObj.getMonth() + 1 !== month

    || dateObj.getDate() !== day

  ) {

    return cellValue;

  }

  // 출력 포맷이 없을 경우 기본값 처리

  if (!formatterParams.outputFormat) {

    // eslint-disable-next-line no-param-reassign

    formatterParams.outputFormat = detectedFormat.includes('dd') ? 'yyyy-mm-dd' : 'yyyy-mm';

  }

  // 유효한 날짜를 원하는 출력 포맷으로 변환

  const formattedDate = {

    'yyyy-mm-dd': `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,

    'yyyy/mm/dd': `${year.toString().padStart(4, '0')}/${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}`,

    'yyyymmdd': `${year.toString().padStart(4, '0')}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}`,

    'yyyy-mm': `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}`,

    'yyyy/mm': `${year.toString().padStart(4, '0')}/${month.toString().padStart(2, '0')}`,

    'yyyymm': `${year.toString().padStart(4, '0')}${month.toString().padStart(2, '0')}`,

  };

  return formattedDate[formatterParams.outputFormat] || cellValue;

};