对应 Arco DatePicker 和 RangePicker：输入框填充式，日历图标位于右侧。 属性用法见 Element Plus 文档。
size 对应三档尺寸，点击输入框打开英文日期面板。
<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>type="daterange" 对应 Arco RangePicker，可分别选择起止日期。
<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>month、year 和 datetime 对应月份、年份和日期时间选择，面板结构保留 Element Plus。
<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>el-date-picker-panel 可在页面内直接选择日期。
<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>