DatePickerPanel

DatePickerPanel

출처: 문서

본문

DatePickerPanel beta

DatePickerPanel은 DatePicker의 핵심 컴포넌트예요. 날짜 선택 패널 자체를 따로 다루고 싶을 때 사용해요.

날짜 입력 (Enter Date)

'day' 단위로 측정하는 기본 날짜 선택기예요.

<template>
  <el-date-picker-panel v-model="value" />
</template>

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

const value = ref()
</script>

테두리 (Border)

기본적으로 date-picker-panel은 테두리(border)가 있어요. 하지만 어떤 경우에는 테두리를 원하지 않을 수도 있죠. 예를 들어 DatePicker는 테두리를 상속받지 않아요. border prop으로 제어할 수 있어요.

Disabled

disabled 속성은 날짜 선택기가 완전히 비활성화되는지 결정해요.

<template>
  <el-date-picker-panel v-model="value" disabled />
</template>

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

const value = ref()
const disabled = ref(true)
</script>

타입 (Types)

측정 단위는 type 속성으로 결정돼요. year, month, date, week, quarter, datetime 등 다양한 단위를 선택할 수 있어요.

<template>
  <el-date-picker-panel v-model="date" :type="type" />
</template>

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

import type { DatePickerType } from 'element-plus'

const date = ref()
const type = ref('date')

watch(type, () => {
  date.value = undefined
})

const types: DatePickerType[] = [
  'year',
  'years',
  'month',
  'months',
  'date',
  'dates',
  'week',
  'quarter',
  'quarters',
  'quarterrange',
  'datetime',
  'datetimerange',
  'daterange',
  'monthrange',
  'yearrange',
]
</script>

현지화 (Localization)

기본 로케일은 영어예요. 다른 언어를 사용해야 한다면 Internationalization 문서를 확인해 주세요. 날짜와 시간 로케일(월 이름, 한 주의 시작 요일 등)도 현지화 설정에 포함돼요.

API

Attributes

Events

Slots

더 알아보기 (Learn more)