# How to Implement Date and Time Selection with DatePicker and TimePicker in Element UI

> Master date and time selection in Element UI. Learn to implement ElDatePicker and ElTimePicker for single values, ranges, and combined inputs with their dynamic panel selection.

- Repository: [饿了么前端/element](https://github.com/ElemeFE/element)
- Tags: how-to-guide
- Published: 2026-03-07

---

**Use `ElDatePicker` and `ElTimePicker` components from the ElemeFE/element repository, leveraging their mixin-based architecture and dynamic panel selection to handle single values, ranges, and combined date-time input.**

The **ElemeFE/element** library provides robust Vue.js components for date and time selection through `ElDatePicker` and `ElTimePicker`. Both components utilize a shared **Picker mixin** architecture that handles pop-up behavior, input binding, and focus management, while dynamically rendering specific panels based on configuration props. This implementation guide covers the source code structure in `packages/date-picker/src/picker/` and practical integration patterns for production applications.

## Understanding the Component Architecture

### Mixin-Based Core Design

Both pickers extend a common foundation through the **Picker mixin** imported from `../picker`. In [`packages/date-picker/src/picker/date-picker.js`](https://github.com/ElemeFE/element/blob/main/packages/date-picker/src/picker/date-picker.js) and [`packages/date-picker/src/picker/time-picker.js`](https://github.com/ElemeFE/element/blob/main/packages/date-picker/src/picker/time-picker.js), the components declare `mixins: [Picker]` to inherit shared logic for:

- Pop-up visibility and positioning
- Input field binding and validation
- Focus and blur event handling
- Keyboard navigation support

This architectural pattern ensures consistent behavior across all picker variants while allowing each component to define type-specific functionality.

### Dynamic Panel Selection

The visual interface renders dynamically based on component configuration:

- **DatePicker** calls `getPanel(type)` to instantiate `DatePanel`, `DateRangePanel`, or `MonthRangePanel` according to the `type` prop value.
- **TimePicker** toggles between `TimePanel` and `TimeRangePanel` when the `isRange` prop changes, as implemented in the `watch` blocks and `created` hooks of each component.

This panel selection logic determines which rendering component appears inside the pop-up overlay, enabling single date, date range, time, and time range modes from the same core component.

## Implementing Date Selection with ElDatePicker

### Basic Single Date Picker

Configure `type="date"` to activate `DatePanel` for single date selection. Control available dates through `picker-options` and define shortcuts for common selections:

```html
<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    placeholder="Pick a day"
    format="yyyy/MM/dd"
    :picker-options="dateOptions">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      dateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          { 
            text: 'Today', 
            onClick(picker) { 
              picker.$emit('pick', new Date()) 
            } 
          },
          { 
            text: 'Yesterday', 
            onClick(picker) { 
              const d = new Date()
              d.setDate(d.getDate() - 1)
              picker.$emit('pick', d)
            } 
          }
        ]
      }
    }
  }
}
</script>

```

The `picker-options` object supports `disabledDate` for blocking specific dates and `shortcuts` for quick selection buttons that emit the `pick` event.

### Date Range Selection

Set `type="daterange"` to switch the panel to `DateRangePanel`. Use `default-time` to specify start and end times for the range boundaries:

```html
<template>
  <el-date-picker
    v-model="range"
    type="daterange"
    start-placeholder="Start"
    end-placeholder="End"
    :default-time="['00:00:00', '23:59:59']"
    :picker-options="rangeOptions">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      range: '',
      rangeOptions: {
        shortcuts: [
          {
            text: 'Last week',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 7)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  }
}
</script>

```

When `default-time` is provided as an array, the component applies the first value to the start date and the second to the end date, setting the time portion of each boundary.

### DateTime Picker

Combine date and time selection using `type="datetime"`, which merges `DatePanel` with time selection controls:

```html
<template>
  <el-date-picker
    v-model="dateTime"
    type="datetime"
    placeholder="Pick date & time"
    :default-time="['12:00:00']">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return { dateTime: '' }
  }
}
</script>

```

The `default-time` prop accepts a string or array defining the initial time value when the user selects a date without explicitly choosing a time.

## Implementing Time Selection with ElTimePicker

### Basic Time Picker

Enable arrow controls and restrict selectable hours using `arrow-control` and `picker-options.selectableRange`:

```html
<template>
  <el-time-picker
    v-model="selectedTime"
    placeholder="Select time"
    :picker-options="{ selectableRange: '09:00:00 - 18:00:00' }"
    format="HH:mm"
    arrow-control>
  </el-time-picker>
</template>

<script>
export default {
  data() {
    return { selectedTime: '' }
  }
}
</script>

```

The `arrow-control` prop renders up/down arrows for incrementing values, while `selectableRange` limits the valid time window using "HH:mm:ss - HH:mm:ss" format.

### Time Range Selection

Add `is-range` to activate `TimeRangePanel` for selecting start and end times. Define multiple valid time windows using an array in `selectableRange`:

```html
<template>
  <el-time-picker
    is-range
    v-model="timeRange"
    range-separator="to"
    start-placeholder="Start time"
    end-placeholder="End time"
    :picker-options="{ selectableRange: ['08:00:00-12:00:00', '13:00:00-18:00:00'] }"
    arrow-control>
  </el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      timeRange: ['', '']
    }
  }
}
</script>

```

When `is-range` is present, the component expects an array value and renders two time input fields linked by the `range-separator` string.

## Key Configuration Props and Options

Both components accept these critical props defined in [`packages/date-picker/src/picker/date-picker.js`](https://github.com/ElemeFE/element/blob/main/packages/date-picker/src/picker/date-picker.js) and [`packages/date-picker/src/picker/time-picker.js`](https://github.com/ElemeFE/element/blob/main/packages/date-picker/src/picker/time-picker.js):

- **`type`** – Determines the panel type for DatePicker (`date`, `daterange`, `datetime`, `week`, `month`, `year`).
- **`is-range`** – Boolean flag for TimePicker that switches to `TimeRangePanel`.
- **`format`** – Display format string (e.g., `yyyy-MM-dd`, `HH:mm:ss`).
- **`value-format`** – Format for the bound value, useful when storing strings instead of Date objects.
- **`picker-options`** – Configuration object for disabled dates, shortcuts, selectable ranges, and first-day-of-week settings.
- **`default-time`** – Default time value applied when selecting dates or opening the picker.
- **`arrow-control`** – Enables spinner arrow controls instead of scrolling for time selection.

## Summary

- **ElDatePicker** and **ElTimePicker** inherit core functionality from the **Picker mixin** in `packages/date-picker/src/picker/`, ensuring consistent pop-up behavior and event handling.
- **Dynamic panel selection** occurs through `getPanel(type)` in DatePicker and `isRange` watchers in TimePicker, rendering `DatePanel`, `DateRangePanel`, `TimePanel`, or `TimeRangePanel` as needed.
- **Configuration props** like `type`, `is-range`, `picker-options`, and `default-time` control the component mode, available values, and default selections.
- **Event handling** includes `change`, `blur`, and `focus` emissions, plus a `focus()` method for programmatic control.
- **Styling** resides in `packages/theme-chalk/src/date-picker/` and [`packages/theme-chalk/src/time-picker.scss`](https://github.com/ElemeFE/element/blob/main/packages/theme-chalk/src/time-picker.scss) for customization.

## Frequently Asked Questions

### How do I restrict date selection to weekdays only using ElDatePicker?

Use the `disabledDate` function within `picker-options` to return `true` for Saturday and Sunday dates. Inspect the `getDay()` method of the time object to identify weekend days and disable them programmatically.

### What is the difference between ElTimePicker and ElTimeSelect?

**`ElTimePicker`** uses `TimePanel` or `TimeRangePanel` with arbitrary time input capabilities and configurable selectable ranges. **`ElTimeSelect`** is a separate component that provides fixed time options in a dropdown list, suitable for predefined time slots rather than continuous time selection.

### How can I programmatically open the date or time picker?

Call the **`focus()`** method exposed by both components. Since `ElDatePicker` and `ElTimePicker` mix in the base `Picker` logic from `packages/date-picker/src/picker`, they inherit this method to trigger the pop-up programmatically from parent components.

### Why does my date range picker show the wrong default time?

Ensure `default-time` is provided as an **array with two strings** when using `type="daterange"` (e.g., `['00:00:00', '23:59:59']`). The first element applies to the start date, and the second applies to the end date. Providing a single string or omitting the array format causes the default time to apply incorrectly or not at all.