Skip to content

[Audit] useDate - ensure adapter system matches Vuetify #106

@johnleider

Description

@johnleider

Summary

Ensure useDate adapter system matches Vuetify 3's date-io pattern.

Research Findings

v0 Architecture

  • Adapter Pattern: Generic DateAdapter<T> interface (62 methods)
  • Default Adapter: Vuetify0DateAdapter using TC39 Temporal API with @js-temporal/polyfill
  • Trinity Pattern: Full support via createDateContext() and createDatePlugin()
  • Locale Integration: Auto-syncs with useLocale() composable
  • SSR-Safe: Temporal.Now checks IN_BROWSER; returns epoch on server

Vuetify 3 Architecture

  • Adapter Pattern: DateAdapter<T> interface (52 methods)
  • Default Adapter: VuetifyDateAdapter using native JavaScript Date
  • date-io Ecosystem: Supports dayjs, luxon, date-fns, moment via @date-io/* packages
  • No Trinity Pattern: Simple factory function

Feature Comparison

v0 Has (Vuetify 3 Lacks)

Feature v0 Method Impact
Seconds support getSeconds(), addSeconds(), setSeconds() Time-precise operations
Years arithmetic addYears() Direct year manipulation
Granular comparisons isAfterMonth(), isBeforeDay(), etc. 12+ comparison methods
Days in month getDaysInMonth() Calendar calculations
Month/Year arrays getMonthArray(), getYearRange() Picker generation
Format helpers getFormatHelperText(), getMeridiemText() Localization hints
12-hour check is12HourCycleInCurrentLocale() AM/PM detection
String parsing parse() with format Custom format parsing
Token formatting formatByString() YYYY, MM, DD tokens
Date/time merge mergeDateAndTime() Combining components

Vuetify 3 Has (v0 Lacks)

Feature Impact
date-io ecosystem dayjs, luxon, date-fns, moment adapters
Timezone support Via luxon/dayjs adapters
Week calculation strategies firstDayOfYear, firstWeekSize by locale

Adapter Compatibility

v0's DateAdapter is a SUPERSET of date-io's IUtils interface. Vuetify 3's is a SUBSET.

Tasks

  • Create adapter factory pattern for community date-io adapters
  • Build reference adapters: @vuetify/v0-date-dayjs, @vuetify/v0-date-luxon, @vuetify/v0-date-fns
  • Document adapter creation guide
  • Consider bridge package for Vuetify 3 compatibility layer
  • Evaluate keeping Temporal as default vs switching to date-io base

Files

  • v0 core: packages/0/src/composables/useDate/index.ts
  • v0 adapter: packages/0/src/composables/useDate/adapters/adapter.ts
  • v0 implementation: packages/0/src/composables/useDate/adapters/v0.ts
  • Vuetify 3: packages/vuetify/src/composables/date/

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions