2.5 KiB
Task: Global Date & Time Formatting Standard (Hydration-safe)
Objective
Eliminate all React hydration mismatch issues caused by inconsistent date formatting between Server Components and Client Components.
Establish a single global date formatting standard across the entire application.
Problem
Current implementation uses:
- Date.toLocaleString()
- Date.toLocaleDateString()
- Date.toLocaleTimeString()
These APIs depend on:
- Browser Locale
- Operating System Locale
- Server Locale
- Server Timezone
- Browser Timezone
This causes inconsistent rendering between SSR and Client Hydration.
Example
Server
16/6/2569 17:00:00
Client
6/16/2026, 5:00:00 PM
Result
React Hydration Error
Requirements
1. Create Global Date Utility
Create
src/lib/date-format.ts
All UI must use this utility.
2. Never use
Forbidden
toLocaleString()
toLocaleDateString()
toLocaleTimeString()
Intl.DateTimeFormat()
new Date().toString()
directly inside React components.
3. Standard Display Format
Date only
YYYY-MM-DD
Example
2026-06-25
Date Time
YYYY-MM-DD HH:mm:ss
Example
2026-06-25 14:35:20
Time
HH:mm:ss
Month
YYYY-MM
Year
YYYY
4. Timezone
Always
Asia/Bangkok
Never depend on browser timezone.
5. Calendar
Always use
Gregorian Calendar
Never Buddhist Calendar.
Display
2026
Never
2569
6. SSR Safe
Formatting must produce identical output on
- Server
- Client
- Static Render
- Hydration
No locale-dependent output.
7. Usage
Replace every occurrence of
toLocaleString()
toLocaleDateString()
toLocaleTimeString()
Intl.DateTimeFormat()
with
formatDate()
formatDateTime()
formatTime()
formatMonth()
formatYear()
8. Dashboard
Update all CRM Dashboard components.
Especially
- Approval Metrics
- Lead Tables
- Opportunity Tables
- Quotation Tables
- Activity Timeline
- Follow-up
- Reports
9. Tables
Default date column
YYYY-MM-DD
Only show time when business requires it.
10. Forms
Date Picker
Store
ISO8601 UTC
Display
YYYY-MM-DD
11. API
API returns
ISO8601
Example
2026-06-25T10:35:20.000Z
UI handles formatting.
Acceptance Criteria
- No Hydration mismatch.
- No locale-dependent rendering.
- Same output in Server and Client.
- All dashboard pages use global formatter.
- All table date columns display YYYY-MM-DD.
- No usage of toLocaleString(), toLocaleDateString(), toLocaleTimeString() inside UI components.