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.