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

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 and 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:

<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:

<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:

<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:

<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:

<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 and 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}