90 lines
3.4 KiB
Markdown
90 lines
3.4 KiB
Markdown
# Date Formatting Consistency Fix
|
|
|
|
## Problem Identified
|
|
|
|
Two different creation dates were being displayed for the same interest record:
|
|
|
|
1. **Card description (mobile view)**: Showed "Created: 15/05/2025 02:06" ✅ (correct)
|
|
2. **Interests table summary**: Showed "Created: Dec 15, 1920 (104 years ago)" ❌ (incorrect)
|
|
|
|
## Root Cause Analysis
|
|
|
|
The issue was caused by **inconsistent date formatting functions** across different components:
|
|
|
|
- **InterestDetailsModal.vue**: Had a robust `formatDate` function that correctly handled multiple date formats (ISO, DD-MM-YYYY, YYYY-MM-DD)
|
|
- **interest-list.vue**: Had a simpler `formatDate` function that incorrectly parsed dates, causing the 1920 vs 2025 issue
|
|
|
|
## Solution Implemented
|
|
|
|
### 1. Created Unified Date Utilities (`utils/dateUtils.ts`)
|
|
|
|
```typescript
|
|
/**
|
|
* Unified date formatting utilities for consistent date display across the application
|
|
*/
|
|
|
|
export const formatDate = (dateString: string | null | undefined): string => {
|
|
// Handles multiple input formats: ISO, DD-MM-YYYY, YYYY-MM-DD, DD/MM/YYYY
|
|
// Returns format: DD/MM/YYYY HH:mm or DD/MM/YYYY
|
|
}
|
|
|
|
export const getRelativeTime = (dateString: string | null | undefined): string => {
|
|
// Returns: "Today", "Yesterday", "2 days ago", "3 weeks ago", etc.
|
|
}
|
|
|
|
export const formatDateUS = (dateString: string | null | undefined): string => {
|
|
// Returns US format: "Month DD, YYYY" (e.g., "Dec 15, 2025")
|
|
}
|
|
```
|
|
|
|
### 2. Updated Components to Use Unified Utilities
|
|
|
|
**interest-list.vue changes:**
|
|
- ✅ Added import: `import { formatDate, formatDateUS, getRelativeTime } from "@/utils/dateUtils"`
|
|
- ✅ Removed duplicate `formatDate` function (39 lines removed)
|
|
- ✅ Removed duplicate `getRelativeTime` function (32 lines removed)
|
|
- ✅ Now uses unified utilities for consistent date formatting
|
|
|
|
**InterestDetailsModal.vue changes:**
|
|
- ✅ Added import: `import { formatDate } from "@/utils/dateUtils"`
|
|
- ✅ Removed duplicate `formatDate` function (45 lines removed)
|
|
- ✅ Now uses unified utility for consistent date formatting
|
|
|
|
### 3. Robust Date Parsing Logic
|
|
|
|
The unified `formatDate` function handles multiple input formats:
|
|
- ✅ ISO dates: `"2025-06-09T22:58:47.731Z"`
|
|
- ✅ DD-MM-YYYY: `"15-05-2025"`
|
|
- ✅ DD/MM/YYYY: `"15/05/2025"`
|
|
- ✅ YYYY-MM-DD: `"2025-05-15"`
|
|
- ✅ Includes time when not midnight: `"15/05/2025 02:06"`
|
|
- ✅ Graceful error handling and fallbacks
|
|
|
|
## Result
|
|
|
|
✅ **Both views now show consistent, correctly formatted dates**
|
|
✅ **No more 1920 date errors**
|
|
✅ **Unified date formatting across the entire application**
|
|
✅ **Reduced code duplication (116 lines of duplicate code removed)**
|
|
✅ **More maintainable and reliable date handling**
|
|
|
|
## Files Modified
|
|
|
|
1. `utils/dateUtils.ts` - **NEW** unified date utilities
|
|
2. `pages/dashboard/interest-list.vue` - Updated to use unified utilities
|
|
3. `components/InterestDetailsModal.vue` - Updated to use unified utilities
|
|
|
|
## Testing
|
|
|
|
- ✅ Development server runs without compilation errors
|
|
- ✅ Components load successfully with unified date formatting
|
|
- ✅ Ready for user testing to verify date consistency
|
|
|
|
## Benefits
|
|
|
|
1. **Consistency**: All date displays use the same formatting logic
|
|
2. **Maintainability**: Single source of truth for date formatting
|
|
3. **Reliability**: Robust parsing handles multiple date formats
|
|
4. **Extensibility**: Easy to add new date formatting functions as needed
|
|
5. **Performance**: Removed duplicate code and processing
|