Bootspring
HomeGet Started

Date Handling Pattern

Work with dates, times, and timezones consistently using date-fns for type-safe date manipulation, formatting, and validation.

What's Included#

  • Core date formatting and parsing utilities with date-fns
  • Relative time display ("2 hours ago") with auto-refresh React component
  • Timezone-aware operations using date-fns-tz for display and conversion
  • Date range presets and utilities for filtering and selection
  • Date range picker and date input React components
  • Zod schemas for date validation including future, past, and range checks

Usage#

Via CLI#

Loading code block...

Via AI Assistant#

Ask your AI assistant:

  • "Use the date handling pattern from Bootspring"
  • "Apply the Bootspring date handling pattern to my project"

Key Considerations#

  • Always store dates in UTC in the database and convert to user timezone for display
  • Use ISO 8601 strings for API transfers and parseISO for safe parsing
  • Check dates with isValid() before formatting to avoid runtime errors
  • Import only the specific date-fns functions you need for optimal tree shaking
  • Refresh relative time displays periodically to keep "time ago" values accurate

Related Patterns#