Datepicker

다양한 날짜 및 시간 입력이 필요한 경우에 사용하는 컴포넌트입니다. 날짜 포맷 지정, 시간 포함 여부, 선택 가능한 범위 제한 등의 기능을 지원합니다.

이 컴포넌트는 <el-date-picker> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

props

Prop 이름	타입	기본값	설명
model-value	string / null	null	현재 선택된 날짜/시간 값
time	boolean	false	시간 포함 여부
date-format	string	'YYYY.MM.DD' (시간 포함 시 'YYYY.MM.DD HH:mm:ss')	날짜 포맷
enabled	boolean	true	입력 필드 활성화 여부
min-date	string / null	null	최소 선택 가능 날짜
max-date	string / null	null	최대 선택 가능 날짜
default-to-latest-time	boolean	false	날짜 선택 시 시간을 자동으로 23:59:59 설정 여부

기본

• 가장 기본적인 형태의 Datepicker를 보여줍니다.
• v-model을 사용하여 선택된 날짜 값을 date ref 변수에 바인딩합니다.
• 기본적으로 시간 선택 기능은 비활성화되어 있으며, 날짜 포맷은 YYYY.MM.DD로 설정되어 있습니다.

기본

<nv-datepicker v-model="date"/>

<script setup>
    const date = ref('2025.01.01')
</script>

시간 추가

• time prop을 true로 설정하여 시간 선택 기능을 활성화합니다.
• v-model은 날짜와 시간을 모두 포함하는 문자열 형태로 time ref 변수에 바인딩됩니다.
• 기본 시간 포맷은 HH:mm:ss이며, 날짜와 함께 YYYY.MM.DD HH:mm:ss 형식으로 표시됩니다.

시간 추가

<nv-datepicker v-model="time" time />

<script setup>
    const time = ref('2025.01.01 12:20:00')
</script>

날짜 선택 범위 제한

• min-date prop을 사용하여 선택 가능한 최소 날짜를 지정합니다.
• max-date prop을 사용하여 선택 가능한 최대 날짜를 지정합니다.
• 두 prop을 함께 사용하면 특정 날짜 범위 내에서만 날짜를 선택하도록 제한할 수 있습니다.

날짜 범위 제한

최소 허용 날짜 :

최대 허용 날짜 :

날짜 범위 제한 :

<!--최소 허용 날짜-->
<nv-datepicker minDate="2025.03.10"/>

<!--최대 허용 날짜-->
<nv-datepicker maxDate="2025.03.20"/>

<!--날짜 범위 제한-->
<nv-datepicker minDate="2025.03.10" maxDate="2025.03.20"/>

날짜 포맷 변경

• date-format prop을 사용하여 표시되는 날짜의 형식을 변경합니다.
• 날짜만 선택하는 경우와 시간을 포함하여 선택하는 경우 각각 다른 포맷을 지정할 수 있습니다.
• 예시에서는 YYYY/MM/DD 형식으로 날짜 포맷을 변경하고, 시간 포함 시에는 YYYY/MM/DD HH.mm.ss 형식으로 포맷을 변경한 Datepicker를 보여줍니다.

날짜 포맷 변경

날짜 포맷 변경 :

시간 포함 날짜 포맷 변경 :

<!--날짜 포맷 변경-->
<nv-datepicker date-format="YYYY/MM/DD"/>

<!--시간 포함 날짜 포맷 변경-->
<nv-datepicker time date-format="YYYY/MM/DD HH.mm.ss"/>

TIP

날짜 및 시간 포맷 변경 시 제공된 규칙을 참고하여 다양한 형식으로 표현할 수 있습니다.

• YYYY : 년도, MM : 월, DD : 일
• HH : 시, mm : 분, ss : 초