DatePicker 날짜 선택기

원문 보기 위키 갱신 2026.10.11

날짜를 입력하거나 선택하는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 날짜를 입력해야 할 때, 표준 입력 상자를 클릭하면 날짜 패널이 떠서 선택할 수 있게 하고 싶을 때 사용해요.

기본 사용법

:::demo


<template>
  <div class="mb-2">选中的日期： {{eventValue}}</div>
  <d-datepicker :selected-date-change="handleEventValue" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const eventValue = ref<string>('')
    const handleEventValue = (val: string) => {
      eventValue.value = val;
    }

    return {
      eventValue,
      handleEventValue,
    };
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh200 {
  width: 200px;
}
</style>

:::

날짜 패널 자동 닫기

:::demo


<template>
  <div class="mb-2">开启 auto-close</div>
  <d-datepicker auto-close class="mb-1" />
  <d-datepicker :auto-close="true" />

  <div class="mb-2 mt-3">关闭 auto-close</div>
  <d-datepicker class="mb-1" />
  <d-datepicker :auto-close="false" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

:::

날짜 범위 선택기

:::demo


<template>
  <div class="mb-2">开启 range</div>
  <d-datepicker range class="mb-1" />
  <d-datepicker :range="true" />

  <div class="mb-2 mt-3">关闭 range</div>
  <d-datepicker class="mb-1" />
  <d-datepicker :range="false" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

:::

날짜 포맷팅

::: demo


<template>
  <d-datepicker format="yyyy-MM-dd hh:mm:ss" class="mb-1" />
  <d-datepicker format="yy-MM-dd" range />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

:::

날짜 시작·끝 구분자

::: demo


<template>
  <d-input v-model="splitterText" :max-length="1" class="mb-1 wh200"></d-input>
  <d-datepicker range :range-spliter="splitterText" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const splitterText = ref('至')

    return {
      splitterText
    }
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh200 {
  width: 200px;
}
</style>

:::

DatePicker 파라미터

파라미터	타입	기본값	설명	Demo 링크
auto-close	`boolean`	false	선택, 날짜 선택 후 날짜 패널 자동 닫기 여부	날짜 패널 자동 닫기
range	`boolean`	false	선택, 날짜 구간 선택 사용 여부	날짜 범위 선택기
format	`string`	y/MM/dd	선택, 날짜 값 포맷	날짜 포맷팅
range-spliter	`string`	-	선택, 구간 선택 모드에서 시작/종료 시간을 구분하는 문자	날짜 시작/종료 시간 구분자
selected-date-change	`Function`	-	선택, 하위 항목 전환 시 새로 활성화된 하위 항목 데이터 발생	기본 사용법

날짜 포맷 문자

문자	설명	규칙
y, yy, yyyy	year	`yy` 사용 시 뒤 2자리 연도만 표시, 그 외에는 4자리 연도 표시. 예: `yy/MM/dd -> 21/01/02`, `y/MM/dd -> 2021/01/02`
M,MM	month	`MM` 사용 시 한 자리 숫자 왼쪽에 자동으로 `0` 보강. 예: `y/MM/dd -> 2021/01/02`, `y/M/d -> 2021/1/2`
d,dd	date	`M`과 규칙 동일
h,hh	hour	`M`과 규칙 동일. 24시간 표기 사용
m,mm	minute	`M`과 규칙 동일
s,ss	second	`M`과 규칙 동일

더 알아보기 (Learn more)

auto-close로 날짜를 고른 뒤 패널을 자동으로 닫을지 정하고, range로 기간 선택을 켤 수 있어요. format 문자로 원하는 날짜 표시 형식을 만드는 방법은 위 표를 참고하세요.