DateTimePicker

DateTimePicker

출처: 문서

본문

하나의 피커에서 날짜와 시간을 동시에 선택할 수 있는 컴포넌트예요.

TIP

DateTimePicker는 DatePicker와 TimePicker에서 파생됐어요. 속성에 대한 더 자세한 설명은 DatePicker와 TimePicker 문서를 참고할 수 있어요.

날짜와 시간 (Date and time)

type을 datetime으로 설정하면 하나의 피커에서 날짜와 시간을 동시에 선택할 수 있어요. 단축키를 사용하는 방법은 Date Picker와 같아요.

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
        :shortcuts="shortcuts"
      />
    </div>
    <div class="block">
      <span class="demonstration">With default time</span>
      <el-date-picker
        v-model="value2"
        type="datetime"
        placeholder="Select date and time"
        :default-time="defaultTime"
      />
    </div>
  </div>
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
</script>

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  min-width: 300px;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .demo-datetime-picker .block {
    flex: 100%;
    border-right: none;
    border-bottom: solid 1px var(--el-border-color);
  }

  .demo-datetime-picker .block:last-child {
    border-bottom: none;
  }

  :deep(.el-date-editor.el-input) {
    width: 100%;
  }

  :deep(.el-date-editor.el-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}

DateTime 포맷 (DateTime Formats)

format을 사용해 입력 상자에 표시되는 텍스트의 포맷을 제어하고, value-format을 사용해 바인딩 값의 포맷을 제어할 수 있어요. 기본적으로 컴포넌트는 Date 객체를 받고 내보내요. 사용 가능한 모든 Day.js 포맷 목록은 여기에서 확인할 수 있어요.

WARNING

대문자 사용에 주의하세요. 포맷 문자는 대소문자를 구분해요.

value-format을 사용하면 바인딩 값이 문자열이 되고, timestamp 형식(x 또는 X)을 사용하면 타임스탬프로 값이 설정돼요.

드롭다운 패널의 날짜·시간 포맷 (Date and time formats in dropdown panel)

date-format와 time-format을 사용해 드롭다운 패널 입력 상자에 표시되는 텍스트의 포맷을 제어할 수 있어요.

날짜·시간 범위 (Date and time range)

type을 datetimerange로 설정하면 날짜·시간 범위를 선택할 수 있어요.

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="Start date"
        end-placeholder="End date"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>

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

const value1 = ref([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
</script>

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  min-width: 300px;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .block {
    flex: 100%;
    border-right: none;
    border-bottom: solid 1px var(--el-border-color);
  }

  .block:last-child {
    border-bottom: none;
  }

  :deep(.el-date-editor.el-input) {
    width: 100%;
  }

  :deep(.el-date-editor.el-input__wrapper) {
    width: 100%;
    max-width: 300px;
  }
}

단일 패널 (Single Panel) 2.14.0

기본적으로 날짜 선택기 범위는 두 개의 패널을 가져요. 하나의 패널만 원한다면 single-panel 속성을 설정하면 돼요.

시작·종료 날짜의 기본 시간 값 (Default time value for start date and end date)

type이 datetimerange인 날짜 패널에서 날짜 범위를 선택할 때 시작일과 종료일의 기본 시간 값으로 00:00:00이 사용돼요. 이것은 default-time 속성으로 제어할 수 있어요. default-time은 최대 두 개의 Date 객체로 이루어진 배열을 받아요. 첫 번째 항목은 시작일의 시간 값을 제어하고, 두 번째 항목은 종료일의 시간 값을 제어해요.

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        start-placeholder="Start Date"
        end-placeholder="End Date"
        :default-time="defaultTime2"
      />
    </div>
  </div>
</template>

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

const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
</script>

커스텀 아이콘 (Custom icon) 2.8.0

슬롯으로 커스텀 아이콘을 사용할 수 있어요. prev-month, next-month, prev-year, next-year 슬롯을 제공해요.

API

Attributes

Events

Slots

Exposes

Type Declarations

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

더 알아보기 (Learn more)