skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-time

Format and display time values with relative times, custom formats, and time zones.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Time-based UI elements require consistent, readable formatting across regions and contexts. n-time provides a flexible component to format and display time values with support for relative times, custom formats, time zones, and Unix timestamps, eliminating manual date handling in templates.

Core Features & Use Cases

  • Flexible formatting: display dates, datetimes, and relative times.
  • Time zone support: render times in any IANA time zone.
  • Unix timestamp handling: parse and format Unix timestamps (seconds).
  • Real-world scenarios: dashboards, activity lists, and logs that show accurate time information.

Quick Start

Render the current time using a simple format like yyyy-MM-dd HH:mm:ss to verify output.

Frequently Asked Questions about n-time

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

FAQPage Schema
How do I format and display Unix timestamps in Vue components?▼

You can format and display Unix timestamps in Vue components by passing the timestamp to the component, which handles parsing and rendering as readable dates or relative times.

Can I render time zone specific dates in Vue dashboards?▼

Yes, you can render time zone specific dates in Vue dashboards by configuring the component to display times in any IANA time zone, ensuring accurate time rendering across regions.

What's the best way to show relative time in Vue data displays?▼

The best way to show relative time in Vue data displays is using a dedicated time component that calculates and formats relative timestamps automatically for UI elements like activity lists.

Does this Vue time formatting component work with naive-ui?▼

Yes, this time formatting component is designed to work with naive-ui, providing flexible time rendering capabilities like custom formats and time zone handling within that UI framework.

When do I need custom time formatting in Vue templates?▼

You need custom time formatting in Vue templates when building dashboards or logs that require consistent date formatting, relative timestamps, and multiple time zone conversions across UI components.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-gradient-text

Render gradient text with configurable size and type in Vue 3.

Community
Intermediate
DegenApeDevDegenApeDev
7

time-checker

Retrieve the current local date and time in YYYY-MM-DD HH:MM:SS format.

Community
Basic
ruskibeatsruskibeats

relative-time-formatter

Convert absolute timestamps into relative time expressions for UI display.

Community
Basic
AgentPMTAgentPMT

date-calculator-and-timestamp-tool-set

Performs date arithmetic, timezone conversions, and timestamp formatting via external API.

Official
Intermediate