feat: use @internationalized/date instead

packages/core/src/i18n/useDateFormatter.ts

@@ -8,7 +8,6 @@ const dateFormatterCache = new Map<string, DateFormatter>();
 
 function getFormatter(locale: string, options: Intl.DateTimeFormatOptions = {}) {
   const cacheKey = locale + JSON.stringify(options);
-  console.log(cacheKey);
   let formatter = dateFormatterCache.get(cacheKey);
   if (!formatter) {
     formatter = new DateFormatter(locale, options);

packages/core/src/i18n/useLocale.ts

@@ -3,8 +3,7 @@ import { getConfig } from '../config';
 import { getDirection } from './getDirection';
 import { getWeekInfo } from './getWeekInfo';
 import { Maybe, Reactivify } from '../types';
-import { getCalendar } from './getCalendar';
-import { Calendar } from '@internationalized/date';
+import { Calendar, GregorianCalendar } from '@internationalized/date';
 import { getTimeZone } from './getTimezone';
 
 export type NumberLocaleExtension = `nu-${string}`;
@@ -49,7 +48,7 @@ export function useLocale(
   const localeInstance = computed(() => new Intl.Locale(localeString.value));
   const direction = computed(() => getDirection(localeInstance.value));
   const weekInfo = computed(() => getWeekInfo(localeInstance.value));
-  const calendar = computed(() => getCalendar(localeInstance.value));
+  const calendar = computed(() => toValue(extensions.calendar) ?? (new GregorianCalendar() as Calendar));
   const timeZone = computed(() => getTimeZone(localeInstance.value));
   const locale = computed(() => localeInstance.value.toString());
 

packages/core/src/useCalendar/types.ts

@@ -43,6 +43,7 @@ export interface CalendarContext {
   locale: Ref<string>;
   weekInfo: Ref<WeekInfo>;
   calendar: Ref<Calendar>;
+  timeZone: Ref<string>;
   getSelectedDate: () => ZonedDateTime;
   getMinDate: () => Maybe<ZonedDateTime>;
   getMaxDate: () => Maybe<ZonedDateTime>;

packages/core/src/useCalendar/useCalendar.ts

@@ -10,7 +10,7 @@ import { useLabel } from '../a11y';
 import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { CalendarContextKey, MONTHS_COLUMNS_COUNT, YEAR_CELLS_COUNT, YEARS_COLUMNS_COUNT } from './constants';
 import { CalendarPanel, useCalendarPanel } from './useCalendarPanel';
-import { Calendar, ZonedDateTime, fromDate, now } from '@internationalized/date';
+import { Calendar, ZonedDateTime, now, toCalendar } from '@internationalized/date';
 
 export interface CalendarProps {
   /**
@@ -85,7 +85,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     calendar: () => toValue(props.calendar),
   });
 
-  const selectedDate = computed(() => toValue(props.currentDate) ?? now(toValue(timeZone)));
+  const selectedDate = computed(() => toValue(props.currentDate) ?? toCalendar(now(toValue(timeZone)), calendar.value));
   const focusedDay = shallowRef<ZonedDateTime>();
   const { isOpen } = usePopoverController(pickerEl, { disabled: props.disabled });
 
@@ -101,6 +101,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     weekInfo,
     locale,
     calendar,
+    timeZone,
     getSelectedDate: () => selectedDate.value,
     getFocusedDate: getFocusedOrSelected,
     setDate: (date: ZonedDateTime, panel?: CalendarPanelType) => {
@@ -175,7 +176,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'onDaySelected'> =
     }
 
     if (!focusedDay.value) {
-      focusedDay.value = fromDate(selectedDate.value.toDate(), selectedDate.value.timeZone);
+      focusedDay.value = selectedDate.value.copy();
     }
 
     await nextTick();

packages/core/src/useCalendar/useCalendarPanel.ts

@@ -4,7 +4,7 @@ import { useDateFormatter } from '../i18n';
 import { Reactivify } from '../types';
 import { normalizeProps } from '../utils/common';
 import { YEAR_CELLS_COUNT } from './constants';
-import { now } from '@internationalized/date';
+import { now, toCalendar } from '@internationalized/date';
 
 export interface CalendarDayPanel {
   type: 'day';
@@ -79,7 +79,7 @@ export function useCalendarPanel(_props: Reactivify<CalendarPanelProps>, context
 }
 
 function useCalendarDaysPanel(
-  { weekInfo, getFocusedDate, getSelectedDate, locale, getMinDate, getMaxDate }: CalendarContext,
+  { weekInfo, getFocusedDate, getSelectedDate, locale, timeZone, calendar, getMinDate, getMaxDate }: CalendarContext,
   daysOfWeekFormat?: MaybeRefOrGetter<Intl.DateTimeFormatOptions['weekday']>,
 ) {
   const dayFormatter = useDateFormatter(locale, () => ({ weekday: toValue(daysOfWeekFormat) ?? 'short' }));
@@ -98,7 +98,7 @@ function useCalendarDaysPanel(
 
     // Always use 6 weeks (42 days) for consistent layout
     const gridDays = 42;
-    const rightNow = now(focused.timeZone);
+    const rightNow = toCalendar(now(timeZone.value), calendar.value);
     const minDate = getMinDate();
     const maxDate = getMaxDate();
 

packages/core/src/useDateTimeField/temporalPartial.ts

@@ -1,9 +1,9 @@
 import { DateTimeSegmentType, TemporalPartial } from './types';
 import { isObject } from '../../../shared/src';
-import { Calendar, ZonedDateTime, fromDate, now } from '@internationalized/date';
+import { Calendar, ZonedDateTime, now, toCalendar } from '@internationalized/date';
 
 export function createTemporalPartial(calendar: Calendar, timeZone: string) {
-  const zonedDateTime = now(timeZone) as TemporalPartial;
+  const zonedDateTime = toCalendar(now(timeZone), calendar) as TemporalPartial;
   zonedDateTime['~fw_temporal_partial'] = {};
 
   return zonedDateTime;
@@ -13,7 +13,7 @@ export function toTemporalPartial(
   value: ZonedDateTime | TemporalPartial,
   setParts?: DateTimeSegmentType[],
 ): TemporalPartial {
-  const clone = fromDate(value.toDate(), value.timeZone) as TemporalPartial;
+  const clone = value.copy() as TemporalPartial;
   clone['~fw_temporal_partial'] = isTemporalPartial(value) ? value['~fw_temporal_partial'] : {};
   if (setParts) {
     setParts.forEach(part => {

packages/core/src/useDateTimeField/useDateTimeField.ts

@@ -75,12 +75,12 @@ export interface DateTimeFieldProps {
   /**
    * The minimum date to use for the field.
    */
-  minDate?: Date;
+  min?: Date;
 
   /**
    * The maximum date to use for the field.
    */
-  maxDate?: Date;
+  max?: Date;
 }
 
 export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'>) {
@@ -105,7 +105,7 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
     timeZone: timeZone,
     locale: locale,
     model: {
-      get: () => toValue(props.minDate),
+      get: () => toValue(props.min),
     },
   });
 
@@ -114,7 +114,7 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
     timeZone: timeZone,
     locale: locale,
     model: {
-      get: () => toValue(props.maxDate),
+      get: () => toValue(props.max),
     },
   });
 
@@ -160,6 +160,7 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
   const calendarProps: Reactivify<CalendarProps, 'onDaySelected'> = {
     locale: () => locale.value,
     currentDate: temporalValue,
+    calendar: calendar,
     onDaySelected: onValueChange,
     minDate: () => (isTemporalPartial(minDate.value) ? undefined : minDate.value),
     maxDate: () => (isTemporalPartial(maxDate.value) ? undefined : maxDate.value),

packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts

@@ -12,7 +12,7 @@ import {
 } from './constants';
 import { NumberParserContext, useNumberParser } from '../i18n';
 import { isTemporalPartial, isTemporalPartSet, toTemporalPartial } from './temporalPartial';
-import { ZonedDateTime, DateFormatter, fromDate } from '@internationalized/date';
+import { ZonedDateTime, DateFormatter } from '@internationalized/date';
 
 export interface DateTimeSegmentRegistration {
   id: string;
@@ -105,7 +105,7 @@ export function useDateTimeSegmentGroup({
 
   function withAllPartsSet(value: ZonedDateTime) {
     if (isTemporalPartial(value) && isAllPartsSet(value)) {
-      return fromDate(value.toDate(), value.timeZone); // clones the value and drops the partial flag
+      return value.copy(); // clones the value and drops the partial flag
     }
 
     return value;

packages/playground/src/App.vue

@@ -2,6 +2,7 @@
 import DateField from '@/components/DateField.vue';
 import { createCalendar } from '@internationalized/date';
 
+const today = new Date();
 const minDate = new Date('2025-01-01');
 const maxDate = new Date('2025-01-31');
 </script>
@@ -11,10 +12,12 @@ const maxDate = new Date('2025-01-31');
     <DateField
       name="date"
       label="Date"
+      :value="today"
+      locale="ar"
       :calendar="createCalendar('islamic-umalqura')"
       :format-options="{
         day: '2-digit',
-        month: '2-digit',
+        month: 'long',
         year: 'numeric',
         hour: '2-digit',
         hour12: true,