el-time-picker

Configure Vue 3 time pickers with Element Plus range and arrow controls.

21|2|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-time-picker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-time-picker
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-time-picker
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-time-picker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TimePicker enables precise time input and optional range selection for forms and apps, streamlining time-based data entry.

Core Features & Use Cases

  • Time selection for single values
  • Time range support with is-range
  • Optional arrow-control and placeholder customization
  • Use Case: scheduling, form workflows, and time-based data capture across dashboards

Quick Start

Instantiate the component in a Vue template and bind it to a reactive value to start selecting times.

Frequently Asked Questions about el-time-picker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a time range picker to a Vue 3 form?▼

To add a time range picker in Vue 3, bind the component to a reactive value and enable the is-range property. This supports capturing start and end times for scheduling workflows.

Can I use arrow control for time selection in an Element Plus UI component?▼

Yes, you can use arrow control for time selection in an Element Plus UI component by enabling the arrow-control feature. This allows users to adjust hours and minutes using spin buttons.

How to disable specific hours or minutes in a Vue 3 time picker?▼

To disable specific hours or minutes in a Vue 3 time picker, use the configurable disabled hours and minutes attributes provided by the Element Plus TimePicker features.

Does the Element Plus TimePicker support single time input for dashboards?▼

Yes, the Element Plus TimePicker supports single time input for dashboards. It enables precise time data entry for individual scheduling values without requiring the is-range property.

What is the best way to capture time-based data entry in Vue 3 applications?▼

The best way to capture time-based data entry in Vue 3 applications is using a dedicated TimePicker component. It streamlines form workflows by supporting both single values and time ranges.

How do I customize the placeholder for a time range picker in Vue 3?▼

You can customize the placeholder for a time range picker in Vue 3 through the component's optional placeholder customization attributes. This ensures users understand the expected start and end time inputs.