El Date Picker

DatePicker Component

DatePicker allows users to select dates, date ranges, months, years, or datetime values.

When to Use

• Date selection
• Date range selection
• Month/year selection
• Datetime input

Basic Usage

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="Pick a day"
  />
</template>

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

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

Date Range

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

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

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

With Shortcuts

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="Pick a day"
    :shortcuts="shortcuts"
  />
</template>

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

const value = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    }
  }
]
</script>

Date Formats

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="Pick a day"
    format="YYYY/MM/DD"
    value-format="YYYY-MM-DD"
  />
</template>

Disabled Dates

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="Pick a day"
    :disabled-date="disabledDate"
  />
</template>

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

const value = ref('')

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
</script>

API Reference

Attributes

Events

Slots

Exposes

Best Practices

1. Use value-format for string values
2. Use shortcuts for quick selections
3. Use disabled-date to restrict selections