El-Date-Picker Format 동적 변경 (보여지는 Format과 입력 받을 시 Format 다르게 하는 법)

현재 Nuxt를 사용해 개발중인 사내 백오피스 사이트 구축 프로젝트에는 ElementPlus라는 UI 프레임워크를 사용하고 있습니다.

이 ElementPlus에서 지원하는 datePicker인 el-date-picker는

format : 보여지는 형식
value-format: 실제 model-value에 바인된 변수의 date 형식

을 지원합니다.

<el-date-picker
	v-model="date"
    format="YYYY-MM-DD"
    value-format="YYYYMMDD"
/>

와 같이 설정했다면 date-picker에 입력된 값은 2024-01-01 형식으로 보여지겠지만 실제 변수를 확인해보면 20240101 로 저장되어있습니다.

그런데 이 el-date-picker는 사용자가 달력을 선택하는 기능과 더불어 입력할 수 있도록 제공을 합니다.

하지만 입력시 format에 설정해놓은 YYYY-MM-DD 형식으로 입력하지 않으면 입력이 되지 않습니다.
편하게 입력하고자 한다면 240101 로 입력해야겠지만
format에 잡힌대로 2024-01-01 즉 - 을 2번 이나 눌러야 한다는 번거로움이 있다는 것이죠..

개발 중 클라이언트의 요청은 아래와 같았습니다.

1. 보여지는 형식은 가독성을 위해 YYYY-MM-DD으로 보이기
2. 입력할떄는 -를 입력하지 않아도 되도록

이 두가지 요구사항을 모두 만족시키기 위해 다양한 방법을 시도했고
결론만 말씀드린다면 @foucs와 @blur를 이용했습니다.

<script lang="ts" setup>
  
  const toDateFormat = ref('YYYY-MM-DD');
  const fromDateFormat = ref('YYYY-MM-DD');

  const formatChange = (datePickerType: string, eventType: string) => {
  if (datePickerType === 'from') {
    if (eventType === 'focus') {
      fromDateFormat.value = 'YYYYMMDD';
    } else {
      fromDateFormat.value = 'YYYY-MM-DD';
    }
  } else {
    if (eventType === 'focus') {
      toDateFormat.value = 'YYYYMMDD';
    } else {
      toDateFormat.value = 'YYYY-MM-DD';
    }
  }
};

</script>

<template>
  <div>
   <el-date-picker
            :model-value="fromDate"
            @update:model-value="(newVal) => emits('update:fromDate', newVal)"
            placeholder="From Date"
            :format="fromDateFormat"
            value-format="YYYYMMDD"
            :editable="true"
            :clearable="false"
            @focus="formatChange('from', 'focus')"
            @blur="formatChange('from', 'blur')"
  </div>
</template>

focus 이벤트 발생시 YYYY-MM-DD 로 지정되어있던 포맷을
YYYYMMDD 형식으로 변경해줍니다.
그렇게되면 입력시 -를 불필요하게 입력할 필요가 없게됩니다.
그 후 입력을 마치고 사용자가 입력창을 벗어나게되면 blur 이벤트를 발생시켜 포맷을 YYYY-MM-DD로 되돌려 줍니다.

정말 간단하게 해결할 수 있는 방법인데
고민을 많이 했던 저를 보며 반성하게되네요..ㅠㅠ