el-datetime-picker

DateTimePicker Component

DateTimePicker allows selecting date and time in one picker.

When to Use

• Datetime selection
• Datetime range selection
• Scheduling
• Event creation

Basic Usage

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    placeholder="Select date and time"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

DateTime Range

<template>
  <el-date-picker
    v-model="value"
    type="datetimerange"
    range-separator="To"
    start-placeholder="Start date"
    end-placeholder="End date"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])
</script>

With Default Time

<template>
  <el-date-picker
    v-model="value"
    type="datetimerange"
    :default-time="defaultTime"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59)
]
</script>

Date Formats

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    format="YYYY/MM/DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
  />
</template>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	string | Date | number | array	—
type	Picker type	'datetime' | 'datetimerange'	'datetime'
format	Display format	string	'YYYY-MM-DD HH:mm:ss'
value-format	Value format	string	—
default-time	Default time values	Date | [Date, Date]	—
date-format	Panel date format	string	'YYYY-MM-DD'
time-format	Panel time format	string	'HH:mm:ss'
arrow-control	Use arrow buttons	boolean	false

Events

Name	Description	Type
change	Value changes	(value) => void
blur	Input blurs	(e: FocusEvent) => void
focus	Input focuses	(e: FocusEvent) => void
calendar-change	Calendar selection changes	(val) => void
visible-change	Dropdown visibility changes	(visibility: boolean) => void

Exposes

Name	Description	Type
focus	Focus input	() => void
blur	Blur input	() => void

Best Practices

1. Use default-time for consistent time values
2. Use value-format for string values
3. Use arrow-control for precise time selection