Daterange

두 날짜 사이의 기간을 선택할 수 있는 컴포넌트입니다. 시작일과 종료일을 함께 입력받으며, 시간 선택 기능과 날짜 포맷 설정도 지원합니다.

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

props

Prop 이름	타입	기본값	설명
`required`	`boolean`	`true`	날짜 입력 필수 여부
`enabled`	`boolean`	`true`	날짜 선택 활성화 여부
`time`	`boolean`	`true`	시간을 포함할지 여부 (`true`면 시간까지 선택 가능)
`from`	`string`		시작 날짜 (`YYYY.MM.DD` 형식)
`to`	`string`		종료 날짜 (`YYYY.MM.DD` 형식)
`from-placeholder`	`string`		시작 날짜 입력 필드의 플레이스홀더
`to-placeholder`	`string`		종료 날짜 입력 필드의 플레이스홀더
`placeholder`	`string`	`'전체기간'`	`fromPlaceholder` 또는 `toPlaceholder`가 없을 때 기본값
`date-format`	`string`		날짜 형식 (예: `'YYYY.MM.DD'`)

html

<nv-daterange v-model:from="fromDt" v-model:to="toDt"/>

<script setup>
    const fromDt = ref(null)
    const toDt = ref(null)
</script>

html

<nv-daterange v-model:from="fromDt" v-model:to="toDt" time/>

from-placeholder prop과 to-placeholder prop을 사용하여 시작 날짜와 종료 날짜 입력 필드에 각각 다른 플레이스홀더 텍스트를 지정할 수 있습니다.
이는 사용자에게 어떤 정보를 입력해야 하는지 명확하게 안내하는 데 도움이 됩니다.
예시에서는 "시작날짜"와 "종료날짜"라는 플레이스홀더를 설정하여 사용자가 기간의 시작과 끝을 쉽게 인식하도록 합니다.

html

<nv-daterange from-placeholder="시작날짜" to-placeholder="종료날짜"/>

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

html

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

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

TIP

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