DatePicker

Matches Arco DatePicker and RangePicker with filled inputs and right-hand calendar icons. See the Element Plus docs for props.

Basics & Sizes

The size prop provides three sizes; click an input to open the default English date panel.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(new Date(2026, 9, 15))
const sizes = ['small', 'default', 'large'] as const
</script>

<template>
  <el-date-picker v-for="size in sizes" :key="size" v-model="value" :size="size" placeholder="Select a date" style="width: 220px" />
  <el-date-picker v-model="value" disabled style="width: 220px" />
</template>

Date Range

Daterange matches Arco RangePicker and lets users choose start and end dates.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref<[Date, Date]>([new Date(2026, 9, 10), new Date(2026, 9, 20)])
</script>

<template>
  <el-date-picker v-model="value" type="daterange" range-separator="-" start-placeholder="Start date" end-placeholder="End date" style="width: 360px; max-width: 100%" />
</template>

Months, Years & Datetime

Month, year and datetime select different time units while keeping Element Plus panel structures.

<script setup lang="ts">
import { ref } from 'vue'
const month = ref<Date>()
const year = ref<Date>()
const datetime = ref<Date>()
</script>

<template>
  <el-date-picker v-model="month" type="month" placeholder="Select a month" style="width: 220px" />
  <el-date-picker v-model="year" type="year" placeholder="Select a year" style="width: 220px" />
  <el-date-picker v-model="datetime" type="datetime" placeholder="Select date and time" style="width: 240px" />
</template>

Inline Panel

ElDatePickerPanel allows selecting a date directly within the page.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(new Date(2026, 9, 15))
</script>

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

Differences from Arco

• Plain date panels omit Arco's Today footer; header formatting follows Element Plus locale text.
• Month and year panels use four columns and show 10 years, unlike Arco's three columns and 12 years.
• Datetime panels retain Element Plus's stacked layout rather than Arco's side-by-side layout.