n-time-picker

Provide configurable time input with 12/24-hour formats and time zones.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-time-picker
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-time-picker
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-time-picker
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-time-picker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Time input in forms is inconsistent and error-prone; a robust time-picker standardizes selection, formatting, and validation across apps.

Core Features & Use Cases

  • Flexible time formats (12-hour and 24-hour) and customizable display
  • Time-zone aware formatting and range/disabled-time support
  • Easy integration with forms and rapid UI composition for scheduling, appointments, or event timing
  • Real-world use: embed in signup forms or booking systems to capture precise times with minimal friction

Quick Start

Import the n-time-picker component and bind it to a time value in your form.

Frequently Asked Questions about n-time-picker

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

FAQPage Schema
How do I add a time-picker to a Vue3 form that supports 12-hour and 24-hour formats?

This Vue3 time-picker component provides configurable 12-hour and 24-hour display formats, allowing you to standardize time selection and formatting across your application forms.

Can I disable specific times or set step intervals in a Vue3 time selection widget?

Yes, this time-picker widget supports disabled time logic and configurable step intervals, enabling you to restrict selections and standardize time input across your forms.

Does this time-picker component handle time-zone aware formatting for scheduling applications?

Yes, the time-picker component provides time-zone aware formatting, making it suitable for scheduling and data entry applications that require precise time zone handling.

What is the best way to integrate a time input widget with form validation in Vue3?

The best way to integrate a time input widget with form validation is using a component that emits value update events. This time-picker provides these events for seamless form validation integration.

Why use a standardized time-picker component instead of native HTML time inputs in Vue3?

A standardized time-picker component solves inconsistent and error-prone time input in forms by providing robust formatting, time-zone support, and disabled logic that native HTML inputs lack.