[Vue3] input type="date" 임의로 날짜 입력하기 차단 (선택만 가능)

 

input type="date"를 통해 달력을 사용할 때, 사용자 경험을 향상시키기 위해 날짜 입력을 막는다.

날짜 입력을 허용하면 임의로 날짜를 적용할 수 있기 때문.

 

키보드로 입력하여 123412년으로 적용할 수 있다.

 

그래서 input type="date"를 클릭하거나 포커스했을 때, 키보드로 바꿀 수 없고 선택만 가능하도록 해야한다.

 

ref를 이용해 DOM에 접근하고, showPicker 메소드를 사용해 적용한다.

이때 input 태그에는 click, focus 이벤트를 모두 적용한다.

<script setup lang="ts">
import { ref } from 'vue';

const dateRef = ref();

function dateInput(){
  if(dateRef.value.showPicker){
    dateRef.value.showPicker();
  } else {
    dateRef.value.readOnly = false;
    dateRef.value.focus();
    dateRef.value.readOnly = true;
  }
}

</script>

<template>
    <input @click="dateInput" @focus="dateInput" ref="dateRef" type='date' />
</template>

 

 

결과