CRAFT-1636: DateTimeField not display the correct current month view.

[misama-ct]

Fix DateTimeField Calendar Display for Edge Case Timezones

🐛 Problem

The DateTimeField component was not displaying the correct current month and year when using timezones that are significantly ahead of UTC, particularly on the first day of any month. This occurred because the calendar header functions (getMonthCalendarLabel and getYearCalendarLabel) were interpreting dates in UTC context rather than the specified timezone.

Example Issue:

• System time: January 1st in Pacific/Kiritimati (UTC+14)
• UTC time: December 31st (previous day)
• Expected: Calendar shows January 2025
• Actual: Calendar showed December 2024

🔧 Solution

Enhanced the getMonthCalendarLabel and getYearCalendarLabel functions in @commercetools-uikit/calendar-time-utils to accept an optional timezone parameter. When provided, these functions now use moment.tz() to interpret dates in the specified timezone context.

📋 Changes Made

packages/calendar-time-utils/src/calendar-time.ts

• Modified getMonthCalendarLabel to accept optional timeZone parameter
• Modified getYearCalendarLabel to accept optional timeZone parameter
• Functions now use timezone-aware moment parsing when timezone is provided
• Maintains backward compatibility with existing usage

packages/components/inputs/date-time-input/src/date-time-input.tsx

• Updated CalendarHeader component to pass this.props.timeZone to both label functions
• Ensures calendar header displays correct month/year in the component's timezone context

Test Coverage

• Added comprehensive test suite for timezone edge cases
• Tests cover scenarios where timezone conversion changes both month and year
• Tests verify correct display for various timezone offsets
• Covers both "today" display and specific date value scenarios

🧪 Test Cases Added

Timezone Edge Cases:

1. Current day shifting: When "today" in target timezone is "yesterday" in UTC
2. Month boundary crossing: When timezone conversion changes the month
3. Year boundary crossing: When timezone conversion changes the year
4. Multiple timezone scenarios: Testing various timezone offsets

🎯 Impact

• Fixes: CRAFT-1636 - DateTimeField not displaying correct current month view
• Scope: All DateTimeField and DateTimeInput components using timezones
• Breaking Changes: None - changes are backward compatible
• Risk: Low - existing functionality preserved, new parameter is optional

📚 Before/After Example

// Before (incorrect)
getMonthCalendarLabel('2024-12-31T10:00:00.000Z', 'en')
// Returns: "December" (wrong - UTC interpretation)

// After (correct)  
getMonthCalendarLabel('2024-12-31T10:00:00.000Z', 'en', 'Pacific/Kiritimati')
// Returns: "January" (correct - timezone-aware interpretation)

🚀 Testing

• All existing tests pass
• New timezone edge case tests added and passing
• Manual testing performed with various timezone scenarios
• Verified fix works for reported bug scenario

---

Closes: CRAFT-1636
Type: Bug Fix
Packages: @commercetools-uikit/calendar-time-utils, @commercetools-uikit/date-time-input

[changeset-bot]

🦋 Changeset detected

Latest commit: 56411a6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 98 packages

Name	Type
@commercetools-uikit/date-time-input	Patch
@commercetools-uikit/calendar-time-utils	Patch
@commercetools-uikit/date-time-field	Patch
@commercetools-uikit/inputs	Patch
@commercetools-uikit/date-input	Patch
@commercetools-uikit/date-range-input	Patch
@commercetools-uikit/fields	Patch
@commercetools-frontend/ui-kit	Patch
@commercetools-uikit/date-field	Patch
@commercetools-uikit/date-range-field	Patch
@commercetools-uikit/design-system	Patch
@commercetools-uikit/calendar-utils	Patch
@commercetools-uikit/hooks	Patch
@commercetools-uikit/i18n	Patch
@commercetools-uikit/localized-utils	Patch
@commercetools-uikit/utils	Patch
@commercetools-uikit/accessible-hidden	Patch
@commercetools-uikit/avatar	Patch
@commercetools-uikit/card	Patch
@commercetools-uikit/collapsible-motion	Patch
@commercetools-uikit/collapsible-panel	Patch
@commercetools-uikit/collapsible	Patch
@commercetools-uikit/constraints	Patch
@commercetools-uikit/data-table-manager	Patch
@commercetools-uikit/data-table	Patch
@commercetools-uikit/field-errors	Patch
@commercetools-uikit/field-label	Patch
@commercetools-uikit/field-warnings	Patch
@commercetools-uikit/filters	Patch
@commercetools-uikit/grid	Patch
@commercetools-uikit/icons	Patch
@commercetools-uikit/label	Patch
@commercetools-uikit/link	Patch
@commercetools-uikit/loading-spinner	Patch
@commercetools-uikit/messages	Patch
@commercetools-uikit/notifications	Patch
@commercetools-uikit/pagination	Patch
@commercetools-uikit/primary-action-dropdown	Patch
@commercetools-uikit/progress-bar	Patch
@commercetools-uikit/quick-filters	Patch
@commercetools-uikit/stamp	Patch
@commercetools-uikit/tag	Patch
@commercetools-uikit/text	Patch
@commercetools-uikit/tooltip	Patch
@commercetools-uikit/view-switcher	Patch
@commercetools-uikit/accessible-button	Patch
@commercetools-uikit/flat-button	Patch
@commercetools-uikit/icon-button	Patch
@commercetools-uikit/link-button	Patch
@commercetools-uikit/primary-button	Patch
@commercetools-uikit/secondary-button	Patch
@commercetools-uikit/secondary-icon-button	Patch
@commercetools-uikit/dropdown-menu	Patch
@commercetools-uikit/async-creatable-select-field	Patch
@commercetools-uikit/async-select-field	Patch
@commercetools-uikit/creatable-select-field	Patch
@commercetools-uikit/localized-multiline-text-field	Patch
@commercetools-uikit/localized-text-field	Patch
@commercetools-uikit/money-field	Patch
@commercetools-uikit/multiline-text-field	Patch
@commercetools-uikit/number-field	Patch
@commercetools-uikit/password-field	Patch
@commercetools-uikit/radio-field	Patch
@commercetools-uikit/search-select-field	Patch
@commercetools-uikit/select-field	Patch
@commercetools-uikit/text-field	Patch
@commercetools-uikit/time-field	Patch
@commercetools-uikit/async-creatable-select-input	Patch
@commercetools-uikit/async-select-input	Patch
@commercetools-uikit/checkbox-input	Patch
@commercetools-uikit/creatable-select-input	Patch
@commercetools-uikit/input-utils	Patch
@commercetools-uikit/localized-money-input	Patch
@commercetools-uikit/localized-multiline-text-input	Patch
@commercetools-uikit/localized-rich-text-input	Patch
@commercetools-uikit/localized-text-input	Patch
@commercetools-uikit/money-input	Patch
@commercetools-uikit/multiline-text-input	Patch
@commercetools-uikit/number-input	Patch
@commercetools-uikit/password-input	Patch
@commercetools-uikit/radio-input	Patch
@commercetools-uikit/rich-text-input	Patch
@commercetools-uikit/rich-text-utils	Patch
@commercetools-uikit/search-select-input	Patch
@commercetools-uikit/search-text-input	Patch
@commercetools-uikit/select-input	Patch
@commercetools-uikit/select-utils	Patch
@commercetools-uikit/selectable-search-input	Patch
@commercetools-uikit/text-input	Patch
@commercetools-uikit/time-input	Patch
@commercetools-uikit/toggle-input	Patch
@commercetools-uikit/spacings-inline	Patch
@commercetools-uikit/spacings-inset-squish	Patch
@commercetools-uikit/spacings-inset	Patch
@commercetools-uikit/spacings-stack	Patch
@commercetools-uikit/buttons	Patch
@commercetools-uikit/spacings	Patch
visual-testing-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 8, 2025 8:03am

[ByronDWall]

Thanks for fixing this!