date-timezone

Parse and format date-only form inputs as UTC for displays.

2|2|Updated May 30, 2025
One-click install
npx skills add https://github.com/wodsmith/thewodapp --skill date-timezone
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: date-timezone
Source: https://github.com/wodsmith/thewodapp/tree/main/.claude/skills/date-timezone
Command: npx skills add https://github.com/wodsmith/thewodapp --skill date-timezone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Handling calendar dates in forms and displays across timezones. HTML5 date inputs return strings like "YYYY-MM-DD" treated as UTC midnight; without UTC handling, displays break across zones.

Core Features & Use Cases

  • UTC parsing/formatting: parseDateInputAsUTC, formatDateInputFromUTC for form submissions and defaults
  • Display utilities: formatUTCDateShort, formatUTCDateFull, formatUTCDateRange for user-friendly views
  • Form patterns: consistent UTC handling for date-only fields

Quick Start

Use parseDateInputAsUTC on submit and formatDateInputFromUTC for defaults; for display use formatUTCDateShort/Full.

Frequently Asked Questions about date-timezone

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

FAQPage Schema
How do I handle date inputs from HTML forms across different timezones?

HTML5 date inputs return UTC midnight strings (YYYY-MM-DD). Use parseDateInputAsUTC to parse form submissions and formatDateInputFromUTC to set default values, ensuring consistent UTC handling that prevents timezone-based display breaks across regions.

Why do calendar dates display differently depending on the user's timezone?

Without UTC-safe formatting, date-only fields treated as local midnight shift when rendered across timezones. UTC-consistent parsing and formatting utilities like formatUTCDateShort and formatUTCDateFull resolve this by anchoring dates to UTC midnight instead of local time.

What's the best way to format dates for user-friendly display while maintaining UTC consistency?

Use formatUTCDateShort for compact views, formatUTCDateFull for detailed displays, and formatUTCDateRange for multi-day spans. These utilities format UTC-parsed dates into readable strings while preserving timezone-safe semantics throughout the form and display pipeline.

Can I use UTC date handling for both form inputs and calendar UI displays?

Yes. Apply parseDateInputAsUTC and formatDateInputFromUTC for form submissions and defaults, then use formatUTCDateShort, formatUTCDateFull, or formatUTCDateRange for calendar and display rendering, maintaining UTC safety across the entire form-to-UI workflow.

How do I set default date values in forms without timezone conversion errors?

Use formatDateInputFromUTC to convert server-side UTC dates into the string format required by HTML5 date inputs. This ensures defaults populate correctly without local timezone conversions that would misalign the displayed date.

What happens to date-only fields if I don't apply UTC formatting?

Date-only fields treated as local midnight shift across timezones, causing displays to show incorrect dates in different regions. UTC-safe parsing and formatting prevents this drift by anchoring all operations to UTC midnight, ensuring consistent date representation globally.