From e766084682147c9d46840a8986e7da6bdd7a1e52 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 27 Aug 2021 15:02:02 -0700
Subject: [PATCH 1/2] Calendar and TimeField integration into DatePicker
 (#2242)

* Be explicit about which functions accept which date/time types

* Enforce that onChange is sent the same type as is given to value/defaultValue with TS

* Don't change offset if setting the same field values in ZonedDateTime

* Time field integration into date picker calendar popover

* Calendar improvements

* Remove overflow balancing and always constrain instead

* Add DateField export

* Ignore time when adding or subtracting from a CalendarDate

* Improve constraining behavior of Japanese calendar

* Work around browser bugs with hour cycles

* Add tests for queries

* Add tests for selecting date + time

* Update Calendar tests

* Remove support for year and month granularity

* Fix test

* TypeScript is dumb

* Fix comment

* lint

* Update packages/@react-stately/datepicker/src/useDateRangePickerState.ts

Co-authored-by: Robert Snow <rsnow@adobe.com>

Co-authored-by: Robert Snow <rsnow@adobe.com>
---
 .../date/src/CalendarDate.ts                  |  93 +++++-
 .../date/src/DateFormatter.ts                 | 179 +++++++++++
 .../date/src/calendars/BuddhistCalendar.ts    |   5 +-
 .../date/src/calendars/EthiopicCalendar.ts    |  20 +-
 .../date/src/calendars/GregorianCalendar.ts   |  13 +-
 .../date/src/calendars/HebrewCalendar.ts      |  12 +-
 .../date/src/calendars/IndianCalendar.ts      |   5 +-
 .../date/src/calendars/IslamicCalendar.ts     |  16 +-
 .../date/src/calendars/JapaneseCalendar.ts    | 102 +++++-
 .../date/src/calendars/PersianCalendar.ts     |   6 +-
 .../date/src/calendars/TaiwanCalendar.ts      |  15 +-
 .../@internationalized/date/src/conversion.ts |  64 ++--
 packages/@internationalized/date/src/index.ts |   2 +-
 .../date/src/manipulation.ts                  | 165 +++++-----
 .../@internationalized/date/src/queries.ts    |  49 ++-
 .../@internationalized/date/src/string.ts     |  20 +-
 packages/@internationalized/date/src/types.ts |  38 ++-
 .../date/tests/DateFormatter.test.js          |  90 ++++++
 .../date/tests/ZonedDateTime.test.js          |   5 +
 .../date/tests/manipulation.test.js           | 185 +++++++++--
 .../date/tests/queries.test.js                | 111 +++++++
 .../@react-aria/calendar/src/useCalendar.ts   |   7 +-
 .../calendar/src/useCalendarBase.ts           |   3 +-
 .../calendar/src/useCalendarCell.ts           |  32 +-
 .../calendar/src/useRangeCalendar.ts          |  10 +-
 .../datepicker/src/useDateField.ts            |   4 +-
 .../datepicker/src/useDatePicker.ts           |  10 +-
 .../datepicker/src/useDateRangePicker.ts      |  10 +-
 .../datepicker/src/useDateSegment.ts          |  27 +-
 .../@react-spectrum/calendar/package.json     |   1 +
 .../@react-spectrum/calendar/src/Calendar.tsx |   4 +-
 .../calendar/src/CalendarCell.tsx             |   8 +-
 .../calendar/src/RangeCalendar.tsx            |   4 +-
 .../calendar/stories/Calendar.stories.tsx     |  57 +++-
 .../stories/RangeCalendar.stories.tsx         |  56 +++-
 .../calendar/test/Calendar.test.js            |  92 ++----
 .../calendar/test/CalendarBase.test.js        | 174 ++++-------
 .../calendar/test/RangeCalendar.test.js       | 136 +++-----
 .../@react-spectrum/datepicker/package.json   |   1 +
 .../datepicker/src/DateField.tsx              |  30 ++
 .../datepicker/src/DatePicker.tsx             |  33 +-
 .../datepicker/src/DatePickerField.tsx        |  11 +-
 .../datepicker/src/DatePickerSegment.tsx      |   4 +-
 .../datepicker/src/DateRangePicker.tsx        |  70 +++--
 .../datepicker/src/TimeField.tsx              |  10 +-
 .../@react-spectrum/datepicker/src/index.ts   |   1 +
 .../datepicker/stories/DateField.stories.tsx  | 253 +++++++++++++++
 .../datepicker/stories/DatePicker.stories.tsx |   8 +-
 .../stories/DateRangePicker.stories.tsx       |   4 +
 .../datepicker/stories/TimeField.stories.tsx  |  12 +-
 .../datepicker/test/DatePicker.test.js        | 146 ++++++++-
 .../datepicker/test/DateRangePicker.test.js   | 165 +++++++++-
 packages/@react-stately/calendar/src/types.ts |   7 +-
 .../calendar/src/useCalendarState.ts          |  47 +--
 .../calendar/src/useRangeCalendarState.ts     |  43 +--
 .../@react-stately/datepicker/package.json    |   1 -
 .../datepicker/src/useDatePickerFieldState.ts | 291 ++++++++++--------
 .../datepicker/src/useDatePickerState.ts      |  71 ++++-
 .../datepicker/src/useDateRangePickerState.ts |  95 ++++--
 .../@react-stately/datepicker/src/utils.ts    |   4 +-
 packages/@react-types/calendar/package.json   |   1 +
 packages/@react-types/calendar/src/index.d.ts |  17 +-
 .../@react-types/datepicker/src/index.d.ts    |  40 ++-
 packages/@react-types/shared/src/inputs.d.ts  |   4 +-
 64 files changed, 2297 insertions(+), 902 deletions(-)
 create mode 100644 packages/@internationalized/date/src/DateFormatter.ts
 create mode 100644 packages/@internationalized/date/tests/DateFormatter.test.js
 create mode 100644 packages/@internationalized/date/tests/queries.test.js
 create mode 100644 packages/@react-spectrum/datepicker/src/DateField.tsx
 create mode 100644 packages/@react-spectrum/datepicker/stories/DateField.stories.tsx

diff --git a/packages/@internationalized/date/src/CalendarDate.ts b/packages/@internationalized/date/src/CalendarDate.ts
index 1ed27d3b4b1..6fc20d77d1e 100644
--- a/packages/@internationalized/date/src/CalendarDate.ts
+++ b/packages/@internationalized/date/src/CalendarDate.ts
@@ -11,7 +11,7 @@
  */
 
 import {add, addTime, addZoned, cycleDate, cycleTime, cycleZoned, set, setTime, setZoned, subtract, subtractTime, subtractZoned} from './manipulation';
-import {Calendar, CycleOptions, CycleTimeOptions, DateField, DateFields, Disambiguation, Duration, OverflowBehavior, TimeField, TimeFields} from './types';
+import {AnyCalendarDate, AnyTime, Calendar, CycleOptions, CycleTimeOptions, DateField, DateFields, Disambiguation, Duration, TimeField, TimeFields} from './types';
 import {compareDate, compareTime} from './queries';
 import {dateTimeToString, dateToString, timeToString, zonedDateTimeToString} from './string';
 import {GregorianCalendar} from './calendars/GregorianCalendar';
@@ -38,6 +38,10 @@ function shiftArgs(args: any[]) {
 }
 
 export class CalendarDate {
+  // This prevents TypeScript from allowing other types with the same fields to match.
+  // i.e. a ZonedDateTime should not be be passable to a parameter that expects CalendarDate.
+  // If that behavior is desired, use the AnyCalendarDate interface instead.
+  #type;
   public readonly calendar: Calendar;
   public readonly era: string;
   public readonly year: number;
@@ -76,8 +80,8 @@ export class CalendarDate {
     return subtract(this, duration);
   }
 
-  set(fields: DateFields, behavior?: OverflowBehavior) {
-    return set(this, fields, behavior);
+  set(fields: DateFields) {
+    return set(this, fields);
   }
 
   cycle(field: DateField, amount: number, options?: CycleOptions) {
@@ -92,12 +96,15 @@ export class CalendarDate {
     return dateToString(this);
   }
 
-  compare(b: CalendarDate) {
+  compare(b: AnyCalendarDate) {
     return compareDate(this, b);
   }
 }
 
 export class Time {
+  // This prevents TypeScript from allowing other types with the same fields to match.
+  #type;
+
   constructor(
     public readonly hour: number = 0,
     public readonly minute: number = 0,
@@ -117,8 +124,8 @@ export class Time {
     return subtractTime(this, duration);
   }
 
-  set(fields: TimeFields, behavior?: OverflowBehavior) {
-    return setTime(this, fields, behavior);
+  set(fields: TimeFields) {
+    return setTime(this, fields);
   }
 
   cycle(field: TimeField, amount: number, options?: CycleTimeOptions) {
@@ -129,12 +136,19 @@ export class Time {
     return timeToString(this);
   }
 
-  compare(b: Time) {
+  compare(b: AnyTime) {
     return compareTime(this, b);
   }
 }
 
-export class CalendarDateTime extends CalendarDate {
+export class CalendarDateTime {
+  // This prevents TypeScript from allowing other types with the same fields to match.
+  #type;
+  public readonly calendar: Calendar;
+  public readonly era: string;
+  public readonly year: number;
+  public readonly month: number;
+  public readonly day: number;
   public readonly hour: number;
   public readonly minute: number;
   public readonly second: number;
@@ -145,7 +159,16 @@ export class CalendarDateTime extends CalendarDate {
   constructor(calendar: Calendar, era: string, year: number, month: number, day: number, hour?: number, minute?: number, second?: number, millisecond?: number);
   constructor(...args: any[]) {
     let [calendar, era, year, month, day] = shiftArgs(args);
-    super(calendar, era, year, month, day);
+    this.calendar = calendar;
+    this.era = era;
+    this.year = year;
+    this.month = month;
+    this.day = day;
+
+    if (this.calendar.balanceDate) {
+      this.calendar.balanceDate(this);
+    }
+
     this.hour = args.shift() || 0;
     this.minute = args.shift() || 0;
     this.second = args.shift() || 0;
@@ -160,8 +183,16 @@ export class CalendarDateTime extends CalendarDate {
     }
   }
 
-  set(fields: DateFields & TimeFields, behavior?: OverflowBehavior) {
-    return set(setTime(this, fields, behavior), fields, behavior);
+  add(duration: Duration) {
+    return add(this, duration);
+  }
+
+  subtract(duration: Duration) {
+    return subtract(this, duration);
+  }
+
+  set(fields: DateFields & TimeFields) {
+    return set(setTime(this, fields), fields);
   }
 
   cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions) {
@@ -176,11 +207,15 @@ export class CalendarDateTime extends CalendarDate {
     }
   }
 
+  toDate(timeZone: string) {
+    return toDate(this, timeZone);
+  }
+
   toString() {
     return dateTimeToString(this);
   }
 
-  compare(b: CalendarDate | CalendarDateTime) {
+  compare(b: CalendarDate | CalendarDateTime | ZonedDateTime) {
     let res = compareDate(this, b);
     if (res === 0) {
       return compareTime(this, toCalendarDateTime(b));
@@ -190,7 +225,18 @@ export class CalendarDateTime extends CalendarDate {
   }
 }
 
-export class ZonedDateTime extends CalendarDateTime {
+export class ZonedDateTime {
+  // This prevents TypeScript from allowing other types with the same fields to match.
+  #type;
+  public readonly calendar: Calendar;
+  public readonly era: string;
+  public readonly year: number;
+  public readonly month: number;
+  public readonly day: number;
+  public readonly hour: number;
+  public readonly minute: number;
+  public readonly second: number;
+  public readonly millisecond: number;
   public readonly timeZone: string;
   public readonly offset: number;
 
@@ -201,9 +247,22 @@ export class ZonedDateTime extends CalendarDateTime {
     let [calendar, era, year, month, day] = shiftArgs(args);
     let timeZone = args.shift();
     let offset = args.shift();
-    super(calendar, era, year, month, day, ...args);
+    this.calendar = calendar;
+    this.era = era;
+    this.year = year;
+    this.month = month;
+    this.day = day;
+
+    if (this.calendar.balanceDate) {
+      this.calendar.balanceDate(this);
+    }
+
     this.timeZone = timeZone;
     this.offset = offset;
+    this.hour = args.shift() || 0;
+    this.minute = args.shift() || 0;
+    this.second = args.shift() || 0;
+    this.millisecond = args.shift() || 0;
   }
 
   copy(): ZonedDateTime {
@@ -222,8 +281,8 @@ export class ZonedDateTime extends CalendarDateTime {
     return subtractZoned(this, duration);
   }
 
-  set(fields: DateFields & TimeFields, behavior?: OverflowBehavior, disambiguation?: Disambiguation) {
-    return setZoned(this, fields, behavior, disambiguation);
+  set(fields: DateFields & TimeFields, disambiguation?: Disambiguation) {
+    return setZoned(this, fields, disambiguation);
   }
 
   cycle(field: DateField | TimeField, amount: number, options?: CycleTimeOptions) {
@@ -244,6 +303,6 @@ export class ZonedDateTime extends CalendarDateTime {
 
   compare(b: CalendarDate | CalendarDateTime | ZonedDateTime) {
     // TODO: Is this a bad idea??
-    return this.toDate() - toZoned(b, this.timeZone).toDate();
+    return this.toDate().getTime() - toZoned(b, this.timeZone).toDate().getTime();
   }
 }
diff --git a/packages/@internationalized/date/src/DateFormatter.ts b/packages/@internationalized/date/src/DateFormatter.ts
new file mode 100644
index 00000000000..3ab8ac7aafe
--- /dev/null
+++ b/packages/@internationalized/date/src/DateFormatter.ts
@@ -0,0 +1,179 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+let formatterCache = new Map<string, Intl.DateTimeFormat>();
+
+interface ResolvedDateTimeFormatOptions extends Intl.ResolvedDateTimeFormatOptions {
+  hourCycle?: Intl.DateTimeFormatOptions['hourCycle']
+}
+
+export class DateFormatter implements Intl.DateTimeFormat {
+  private formatter: Intl.DateTimeFormat;
+  private options: Intl.DateTimeFormatOptions;
+  private resolvedHourCycle: Intl.DateTimeFormatOptions['hourCycle'];
+
+  constructor(locale: string, options: Intl.DateTimeFormatOptions = {}) {
+    this.formatter = getCachedDateFormatter(locale, options);
+    this.options = options;
+  }
+
+  format(value: Date): string {
+    return this.formatter.format(value);
+  }
+
+  formatToParts(value: Date): Intl.DateTimeFormatPart[] {
+    return this.formatter.formatToParts(value);
+  }
+
+  formatRange(start: Date, end: Date) {
+    // @ts-ignore
+    if (typeof this.formatter.formatRange === 'function') {
+      // @ts-ignore
+      return this.formatter.formatRange(start, end);
+    }
+
+    if (end < start) {
+      throw new RangeError('End date must be >= start date');
+    }
+
+    // Very basic fallback for old browsers.
+    return `${this.formatter.format(start)} – ${this.formatter.format(end)}`;
+  }
+
+  formatRangeToParts(start: Date, end: Date) {
+    // @ts-ignore
+    if (typeof this.formatter.formatRangeToParts === 'function') {
+      // @ts-ignore
+      return this.formatter.formatRangeToParts(start, end);
+    }
+
+    if (end < start) {
+      throw new RangeError('End date must be >= start date');
+    }
+
+    let startParts = this.formatter.formatToParts(start);
+    let endParts = this.formatter.formatToParts(end);
+    return [
+      ...startParts.map(p => ({...p, source: 'startRange'})),
+      {type: 'literal', value: ' – ', source: 'shared'},
+      ...endParts.map(p => ({...p, source: 'endRange'}))
+    ];
+  }
+
+  resolvedOptions(): ResolvedDateTimeFormatOptions {
+    let resolvedOptions = this.formatter.resolvedOptions() as ResolvedDateTimeFormatOptions;
+    if (hasBuggyResolvedHourCycle()) {
+      if (!this.resolvedHourCycle) {
+        this.resolvedHourCycle = getResolvedHourCycle(resolvedOptions.locale, this.options);
+      }
+      resolvedOptions.hourCycle = this.resolvedHourCycle;
+      resolvedOptions.hour12 = this.resolvedHourCycle === 'h11' || this.resolvedHourCycle === 'h12';
+    }
+
+    return resolvedOptions;
+  }
+}
+
+// There are multiple bugs involving the hour12 and hourCycle options in various browser engines.
+//   - Chrome [1] (and the ECMA 402 spec [2]) resolve hour12: false in English and other locales to h24 (24:00 - 23:59)
+//     rather than h23 (00:00 - 23:59). Same can happen with hour12: true in French, which Chrome resolves to h11 (00:00 - 11:59)
+//     rather than h12 (12:00 - 11:59).
+//   - WebKit returns an incorrect hourCycle resolved option in the French locale due to incorrect parsing of 'h' literal
+//     in the resolved pattern. It also formats incorrectly when specifying the hourCycle option for the same reason. [3]
+// [1] https://bugs.chromium.org/p/chromium/issues/detail?id=1045791
+// [2] https://github.com/tc39/ecma402/issues/402
+// [3] https://bugs.webkit.org/show_bug.cgi?id=229313
+
+// https://github.com/unicode-org/cldr/blob/018b55eff7ceb389c7e3fc44e2f657eae3b10b38/common/supplemental/supplementalData.xml#L4774-L4802
+const hour12Preferences = {
+  true: {
+    // Only Japanese uses the h11 style for 12 hour time. All others use h12.
+    ja: 'h11'
+  },
+  false: {
+    // All locales use h23 for 24 hour time. None use h24.
+  }
+};
+
+function getCachedDateFormatter(locale: string, options: Intl.DateTimeFormatOptions = {}): Intl.DateTimeFormat {
+  // Work around buggy hour12 behavior in Chrome / ECMA 402 spec by using hourCycle instead.
+  // Only apply the workaround if the issue is detected, because the hourCycle option is buggy in Safari.
+  if (typeof options.hour12 === 'boolean' && hasBuggyHour12Behavior()) {
+    options = {...options};
+    let pref = hour12Preferences[String(options.hour12)][locale.split('-')[0]];
+    let defaultHourCycle = options.hour12 ? 'h12' : 'h23';
+    options.hourCycle = pref ?? defaultHourCycle;
+    delete options.hour12;
+  }
+
+  let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
+  if (formatterCache.has(cacheKey)) {
+    return formatterCache.get(cacheKey);
+  }
+
+  let numberFormatter = new Intl.DateTimeFormat(locale, options);
+  formatterCache.set(cacheKey, numberFormatter);
+  return numberFormatter;
+}
+
+let _hasBuggyHour12Behavior: boolean = null;
+function hasBuggyHour12Behavior() {
+  if (_hasBuggyHour12Behavior == null) {
+    _hasBuggyHour12Behavior = new Intl.DateTimeFormat('en-US', {
+      hour: 'numeric',
+      hour12: false
+    }).format(new Date(2020, 2, 3, 0)) === '24';
+  }
+
+  return _hasBuggyHour12Behavior;
+}
+
+let _hasBuggyResolvedHourCycle: boolean = null;
+function hasBuggyResolvedHourCycle() {
+  if (_hasBuggyResolvedHourCycle == null) {
+    _hasBuggyResolvedHourCycle = (new Intl.DateTimeFormat('fr', {
+      hour: 'numeric',
+      hour12: false
+    }).resolvedOptions() as ResolvedDateTimeFormatOptions).hourCycle === 'h12';
+  }
+
+  return _hasBuggyResolvedHourCycle;
+}
+
+function getResolvedHourCycle(locale: string, options: Intl.DateTimeFormatOptions) {
+  // Work around buggy results in resolved hourCycle and hour12 options in WebKit.
+  // Format the minimum possible hour and maximum possible hour in a day and parse the results.
+  locale = locale.replace(/(-u-)?-nu-[a-zA-Z0-9]+/, '');
+  locale += (locale.includes('-u-') ? '' : '-u') + '-nu-latn';
+  let formatter = getCachedDateFormatter(locale, options);
+
+  let min = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 0)).find(p => p.type === 'hour').value, 10);
+  let max = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 23)).find(p => p.type === 'hour').value, 10);
+
+  if (min === 0 && max === 23) {
+    return 'h23';
+  }
+
+  if (min === 24 && max === 23) {
+    return 'h24';
+  }
+
+  if (min === 0 && max === 11) {
+    return 'h11';
+  }
+
+  if (min === 12 && max === 11) {
+    return 'h12';
+  }
+
+  throw new Error('Unexpected hour cycle result');
+}
diff --git a/packages/@internationalized/date/src/calendars/BuddhistCalendar.ts b/packages/@internationalized/date/src/calendars/BuddhistCalendar.ts
index 90edd49cdf5..84176d214d4 100644
--- a/packages/@internationalized/date/src/calendars/BuddhistCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/BuddhistCalendar.ts
@@ -13,6 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
+import {AnyCalendarDate} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {GregorianCalendar} from './GregorianCalendar';
 import {Mutable} from '../utils';
@@ -25,10 +26,10 @@ export class BuddhistCalendar extends GregorianCalendar {
   fromJulianDay(jd: number): CalendarDate {
     let date = super.fromJulianDay(jd) as Mutable<CalendarDate>;
     date.year -= BUDDHIST_ERA_START;
-    return date;
+    return date as CalendarDate;
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     return super.toJulianDay(
       new CalendarDate(
         date.year + BUDDHIST_ERA_START,
diff --git a/packages/@internationalized/date/src/calendars/EthiopicCalendar.ts b/packages/@internationalized/date/src/calendars/EthiopicCalendar.ts
index 3e3a004fdfb..768e83a5f4b 100644
--- a/packages/@internationalized/date/src/calendars/EthiopicCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/EthiopicCalendar.ts
@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar} from '../types';
+import {AnyCalendarDate, Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {Mutable} from '../utils';
 
@@ -73,10 +73,10 @@ export class EthiopicCalendar implements Calendar {
       date.year += AMETE_MIHRET_DELTA;
     }
 
-    return date;
+    return date as CalendarDate;
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     let year = date.year;
     if (date.era === 'AA') {
       year -= AMETE_MIHRET_DELTA;
@@ -85,7 +85,7 @@ export class EthiopicCalendar implements Calendar {
     return ceToJulianDay(ETHIOPIC_EPOCH, year, date.month, date.day);
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     let year = date.year;
     if (date.era === 'AA') {
       year -= AMETE_MIHRET_DELTA;
@@ -98,7 +98,7 @@ export class EthiopicCalendar implements Calendar {
     return 13;
   }
 
-  getDaysInYear(date: CalendarDate): number {
+  getDaysInYear(date: AnyCalendarDate): number {
     return 365 + getLeapDay(date.year);
   }
 
@@ -118,7 +118,7 @@ export class EthiopicAmeteAlemCalendar extends EthiopicCalendar {
     let date = julianDayToCE(this, ETHIOPIC_EPOCH, jd);
     date.era = 'AA';
     date.year += AMETE_MIHRET_DELTA;
-    return date;
+    return date as CalendarDate;
   }
 
   getEras() {
@@ -138,10 +138,10 @@ export class CopticCalendar extends EthiopicCalendar {
       date.era = 'CE';
     }
 
-    return date;
+    return date as CalendarDate;
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     let year = date.year;
     if (date.era === 'BCE') {
       year = 1 - year;
@@ -150,7 +150,7 @@ export class CopticCalendar extends EthiopicCalendar {
     return ceToJulianDay(COPTIC_EPOCH, year, date.month, date.day);
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     let year = date.year;
     if (date.era === 'BCE') {
       year = 1 - year;
@@ -159,7 +159,7 @@ export class CopticCalendar extends EthiopicCalendar {
     return getDaysInMonth(year, date.month);
   }
 
-  addYears(date: Mutable<CalendarDate>, years: number) {
+  addYears(date: Mutable<AnyCalendarDate>, years: number) {
     if (date.era === 'BCE') {
       years = -years;
     }
diff --git a/packages/@internationalized/date/src/calendars/GregorianCalendar.ts b/packages/@internationalized/date/src/calendars/GregorianCalendar.ts
index ae24a924aa1..da73f217e8a 100644
--- a/packages/@internationalized/date/src/calendars/GregorianCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/GregorianCalendar.ts
@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar} from '../types';
+import {AnyCalendarDate, Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {mod} from '../utils';
 
@@ -75,24 +75,25 @@ export class GregorianCalendar implements Calendar {
     return new CalendarDate(this, year, month, day);
   }
 
-  toJulianDay(date: CalendarDate): number {
+  toJulianDay(date: AnyCalendarDate): number {
     return gregorianToJulianDay(date.year, date.month, date.day);
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     return daysInMonth[isLeapYear(date.year) ? 'leapyear' : 'standard'][date.month - 1];
   }
 
-  getMonthsInYear(): number {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getMonthsInYear(date: AnyCalendarDate): number {
     return 12;
   }
 
-  getDaysInYear(date: CalendarDate): number {
+  getDaysInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 366 : 365;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getYearsInEra(date: CalendarDate): number {
+  getYearsInEra(date: AnyCalendarDate): number {
     return 9999;
   }
 
diff --git a/packages/@internationalized/date/src/calendars/HebrewCalendar.ts b/packages/@internationalized/date/src/calendars/HebrewCalendar.ts
index 0d3122ea96f..d7db658f623 100644
--- a/packages/@internationalized/date/src/calendars/HebrewCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/HebrewCalendar.ts
@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar} from '../types';
+import {AnyCalendarDate, Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {mod, Mutable} from '../utils';
 
@@ -154,7 +154,7 @@ export class HebrewCalendar implements Calendar {
     return new CalendarDate(this, year, month, day);
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     let jd = startOfYear(date.year);
     for (let month = 1; month < date.month; month++) {
       jd += getDaysInMonth(date.year, month);
@@ -163,15 +163,15 @@ export class HebrewCalendar implements Calendar {
     return jd + date.day + HEBREW_EPOCH;
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     return getDaysInMonth(date.year, date.month);
   }
 
-  getMonthsInYear(date: CalendarDate): number {
+  getMonthsInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 13 : 12;
   }
 
-  getDaysInYear(date: CalendarDate): number {
+  getDaysInYear(date: AnyCalendarDate): number {
     return getDaysInYear(date.year);
   }
 
@@ -183,7 +183,7 @@ export class HebrewCalendar implements Calendar {
     return ['AM'];
   }
 
-  addYears(date: Mutable<CalendarDate>, years: number) {
+  addYears(date: Mutable<AnyCalendarDate>, years: number) {
     // Keep date in the same month when switching between leap years and non leap years
     let nextYear = date.year + years;
     if (isLeapYear(date.year) && !isLeapYear(nextYear) && date.month > 6) {
diff --git a/packages/@internationalized/date/src/calendars/IndianCalendar.ts b/packages/@internationalized/date/src/calendars/IndianCalendar.ts
index db38a16cfe2..e17d4f39d1b 100644
--- a/packages/@internationalized/date/src/calendars/IndianCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/IndianCalendar.ts
@@ -13,6 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
+import {AnyCalendarDate} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {GregorianCalendar, gregorianToJulianDay, isLeapYear} from './GregorianCalendar';
 import {Mutable} from '../utils';
@@ -70,7 +71,7 @@ export class IndianCalendar extends GregorianCalendar {
     return new CalendarDate(this, indianYear, indianMonth, indianDay);
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     let year = date.year + INDIAN_ERA_START;
 
     let leapMonth: number;
@@ -97,7 +98,7 @@ export class IndianCalendar extends GregorianCalendar {
     return jd;
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     if (date.month === 1 && isLeapYear(date.year + INDIAN_ERA_START)) {
       return 31;
     }
diff --git a/packages/@internationalized/date/src/calendars/IslamicCalendar.ts b/packages/@internationalized/date/src/calendars/IslamicCalendar.ts
index 0891f61c5af..69f498e474f 100644
--- a/packages/@internationalized/date/src/calendars/IslamicCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/IslamicCalendar.ts
@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar} from '../types';
+import {AnyCalendarDate, Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
 
 const CIVIL_EPOC = 1948440; // CE 622 July 16 Friday (Julian calendar) / CE 622 July 19 (Gregorian calendar)
@@ -49,11 +49,11 @@ export class IslamicCivilCalendar implements Calendar {
     return julianDayToIslamic(this, CIVIL_EPOC, jd);
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     return islamicToJulianDay(CIVIL_EPOC, date.year, date.month, date.day);
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     let length = 29 + date.month % 2;
     if (date.month === 12 && isLeapYear(date.year)) {
       length++;
@@ -66,7 +66,7 @@ export class IslamicCivilCalendar implements Calendar {
     return 12;
   }
 
-  getDaysInYear(date: CalendarDate): number {
+  getDaysInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 355 : 354;
   }
 
@@ -86,7 +86,7 @@ export class IslamicTabularCalendar extends IslamicCivilCalendar {
     return julianDayToIslamic(this, ASTRONOMICAL_EPOC, jd);
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     return islamicToJulianDay(ASTRONOMICAL_EPOC, date.year, date.month, date.day);
   }
 }
@@ -177,7 +177,7 @@ export class IslamicUmalquraCalendar extends IslamicCivilCalendar {
     }
   }
 
-  toJulianDay(date: CalendarDate): number {
+  toJulianDay(date: AnyCalendarDate): number {
     if (date.year < UMALQURA_YEAR_START || date.year > UMALQURA_YEAR_END) {
       return super.toJulianDay(date);
     }
@@ -185,7 +185,7 @@ export class IslamicUmalquraCalendar extends IslamicCivilCalendar {
     return CIVIL_EPOC + umalquraMonthStart(date.year, date.month) + (date.day - 1);
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     if (date.year < UMALQURA_YEAR_START || date.year > UMALQURA_YEAR_END) {
       return super.getDaysInMonth(date);
     }
@@ -193,7 +193,7 @@ export class IslamicUmalquraCalendar extends IslamicCivilCalendar {
     return umalquraMonthLength(date.year, date.month);
   }
 
-  getDaysInYear(date: CalendarDate): number {
+  getDaysInYear(date: AnyCalendarDate): number {
     if (date.year < UMALQURA_YEAR_START || date.year > UMALQURA_YEAR_END) {
       return super.getDaysInYear(date);
     }
diff --git a/packages/@internationalized/date/src/calendars/JapaneseCalendar.ts b/packages/@internationalized/date/src/calendars/JapaneseCalendar.ts
index c2829453540..dc78f74da49 100644
--- a/packages/@internationalized/date/src/calendars/JapaneseCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/JapaneseCalendar.ts
@@ -13,15 +13,18 @@
 // Portions of the code in this file are based on code from the TC39 Temporal proposal.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
+import {AnyCalendarDate, Duration} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {GregorianCalendar} from './GregorianCalendar';
 import {Mutable} from '../utils';
+import {toCalendar} from '../conversion';
 
 const ERA_START_DATES = [[1868, 9, 8], [1912, 7, 30], [1926, 12, 25], [1989, 1, 8], [2019, 5, 1]];
+const ERA_END_DATES = [[1912, 7, 29], [1926, 12, 24], [1989, 1, 7], [2019, 4, 30]];
 const ERA_ADDENDS = [1867, 1911, 1925, 1988, 2018];
 const ERA_NAMES = ['meiji', 'taisho', 'showa', 'heisei', 'reiwa'];
 
-function findEraFromGregorianDate(date: CalendarDate) {
+function findEraFromGregorianDate(date: AnyCalendarDate) {
   const idx = ERA_START_DATES.findIndex(([year, month, day]) => {
     if (date.year < year) {
       return true;
@@ -49,7 +52,7 @@ function findEraFromGregorianDate(date: CalendarDate) {
   return idx - 1;
 }
 
-function toGregorian(date: CalendarDate) {
+function toGregorian(date: AnyCalendarDate) {
   let eraAddend = ERA_ADDENDS[ERA_NAMES.indexOf(date.era)];
   if (!eraAddend) {
     throw new Error('Unknown era: ' + date.era);
@@ -71,14 +74,14 @@ export class JapaneseCalendar extends GregorianCalendar {
     let era = findEraFromGregorianDate(date);
     date.era = ERA_NAMES[era];
     date.year -= ERA_ADDENDS[era];
-    return date;
+    return date as CalendarDate;
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     return super.toJulianDay(toGregorian(date));
   }
 
-  balanceDate(date: Mutable<CalendarDate>) {
+  balanceDate(date: Mutable<AnyCalendarDate>) {
     let gregorianDate = toGregorian(date);
     let era = findEraFromGregorianDate(gregorianDate);
 
@@ -88,13 +91,48 @@ export class JapaneseCalendar extends GregorianCalendar {
     }
   }
 
+  add(date: AnyCalendarDate, duration: Duration) {
+    // Always do addition in the gregorian calendar to avoid issues with eras.
+    // For example, Heisei 31/4/30 + 1 day is Reiwa 1/5/1. Reiwa 1/1/1 does not exist.
+    return toCalendar(toGregorian(date).add(duration), this);
+  }
+
+  constrainDate(date: Mutable<AnyCalendarDate>) {
+    let idx = ERA_NAMES.indexOf(date.era);
+    let end = ERA_END_DATES[idx];
+    if (end != null) {
+      let [, endMonth, endDay] = end;
+
+      // Constrain the year to the maximum possible value in the era.
+      // Then constrain the month and day fields within that.
+      let maxYear = getMaxYear(idx);
+      date.year = Math.min(maxYear, date.year);
+      if (date.year === maxYear) {
+        date.month = Math.min(endMonth, date.month);
+
+        if (date.month === endMonth) {
+          date.day = Math.min(endDay, date.day);
+        }
+      }
+
+      if (date.year === 1) {
+        let [, startMonth, startDay] = ERA_START_DATES[idx];
+        date.month = Math.max(startMonth, date.month);
+
+        if (date.month === startMonth) {
+          date.day = Math.max(startDay, date.day);
+        }
+      }
+    }
+  }
+
   getEras() {
     return ERA_NAMES;
   }
 
-  getYearsInEra(date: CalendarDate): number {
-    let gregorianDate = toGregorian(date);
-    let era = findEraFromGregorianDate(gregorianDate);
+  getYearsInEra(date: AnyCalendarDate): number {
+    // Get the number of years in the era, taking into account the date's month and day fields.
+    let era = ERA_NAMES.indexOf(date.era);
     let next = ERA_START_DATES[era + 1];
     if (next == null) {
       return 9999;
@@ -109,4 +147,52 @@ export class JapaneseCalendar extends GregorianCalendar {
 
     return years;
   }
+
+  getMonthsInYear(date: AnyCalendarDate): number {
+    let idx = ERA_NAMES.indexOf(date.era);
+    let end = ERA_END_DATES[idx];
+    if (end && date.year === getMaxYear(idx)) {
+      return end[1];
+    }
+
+    return super.getMonthsInYear(date);
+  }
+
+  getDaysInMonth(date: AnyCalendarDate): number {
+    let idx = ERA_NAMES.indexOf(date.era);
+    let end = ERA_END_DATES[idx];
+    if (end && date.year === getMaxYear(idx) && date.month === end[1]) {
+      return end[2];
+    }
+
+    return super.getDaysInMonth(date);
+  }
+
+  getMinimumMonthInYear(date: AnyCalendarDate): number {
+    let start = getMinimums(date);
+    return start ? start[1] : 1;
+  }
+
+  getMinimumDayInMonth(date: AnyCalendarDate): number {
+    let start = getMinimums(date);
+    return start && date.month === start[1] ? start[2] : 1;
+  }
+}
+
+function getMinimums(date: AnyCalendarDate) {
+  if (date.year === 1) {
+    let idx = ERA_NAMES.indexOf(date.era);
+    return ERA_START_DATES[idx];
+  }
+}
+
+function getMaxYear(era: number) {
+  let [endYear, endMonth, endDay] = ERA_END_DATES[era];
+  let [startYear, startMonth, startDay] = ERA_START_DATES[era];
+  let maxYear = endYear - startYear;
+  if (startMonth < endMonth || (startMonth === endMonth && startDay < endDay)) {
+    maxYear++;
+  }
+
+  return maxYear;
 }
diff --git a/packages/@internationalized/date/src/calendars/PersianCalendar.ts b/packages/@internationalized/date/src/calendars/PersianCalendar.ts
index c8622e56ccb..ae2216a355b 100644
--- a/packages/@internationalized/date/src/calendars/PersianCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/PersianCalendar.ts
@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar} from '../types';
+import {AnyCalendarDate, Calendar} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {mod} from '../utils';
 
@@ -62,7 +62,7 @@ export class PersianCalendar implements Calendar {
     return new CalendarDate(this, year, month, day);
   }
 
-  toJulianDay(date: CalendarDate): number {
+  toJulianDay(date: AnyCalendarDate): number {
     return persianToJulianDay(date.year, date.month, date.day);
   }
 
@@ -70,7 +70,7 @@ export class PersianCalendar implements Calendar {
     return 12;
   }
 
-  getDaysInMonth(date: CalendarDate): number {
+  getDaysInMonth(date: AnyCalendarDate): number {
     if (date.month <= 6) {
       return 31;
     }
diff --git a/packages/@internationalized/date/src/calendars/TaiwanCalendar.ts b/packages/@internationalized/date/src/calendars/TaiwanCalendar.ts
index c10d293e2b2..858acc8cdfb 100644
--- a/packages/@internationalized/date/src/calendars/TaiwanCalendar.ts
+++ b/packages/@internationalized/date/src/calendars/TaiwanCalendar.ts
@@ -13,19 +13,20 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
+import {AnyCalendarDate} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {GregorianCalendar} from './GregorianCalendar';
 import {Mutable} from '../utils';
 
 const TAIWAN_ERA_START = 1911;
 
-function gregorianYear(date: CalendarDate) {
+function gregorianYear(date: AnyCalendarDate) {
   return date.era === 'minguo'
     ? date.year + TAIWAN_ERA_START
     : 1 - date.year + TAIWAN_ERA_START;
 }
 
-function gregorianToTaiwan(year: number, date: Mutable<CalendarDate>) {
+function gregorianToTaiwan(year: number, date: Mutable<AnyCalendarDate>) {
   let y = year - TAIWAN_ERA_START;
   if (y > 0) {
     date.era = 'minguo';
@@ -40,12 +41,12 @@ export class TaiwanCalendar extends GregorianCalendar {
   identifier = 'roc'; // Republic of China
 
   fromJulianDay(jd: number): CalendarDate {
-    let date = super.fromJulianDay(jd) as Mutable<CalendarDate>;
+    let date: Mutable<CalendarDate> = super.fromJulianDay(jd);
     gregorianToTaiwan(date.year, date);
-    return date;
+    return date as CalendarDate;
   }
 
-  toJulianDay(date: CalendarDate) {
+  toJulianDay(date: AnyCalendarDate) {
     return super.toJulianDay(
       new CalendarDate(
         gregorianYear(date),
@@ -59,11 +60,11 @@ export class TaiwanCalendar extends GregorianCalendar {
     return ['before_minguo', 'minguo'];
   }
 
-  balanceDate(date: Mutable<CalendarDate>) {
+  balanceDate(date: Mutable<AnyCalendarDate>) {
     gregorianToTaiwan(gregorianYear(date), date);
   }
 
-  addYears(date: Mutable<CalendarDate>, years: number) {
+  addYears(date: Mutable<AnyCalendarDate>, years: number) {
     if (date.era === 'before_minguo') {
       years = -years;
     }
diff --git a/packages/@internationalized/date/src/conversion.ts b/packages/@internationalized/date/src/conversion.ts
index 0e31853c970..74e53bb7ece 100644
--- a/packages/@internationalized/date/src/conversion.ts
+++ b/packages/@internationalized/date/src/conversion.ts
@@ -13,13 +13,13 @@
 // Portions of the code in this file are based on code from the TC39 Temporal proposal.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {Calendar, Disambiguation} from './types';
+import {AnyCalendarDate, AnyDateTime, AnyTime, Calendar, DateFields, Disambiguation, TimeFields} from './types';
 import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from './CalendarDate';
 import {getLocalTimeZone} from './queries';
 import {GregorianCalendar} from './calendars/GregorianCalendar';
 import {Mutable} from './utils';
 
-export function epochFromDate(date: CalendarDateTime) {
+export function epochFromDate(date: AnyDateTime) {
   date = toCalendar(date, new GregorianCalendar());
   return epochFromParts(date.year, date.month, date.day, date.hour, date.minute, date.second, date.millisecond);
 }
@@ -101,7 +101,7 @@ function isValidWallTime(date: CalendarDateTime, timeZone: string, absolute: num
     && date.second === parts.second;
 }
 
-export function toAbsolute(date: CalendarDate, timeZone: string, disambiguation: Disambiguation = 'compatible'): number {
+export function toAbsolute(date: CalendarDate | CalendarDateTime, timeZone: string, disambiguation: Disambiguation = 'compatible'): number {
   let dateTime = toCalendarDateTime(date);
   let ms = epochFromDate(dateTime);
   let offsetBefore = getTimeZoneOffset(ms - DAYMILLIS, timeZone);
@@ -137,7 +137,7 @@ export function toAbsolute(date: CalendarDate, timeZone: string, disambiguation:
   }
 }
 
-export function toDate(dateTime: CalendarDate, timeZone: string, disambiguation: Disambiguation = 'compatible'): Date {
+export function toDate(dateTime: CalendarDate | CalendarDateTime, timeZone: string, disambiguation: Disambiguation = 'compatible'): Date {
   return new Date(toAbsolute(dateTime, timeZone, disambiguation));
 }
 
@@ -163,18 +163,31 @@ export function fromDateToLocal(date: Date): ZonedDateTime {
   return fromDate(date, getLocalTimeZone());
 }
 
-export function toCalendarDate(dateTime: CalendarDateTime): CalendarDate {
+export function toCalendarDate(dateTime: AnyCalendarDate): CalendarDate {
   return new CalendarDate(dateTime.calendar, dateTime.era, dateTime.year, dateTime.month, dateTime.day);
 }
 
-/* eslint-disable no-redeclare */
-export function toCalendarDateTime(date: ZonedDateTime, time?: Time): CalendarDateTime;
-export function toCalendarDateTime(date: CalendarDateTime, time?: Time): CalendarDateTime;
-export function toCalendarDateTime(date: CalendarDate, time?: Time): CalendarDateTime;
-export function toCalendarDateTime(date: CalendarDate | CalendarDateTime | ZonedDateTime, time?: Time) {
-/* eslint-enable no-redeclare */
+export function toDateFields(date: AnyCalendarDate): DateFields {
+  return {
+    era: date.era,
+    year: date.year,
+    month: date.month,
+    day: date.day
+  };
+}
+
+export function toTimeFields(date: AnyTime): TimeFields {
+  return {
+    hour: date.hour,
+    minute: date.minute,
+    second: date.second,
+    millisecond: date.millisecond
+  };
+}
+
+export function toCalendarDateTime(date: CalendarDate | CalendarDateTime | ZonedDateTime, time?: AnyTime): CalendarDateTime {
   let hour = 0, minute = 0, second = 0, millisecond = 0;
-  if ('timeZone' in date && !time) {
+  if ('timeZone' in date) {
     ({hour, minute, second, millisecond} = date);
   } else if ('hour' in date && !time) {
     return date;
@@ -201,31 +214,22 @@ export function toTime(dateTime: CalendarDateTime): Time {
   return new Time(dateTime.hour, dateTime.minute, dateTime.second, dateTime.millisecond);
 }
 
-/* eslint-disable no-redeclare */
-export function toCalendar(date: ZonedDateTime, calendar: Calendar): ZonedDateTime;
-export function toCalendar(date: CalendarDateTime, calendar: Calendar): CalendarDateTime;
-export function toCalendar(date: CalendarDate, calendar: Calendar): CalendarDate;
-export function toCalendar(date: CalendarDate | CalendarDateTime | ZonedDateTime, calendar: Calendar) {
-/* eslint-enable no-redeclare */
+export function toCalendar<T extends AnyCalendarDate>(date: T, calendar: Calendar): T {
   if (date.calendar.identifier === calendar.identifier) {
     return date;
   }
 
   let calendarDate = calendar.fromJulianDay(date.calendar.toJulianDay(date));
-  if ('hour' in date) {
-    let copy: Mutable<CalendarDateTime> = date.copy();
-    copy.calendar = calendar;
-    copy.era = calendarDate.era;
-    copy.year = calendarDate.year;
-    copy.month = calendarDate.month;
-    copy.day = calendarDate.day;
-    return copy;
-  }
-
-  return calendarDate;
+  let copy: Mutable<T> = date.copy();
+  copy.calendar = calendar;
+  copy.era = calendarDate.era;
+  copy.year = calendarDate.year;
+  copy.month = calendarDate.month;
+  copy.day = calendarDate.day;
+  return copy;
 }
 
-export function toZoned(date: CalendarDate | CalendarDateTime, timeZone: string, disambiguation?: Disambiguation) {
+export function toZoned(date: CalendarDate | CalendarDateTime | ZonedDateTime, timeZone: string, disambiguation?: Disambiguation) {
   if (date instanceof ZonedDateTime) {
     if (date.timeZone === timeZone) {
       return date;
diff --git a/packages/@internationalized/date/src/index.ts b/packages/@internationalized/date/src/index.ts
index 1136c464171..621cb9a9fde 100644
--- a/packages/@internationalized/date/src/index.ts
+++ b/packages/@internationalized/date/src/index.ts
@@ -21,8 +21,8 @@ export {IslamicCivilCalendar, IslamicTabularCalendar, IslamicUmalquraCalendar} f
 export {HebrewCalendar} from './calendars/HebrewCalendar';
 export {EthiopicCalendar, EthiopicAmeteAlemCalendar, CopticCalendar} from './calendars/EthiopicCalendar';
 export {createCalendar} from './createCalendar';
-export * from './manipulation';
 export * from './conversion';
 export * from './queries';
 export * from './types';
 export * from './string';
+export * from './DateFormatter';
diff --git a/packages/@internationalized/date/src/manipulation.ts b/packages/@internationalized/date/src/manipulation.ts
index 5ce5f36a765..0541b30cec4 100644
--- a/packages/@internationalized/date/src/manipulation.ts
+++ b/packages/@internationalized/date/src/manipulation.ts
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {AnyCalendarDate, AnyTime, CycleOptions, CycleTimeOptions, DateField, DateFields, Disambiguation, Duration, TimeField, TimeFields} from './types';
 import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from './CalendarDate';
-import {CycleOptions, CycleTimeOptions, DateField, DateFields, Disambiguation, Duration, OverflowBehavior, TimeField, TimeFields} from './types';
 import {epochFromDate, fromAbsolute, toAbsolute, toCalendar, toCalendarDateTime} from './conversion';
+import {getMinimumDayInMonth, getMinimumMonthInYear} from './queries';
 import {GregorianCalendar} from './calendars/GregorianCalendar';
 import {Mutable} from './utils';
 
@@ -21,31 +22,40 @@ const ONE_HOUR = 3600000;
 /* eslint-disable no-redeclare */
 export function add(date: CalendarDateTime, duration: Duration): CalendarDateTime;
 export function add(date: CalendarDate, duration: Duration): CalendarDate;
-export function add(date: CalendarDate | CalendarDateTime, duration: Duration): CalendarDate | CalendarDateTime {
+export function add(date: CalendarDate | CalendarDateTime, duration: Duration): CalendarDate | CalendarDateTime;
+export function add(date: CalendarDate | CalendarDateTime, duration: Duration) {
 /* eslint-enable no-redeclare */
-  let mutableDate: Mutable<CalendarDate> = date.copy();
-  let days = addTimeFields(toCalendarDateTime(date), duration);
-
-  addYears(mutableDate, duration.years || 0);
-  mutableDate.month += duration.months || 0;
+  let mutableDate: Mutable<AnyCalendarDate> = date.copy();
+  let days = 'hour' in date ? addTimeFields(date, duration) : 0;
+
+  if (date.calendar.add) {
+    let res = date.calendar.add(date, duration);
+    mutableDate.era = res.era;
+    mutableDate.year = res.year;
+    mutableDate.month = res.month;
+    mutableDate.day = res.day;
+  } else {
+    addYears(mutableDate, duration.years || 0);
+    mutableDate.month += duration.months || 0;
 
-  balanceYearMonth(mutableDate);
-  constrain(mutableDate);
+    balanceYearMonth(mutableDate);
+    constrainMonthDay(mutableDate);
 
-  mutableDate.day += (duration.weeks || 0) * 7;
-  mutableDate.day += duration.days || 0;
-  mutableDate.day += days;
+    mutableDate.day += (duration.weeks || 0) * 7;
+    mutableDate.day += duration.days || 0;
+    mutableDate.day += days;
 
-  balanceDay(mutableDate);
+    balanceDay(mutableDate);
 
-  if (mutableDate.calendar.balanceDate) {
-    mutableDate.calendar.balanceDate(mutableDate);
+    if (mutableDate.calendar.balanceDate) {
+      mutableDate.calendar.balanceDate(mutableDate);
+    }
   }
 
   return mutableDate;
 }
 
-function addYears(date: Mutable<CalendarDate>, years: number) {
+function addYears(date: Mutable<AnyCalendarDate>, years: number) {
   if (date.calendar.addYears) {
     date.calendar.addYears(date, years);
   } else {
@@ -53,7 +63,7 @@ function addYears(date: Mutable<CalendarDate>, years: number) {
   }
 }
 
-function balanceYearMonth(date: Mutable<CalendarDate>) {
+function balanceYearMonth(date: Mutable<AnyCalendarDate>) {
   while (date.month < 1) {
     date.month += date.calendar.getMonthsInYear(date);
     addYears(date, -1);
@@ -66,7 +76,7 @@ function balanceYearMonth(date: Mutable<CalendarDate>) {
   }
 }
 
-function balanceDay(date: Mutable<CalendarDate>) {
+function balanceDay(date: Mutable<AnyCalendarDate>) {
   while (date.day < 1) {
     date.month--;
     balanceYearMonth(date);
@@ -80,18 +90,18 @@ function balanceDay(date: Mutable<CalendarDate>) {
   }
 }
 
-function balance(date: Mutable<CalendarDate>) {
-  balanceYearMonth(date);
-  balanceDay(date);
+function constrainMonthDay(date: Mutable<AnyCalendarDate>) {
+  date.month = Math.max(getMinimumMonthInYear(date), Math.min(date.calendar.getMonthsInYear(date), date.month));
+  date.day = Math.max(getMinimumDayInMonth(date), Math.min(date.calendar.getDaysInMonth(date), date.day));
+}
 
-  if (date.calendar.balanceDate) {
-    date.calendar.balanceDate(date);
+function constrain(date: Mutable<AnyCalendarDate>) {
+  if (date.calendar.constrainDate) {
+    date.calendar.constrainDate(date);
   }
-}
 
-function constrain(date: Mutable<CalendarDate>) {
-  date.month = Math.max(1, Math.min(date.calendar.getMonthsInYear(date), date.month));
-  date.day = Math.max(1, Math.min(date.calendar.getDaysInMonth(date), date.day));
+  date.year = Math.max(1, Math.min(date.calendar.getYearsInEra(date), date.year));
+  constrainMonthDay(date);
 }
 
 export function invertDuration(duration: Duration): Duration {
@@ -114,11 +124,11 @@ export function subtract(date: CalendarDate | CalendarDateTime, duration: Durati
 }
 
 /* eslint-disable no-redeclare */
-export function set(date: CalendarDateTime, fields: DateFields, behavior?: OverflowBehavior): CalendarDateTime;
-export function set(date: CalendarDate, fields: DateFields, behavior: OverflowBehavior): CalendarDate;
-export function set(date: CalendarDate, fields: DateFields, behavior: OverflowBehavior = 'balance'): CalendarDate {
+export function set(date: CalendarDateTime, fields: DateFields): CalendarDateTime;
+export function set(date: CalendarDate, fields: DateFields): CalendarDate;
+export function set(date: CalendarDate | CalendarDateTime, fields: DateFields) {
 /* eslint-enable no-redeclare */
-  let mutableDate: Mutable<CalendarDate> = date.copy();
+  let mutableDate: Mutable<AnyCalendarDate> = date.copy();
 
   if (fields.era != null) {
     mutableDate.era = fields.era;
@@ -126,7 +136,6 @@ export function set(date: CalendarDate, fields: DateFields, behavior: OverflowBe
 
   if (fields.year != null) {
     mutableDate.year = fields.year;
-    // addYears(mutableDate, fields.year - mutableDate.year);
   }
 
   if (fields.month != null) {
@@ -137,24 +146,14 @@ export function set(date: CalendarDate, fields: DateFields, behavior: OverflowBe
     mutableDate.day = fields.day;
   }
 
-  switch (behavior) {
-    case 'balance':
-      balance(mutableDate);
-      break;
-    case 'constrain':
-      constrain(mutableDate);
-      break;
-    default:
-      throw new Error(`Invalid behavior: ${behavior}. Must be either 'balance' or 'constrain'.`);
-  }
-
+  constrain(mutableDate);
   return mutableDate;
 }
 
 /* eslint-disable no-redeclare */
-export function setTime(value: CalendarDateTime, fields: TimeFields, behavior?: OverflowBehavior): CalendarDateTime;
-export function setTime(value: Time, fields: TimeFields, behavior: OverflowBehavior): Time;
-export function setTime(value: Time | CalendarDateTime, fields: TimeFields, behavior: OverflowBehavior = 'balance'): Time | CalendarDateTime {
+export function setTime(value: CalendarDateTime, fields: TimeFields): CalendarDateTime;
+export function setTime(value: Time, fields: TimeFields): Time;
+export function setTime(value: Time | CalendarDateTime, fields: TimeFields) {
 /* eslint-enable no-redeclare */
   let mutableValue: Mutable<Time | CalendarDateTime> = value.copy();
 
@@ -174,26 +173,11 @@ export function setTime(value: Time | CalendarDateTime, fields: TimeFields, beha
     mutableValue.millisecond = fields.millisecond;
   }
 
-  switch (behavior) {
-    case 'balance': {
-      let days = balanceTime(mutableValue);
-      if ('day' in mutableValue) {
-        mutableValue.day += days;
-        balance(mutableValue);
-      } else if (days > 0) {
-        throw new Error('Hours cannot be greater than 24');
-      }
-      break;
-    }
-    case 'constrain':
-      constrainTime(mutableValue);
-      break;
-  }
-
+  constrainTime(mutableValue);
   return mutableValue;
 }
 
-function balanceTime(time: TimeFields): number {
+function balanceTime(time: Mutable<AnyTime>): number {
   time.second += Math.floor(time.millisecond / 1000);
   time.millisecond = nonNegativeMod(time.millisecond, 1000);
 
@@ -209,7 +193,7 @@ function balanceTime(time: TimeFields): number {
   return days;
 }
 
-function constrainTime(time: Mutable<Time | CalendarDateTime>) {
+function constrainTime(time: Mutable<AnyTime>) {
   time.millisecond = Math.max(0, Math.min(time.millisecond, 1000));
   time.second = Math.max(0, Math.min(time.second, 59));
   time.minute = Math.max(0, Math.min(time.minute, 59));
@@ -224,7 +208,7 @@ function nonNegativeMod(a: number, b: number) {
   return result;
 }
 
-function addTimeFields(time: TimeFields, duration: Duration): number {
+function addTimeFields(time: Mutable<AnyTime>, duration: Duration): number {
   time.hour += duration.hours || 0;
   time.minute += duration.minutes || 0;
   time.second += duration.seconds || 0;
@@ -242,24 +226,12 @@ export function subtractTime(time: Time, duration: Duration): Time {
   return addTime(time, invertDuration(duration));
 }
 
-export function startOfMonth(date: CalendarDate): CalendarDate {
-  let mutableDate: Mutable<CalendarDate> = date.copy();
-  mutableDate.day = 1;
-  return mutableDate;
-}
-
-export function endOfMonth(date: CalendarDate): CalendarDate {
-  let mutableDate: Mutable<CalendarDate> = date.copy();
-  mutableDate.day = date.calendar.getDaysInMonth(date);
-  return mutableDate;
-}
-
 /* eslint-disable no-redeclare */
 export function cycleDate(value: CalendarDateTime, field: DateField, amount: number, options?: CycleOptions): CalendarDateTime;
 export function cycleDate(value: CalendarDate, field: DateField, amount: number, options?: CycleOptions): CalendarDate;
-export function cycleDate(value: CalendarDate, field: DateField, amount: number, options?: CycleOptions) {
+export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateField, amount: number, options?: CycleOptions) {
 /* eslint-enable no-redeclare */
-  let mutable: Mutable<CalendarDate> = value.copy();
+  let mutable: Mutable<CalendarDate | CalendarDateTime> = value.copy();
 
   switch (field) {
     case 'era': {
@@ -273,24 +245,20 @@ export function cycleDate(value: CalendarDate, field: DateField, amount: number,
       break;
     }
     case 'year': {
-      let year = cycleValue(value.year, amount, 1, value.calendar.getYearsInEra(value), options?.round);
-      addYears(mutable, year - value.year);
+      mutable.year = cycleValue(value.year, amount, 1, value.calendar.getYearsInEra(value), options?.round);
       break;
     }
     case 'month':
-      mutable.month = cycleValue(value.month, amount, 1, value.calendar.getMonthsInYear(value), options?.round);
+      mutable.month = cycleValue(value.month, amount, getMinimumMonthInYear(value), value.calendar.getMonthsInYear(value), options?.round);
       break;
     case 'day':
-      mutable.day = cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
+      mutable.day = cycleValue(value.day, amount, getMinimumDayInMonth(value), value.calendar.getDaysInMonth(value), options?.round);
       break;
     default:
       throw new Error('Unsupported field ' + field);
   }
 
-  if (mutable.calendar.balanceDate) {
-    mutable.calendar.balanceDate(mutable);
-  }
-
+  constrain(mutable);
   return mutable;
 }
 
@@ -363,7 +331,7 @@ function cycleValue(value: number, amount: number, min: number, max: number, rou
 export function addZoned(dateTime: ZonedDateTime, duration: Duration): ZonedDateTime {
   let ms: number;
   if ((duration.years != null && duration.years !== 0) || (duration.months != null && duration.months !== 0) || (duration.days != null && duration.days !== 0)) {
-    let res = add(dateTime, {
+    let res = add(toCalendarDateTime(dateTime), {
       years: duration.years,
       months: duration.months,
       days: duration.days
@@ -412,11 +380,12 @@ export function cycleZoned(dateTime: ZonedDateTime, field: DateField | TimeField
       // Or it might end at midnight and repeat the 11pm hour. To handle this, we get
       // the possible absolute times for the min and max, and find the maximum range
       // that is within the current day.
-      let minDate = toCalendar(setTime(dateTime, {hour: min}), new GregorianCalendar());
+      let plainDateTime = toCalendarDateTime(dateTime);
+      let minDate = toCalendar(setTime(plainDateTime, {hour: min}), new GregorianCalendar());
       let minAbsolute = [toAbsolute(minDate, dateTime.timeZone, 'earlier'), toAbsolute(minDate, dateTime.timeZone, 'later')]
         .filter(ms => fromAbsolute(ms, dateTime.timeZone).day === minDate.day)[0];
 
-      let maxDate = toCalendar(setTime(dateTime, {hour: max}), new GregorianCalendar());
+      let maxDate = toCalendar(setTime(plainDateTime, {hour: max}), new GregorianCalendar());
       let maxAbsolute = [toAbsolute(maxDate, dateTime.timeZone, 'earlier'), toAbsolute(maxDate, dateTime.timeZone, 'later')]
         .filter(ms => fromAbsolute(ms, dateTime.timeZone).day === maxDate.day).pop();
 
@@ -446,17 +415,27 @@ export function cycleZoned(dateTime: ZonedDateTime, field: DateField | TimeField
     case 'year':
     case 'month':
     case 'day': {
-      let res = cycleDate(dateTime, field, amount, options);
+      let res = cycleDate(toCalendarDateTime(dateTime), field, amount, options);
       let ms = toAbsolute(res, dateTime.timeZone);
       return toCalendar(fromAbsolute(ms, dateTime.timeZone), dateTime.calendar);
     }
+    default:
+      throw new Error('Unsupported field ' + field);
   }
 }
 
-export function setZoned(dateTime: ZonedDateTime, fields: DateFields & TimeFields, behavior?: OverflowBehavior, disambiguation?: Disambiguation): ZonedDateTime {
+export function setZoned(dateTime: ZonedDateTime, fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime {
   // Set the date/time fields, and recompute the UTC offset to account for DST changes.
   // We also need to validate by converting back to a local time in case hours are skipped during forward DST transitions.
-  let res = setTime(set(dateTime, fields, behavior), fields, behavior);
+  let plainDateTime = toCalendarDateTime(dateTime);
+  let res = setTime(set(plainDateTime, fields), fields);
+
+  // If the resulting plain date time values are equal, return the original time.
+  // We don't want to change the offset when setting the time to the same value.
+  if (res.compare(plainDateTime) === 0) {
+    return dateTime;
+  }
+
   let ms = toAbsolute(res, dateTime.timeZone, disambiguation);
   return toCalendar(fromAbsolute(ms, dateTime.timeZone), dateTime.calendar);
 }
diff --git a/packages/@internationalized/date/src/queries.ts b/packages/@internationalized/date/src/queries.ts
index cc460673088..a5c7b45c6a9 100644
--- a/packages/@internationalized/date/src/queries.ts
+++ b/packages/@internationalized/date/src/queries.ts
@@ -10,29 +10,31 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from './CalendarDate';
+import {AnyCalendarDate, AnyTime} from './types';
+import {CalendarDate, ZonedDateTime} from './CalendarDate';
 import {fromAbsolute, toAbsolute, toCalendar, toCalendarDate} from './conversion';
+import {Mutable} from './utils';
 
-export function isSameDay(a: CalendarDate, b: CalendarDate): boolean {
+export function isSameDay(a: AnyCalendarDate, b: AnyCalendarDate): boolean {
   b = toCalendar(b, a.calendar);
   return a.era === b.era && a.year === b.year && a.month === b.month && a.day === b.day;
 }
 
-export function isSameMonth(a: CalendarDate, b: CalendarDate): boolean {
+export function isSameMonth(a: AnyCalendarDate, b: AnyCalendarDate): boolean {
   b = toCalendar(b, a.calendar);
   return a.era === b.era && a.year === b.year && a.month === b.month;
 }
 
-export function isSameYear(a: CalendarDate, b: CalendarDate): boolean {
+export function isSameYear(a: AnyCalendarDate, b: AnyCalendarDate): boolean {
   b = toCalendar(b, a.calendar);
   return a.era === b.era && a.year === b.year;
 }
 
-export function isToday(date: CalendarDate, timeZone: string): boolean {
+export function isToday(date: AnyCalendarDate, timeZone: string): boolean {
   return isSameDay(date, today(timeZone));
 }
 
-export function getDayOfWeek(date: CalendarDate) {
+export function getDayOfWeek(date: AnyCalendarDate) {
   let julian = date.calendar.toJulianDay(date);
 
   // If julian is negative, then julian % 7 will be negative, so we adjust
@@ -53,15 +55,15 @@ export function today(timeZone: string): CalendarDate {
   return toCalendarDate(now(timeZone));
 }
 
-export function compareDate(a: CalendarDate, b: CalendarDate): number {
+export function compareDate(a: AnyCalendarDate, b: AnyCalendarDate): number {
   return a.calendar.toJulianDay(a) - b.calendar.toJulianDay(b);
 }
 
-export function compareTime(a: Time | CalendarDateTime, b: Time | CalendarDateTime): number {
+export function compareTime(a: AnyTime, b: AnyTime): number {
   return timeToMs(a) - timeToMs(b);
 }
 
-function timeToMs(a: Time | CalendarDateTime): number {
+function timeToMs(a: AnyTime): number {
   return a.hour * 60 * 60 * 1000 + a.minute * 60 * 1000 + a.second * 1000 + a.millisecond;
 }
 
@@ -76,3 +78,32 @@ export function getLocalTimeZone(): string {
   // TODO: cache? but how to invalidate...
   return new Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
+
+export function startOfMonth<T extends AnyCalendarDate>(date: T): T {
+  let mutableDate: Mutable<T> = date.copy();
+  // TODO: should this use getMinimumDayInMonth? That breaks Calendar...
+  mutableDate.day = 1;
+  return mutableDate;
+}
+
+export function endOfMonth<T extends AnyCalendarDate>(date: T): T {
+  let mutableDate: Mutable<T> = date.copy();
+  mutableDate.day = date.calendar.getDaysInMonth(date);
+  return mutableDate;
+}
+
+export function getMinimumMonthInYear(date: AnyCalendarDate) {
+  if (date.calendar.getMinimumMonthInYear) {
+    return date.calendar.getMinimumMonthInYear(date);
+  }
+
+  return 1;
+}
+
+export function getMinimumDayInMonth(date: AnyCalendarDate) {
+  if (date.calendar.getMinimumDayInMonth) {
+    return date.calendar.getMinimumDayInMonth(date);
+  }
+
+  return 1;
+}
diff --git a/packages/@internationalized/date/src/string.ts b/packages/@internationalized/date/src/string.ts
index 211a27ac3ca..41d83d64ca3 100644
--- a/packages/@internationalized/date/src/string.ts
+++ b/packages/@internationalized/date/src/string.ts
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {AnyDateTime, Disambiguation} from './types';
 import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from './CalendarDate';
-import {Disambiguation} from './types';
-import {epochFromDate, fromAbsolute, possibleAbsolutes, toAbsolute, toCalendar, toTimeZone} from './conversion';
+import {epochFromDate, fromAbsolute, possibleAbsolutes, toAbsolute, toCalendar, toCalendarDateTime, toTimeZone} from './conversion';
 import {getLocalTimeZone} from './queries';
 import {GregorianCalendar} from './calendars/GregorianCalendar';
 import {Mutable} from './utils';
@@ -50,7 +50,7 @@ export function parseDate(value: string): CalendarDate {
   );
 
   date.day = parseNumber(m[3], 0, date.calendar.getDaysInMonth(date));
-  return date;
+  return date as CalendarDate;
 }
 
 export function parseDateTime(value: string): CalendarDateTime {
@@ -70,7 +70,7 @@ export function parseDateTime(value: string): CalendarDateTime {
   );
 
   date.day = parseNumber(m[3], 0, date.calendar.getDaysInMonth(date));
-  return date;
+  return date as CalendarDateTime;
 }
 
 export function parseZonedDateTime(value: string, disambiguation?: Disambiguation): ZonedDateTime {
@@ -93,19 +93,21 @@ export function parseZonedDateTime(value: string, disambiguation?: Disambiguatio
 
   date.day = parseNumber(m[3], 0, date.calendar.getDaysInMonth(date));
 
+  let plainDateTime = toCalendarDateTime(date as ZonedDateTime);
+
   let ms: number;
   if (m[8]) {
     date.offset = parseNumber(m[8], -23, 23) * 60 * 60 * 1000 + parseNumber(m[9] ?? '0', 0, 59) * 60 * 1000;
-    ms = epochFromDate(date) - date.offset;
+    ms = epochFromDate(date as ZonedDateTime) - date.offset;
 
     // Validate offset against parsed date.
-    let absolutes = possibleAbsolutes(date, date.timeZone);
+    let absolutes = possibleAbsolutes(plainDateTime, date.timeZone);
     if (!absolutes.includes(ms)) {
       throw new Error(`Offset ${offsetToString(date.offset)} is invalid for ${dateTimeToString(date)} in ${date.timeZone}`);
     }
   } else {
     // Convert to absolute and back to fix invalid times due to DST.
-    ms = toAbsolute(date, date.timeZone, disambiguation);
+    ms = toAbsolute(toCalendarDateTime(plainDateTime), date.timeZone, disambiguation);
   }
 
   return fromAbsolute(ms, date.timeZone);
@@ -135,7 +137,7 @@ export function parseAbsolute(value: string, timeZone: string): ZonedDateTime {
     date.offset = parseNumber(m[8], -23, 23) * 60 * 60 * 1000 + parseNumber(m[9] ?? '0', 0, 59) * 60 * 1000;
   }
 
-  return toTimeZone(date, timeZone);
+  return toTimeZone(date as ZonedDateTime, timeZone);
 }
 
 export function parseAbsoluteToLocal(value: string): ZonedDateTime {
@@ -160,7 +162,7 @@ export function dateToString(date: CalendarDate): string {
   return `${String(gregorianDate.year).padStart(4, '0')}-${String(gregorianDate.month).padStart(2, '0')}-${String(gregorianDate.day).padStart(2, '0')}`;
 }
 
-export function dateTimeToString(date: CalendarDateTime): string {
+export function dateTimeToString(date: AnyDateTime): string {
   // @ts-ignore
   return `${dateToString(date)}T${timeToString(date)}`;
 }
diff --git a/packages/@internationalized/date/src/types.ts b/packages/@internationalized/date/src/types.ts
index 92153a46dbe..d80d783ce5a 100644
--- a/packages/@internationalized/date/src/types.ts
+++ b/packages/@internationalized/date/src/types.ts
@@ -12,20 +12,43 @@
 
 import {CalendarDate} from './CalendarDate';
 
+export interface AnyCalendarDate {
+  readonly calendar: Calendar,
+  readonly era: string,
+  readonly year: number,
+  readonly month: number,
+  readonly day: number,
+  copy(): this
+}
+
+export interface AnyTime {
+  readonly hour: number,
+  readonly minute: number,
+  readonly second: number,
+  readonly millisecond: number,
+  copy(): this
+}
+
+export interface AnyDateTime extends AnyCalendarDate, AnyTime {}
+
 export interface Calendar {
   identifier: string,
 
   fromJulianDay(jd: number): CalendarDate,
-  toJulianDay(date: CalendarDate): number,
-
-  getDaysInMonth(date: CalendarDate): number,
-  getMonthsInYear(date: CalendarDate): number,
-  getYearsInEra(date: CalendarDate): number,
+  toJulianDay(date: AnyCalendarDate): number,
 
+  getDaysInMonth(date: AnyCalendarDate): number,
+  getMonthsInYear(date: AnyCalendarDate): number,
+  getYearsInEra(date: AnyCalendarDate): number,
   getEras(): string[],
 
-  balanceDate?(date: CalendarDate): void,
-  addYears?(date: CalendarDate, years: number): void
+  getMinimumMonthInYear?(date: AnyCalendarDate): number,
+  getMinimumDayInMonth?(date: AnyCalendarDate): number,
+
+  balanceDate?(date: AnyCalendarDate): void,
+  addYears?(date: AnyCalendarDate, years: number): void,
+  add?(date: AnyCalendarDate, duration: Duration): CalendarDate,
+  constrainDate?(date: AnyCalendarDate): void
 }
 
 export interface Duration {
@@ -56,7 +79,6 @@ export interface TimeFields {
 export type DateField = keyof DateFields;
 export type TimeField = keyof TimeFields;
 
-export type OverflowBehavior = 'balance' | 'constrain';
 export type Disambiguation = 'compatible' | 'earlier' | 'later' | 'reject';
 
 export interface CycleOptions {
diff --git a/packages/@internationalized/date/tests/DateFormatter.test.js b/packages/@internationalized/date/tests/DateFormatter.test.js
new file mode 100644
index 00000000000..2b0ebba851a
--- /dev/null
+++ b/packages/@internationalized/date/tests/DateFormatter.test.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DateFormatter} from '..';
+
+describe('DateFormatter', function () {
+  beforeAll(function () {
+    // Mock to ensure buggy WebKit behavior
+    let resolvedOptions = Intl.DateTimeFormat.prototype.resolvedOptions;
+    jest.spyOn(Intl.DateTimeFormat.prototype, 'resolvedOptions').mockImplementation(function () {
+      let s = resolvedOptions.call(this);
+      if (s.locale === 'fr' && s.hour12 === false) {
+        s.hour12 = true;
+        s.hourCycle = 'h12';
+      }
+      return s;
+    });
+  });
+
+  it('should format a basic date', function () {
+    let formatter = new DateFormatter('en-US');
+    expect(formatter.format(new Date(2020, 1, 3))).toBe('2/3/2020');
+  });
+
+  it('should format to parts', function () {
+    let formatter = new DateFormatter('en-US');
+    expect(formatter.formatToParts(new Date(2020, 1, 3))).toEqual([
+      {type: 'month', value: '2'},
+      {type: 'literal', value: '/'},
+      {type: 'day', value: '3'},
+      {type: 'literal', value: '/'},
+      {type: 'year', value: '2020'}
+    ]);
+  });
+
+  it('should format a range', function () {
+    let formatter = new DateFormatter('en-US');
+    // Test fallback
+    formatter.formatter.formatRange = null;
+    expect(formatter.formatRange(new Date(2020, 1, 3), new Date(2020, 1, 5))).toBe('2/3/2020 – 2/5/2020');
+  });
+
+  it('should format a range to parts', function () {
+    let formatter = new DateFormatter('en-US');
+    // Test fallback
+    formatter.formatter.formatRangeToParts = null;
+    expect(formatter.formatRangeToParts(new Date(2020, 1, 3), new Date(2020, 1, 5))).toEqual([
+      {type: 'month', value: '2', source: 'startRange'},
+      {type: 'literal', value: '/', source: 'startRange'},
+      {type: 'day', value: '3', source: 'startRange'},
+      {type: 'literal', value: '/', source: 'startRange'},
+      {type: 'year', value: '2020', source: 'startRange'},
+      {type: 'literal', value: ' – ', source: 'shared'},
+      {type: 'month', value: '2', source: 'endRange'},
+      {type: 'literal', value: '/', source: 'endRange'},
+      {type: 'day', value: '5', source: 'endRange'},
+      {type: 'literal', value: '/', source: 'endRange'},
+      {type: 'year', value: '2020', source: 'endRange'}
+    ]);
+  });
+
+  it('should work around buggy hour12 behavior', function () {
+    let formatter = new DateFormatter('en-US', {timeStyle: 'short', hour12: false});
+    expect(formatter.format(new Date(2020, 1, 3, 0))).toBe('00:00');
+    expect(formatter.resolvedOptions().hourCycle).toBe('h23');
+
+    formatter = new DateFormatter('fr-CA', {hour: 'numeric', hour12: true});
+    expect(formatter.format(new Date(2020, 1, 3, 0))).toBe('12 h a.m.');
+    expect(formatter.resolvedOptions().hourCycle).toBe('h12');
+
+    formatter = new DateFormatter('ja', {hour: 'numeric', hour12: true});
+    expect(formatter.format(new Date(2020, 1, 3, 0))).toBe('午前0時');
+    expect(formatter.resolvedOptions().hourCycle).toBe('h11');
+  });
+
+  it('should work around buggy resolved hour cycle', function () {
+    let formatter = new DateFormatter('fr', {hour: 'numeric', hour12: false});
+    expect(formatter.resolvedOptions().hour12).toBe(false);
+    expect(formatter.resolvedOptions().hourCycle).toBe('h23');
+  });
+});
diff --git a/packages/@internationalized/date/tests/ZonedDateTime.test.js b/packages/@internationalized/date/tests/ZonedDateTime.test.js
index 126da82cf9a..abe1a36eeba 100644
--- a/packages/@internationalized/date/tests/ZonedDateTime.test.js
+++ b/packages/@internationalized/date/tests/ZonedDateTime.test.js
@@ -238,5 +238,10 @@ describe('ZonedDateTime', function () {
       expect(zoned.offset).not.toBe(expected.offset);
       expect(zoned.set({month: 3})).toEqual(expected);
     });
+
+    it('should preserve the offset if setting identical fields', function () {
+      let zoned = toZoned(new CalendarDateTime(2021, 11, 7, 1), 'America/Los_Angeles', 'later');
+      expect(zoned.set({hour: 1})).toBe(zoned);
+    });
   });
 });
diff --git a/packages/@internationalized/date/tests/manipulation.test.js b/packages/@internationalized/date/tests/manipulation.test.js
index d1ab36a8a6d..913b138bbc2 100644
--- a/packages/@internationalized/date/tests/manipulation.test.js
+++ b/packages/@internationalized/date/tests/manipulation.test.js
@@ -85,6 +85,14 @@ describe('CalendarDate manipulation', function () {
       expect(date.add({years: 2, months: 3, days: 10})).toEqual(new CalendarDate(2023, 2, 4));
     });
 
+    it('should ignore time when adding to a date', function () {
+      let date = new CalendarDate(2020, 10, 25);
+      expect(date.add({hours: 36})).toEqual(date);
+      expect(date.add({minutes: 500})).toEqual(date);
+      expect(date.add({seconds: 5000000})).toEqual(date);
+      expect(date.add({milliseconds: 50000000000})).toEqual(date);
+    });
+
     describe('Japanese calendar', function () {
       it('should add years and rebalance era', function () {
         let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30);
@@ -215,6 +223,14 @@ describe('CalendarDate manipulation', function () {
       expect(date.subtract({weeks: 5})).toEqual(new CalendarDate(2020, 9, 1));
     });
 
+    it('should ignore time when subtracting from a date', function () {
+      let date = new CalendarDate(2020, 10, 25);
+      expect(date.subtract({hours: 36})).toEqual(date);
+      expect(date.subtract({minutes: 500})).toEqual(date);
+      expect(date.subtract({seconds: 5000000})).toEqual(date);
+      expect(date.subtract({milliseconds: 50000000000})).toEqual(date);
+    });
+
     describe('Japanese calendar', function () {
       it('should subtract years and rebalance era', function () {
         let date = new CalendarDate(new JapaneseCalendar(), 'reiwa', 1, 5, 30);
@@ -289,24 +305,14 @@ describe('CalendarDate manipulation', function () {
       expect(date.set({month: 5})).toEqual(new CalendarDate(2020, 5, 3));
     });
 
-    it('should balance month', function () {
-      let date = new CalendarDate(2020, 2, 3);
-      expect(date.set({month: 13})).toEqual(new CalendarDate(2021, 1, 3));
-    });
-
     it('should constrain month', function () {
       let date = new CalendarDate(2020, 2, 3);
-      expect(date.set({month: 13}, 'constrain')).toEqual(new CalendarDate(2020, 12, 3));
-    });
-
-    it('should set month and balance day', function () {
-      let date = new CalendarDate(2020, 2, 31);
-      expect(date.set({month: 9})).toEqual(new CalendarDate(2020, 10, 1));
+      expect(date.set({month: 13})).toEqual(new CalendarDate(2020, 12, 3));
     });
 
     it('should set month and constrain day', function () {
       let date = new CalendarDate(2020, 2, 31);
-      expect(date.set({month: 9}, 'constrain')).toEqual(new CalendarDate(2020, 9, 30));
+      expect(date.set({month: 9})).toEqual(new CalendarDate(2020, 9, 30));
     });
 
     it('should set day', function () {
@@ -314,43 +320,156 @@ describe('CalendarDate manipulation', function () {
       expect(date.set({day: 9})).toEqual(new CalendarDate(2020, 2, 9));
     });
 
-    it('should balance day', function () {
-      let date = new CalendarDate(2020, 9, 3);
-      expect(date.set({day: 31})).toEqual(new CalendarDate(2020, 10, 1));
-    });
-
     it('should constrain day', function () {
       let date = new CalendarDate(2020, 9, 3);
-      expect(date.set({day: 31}, 'constrain')).toEqual(new CalendarDate(2020, 9, 30));
-    });
-
-    it('should balance day on leap years', function () {
-      let date = new CalendarDate(2020, 2, 3);
-      expect(date.set({day: 31})).toEqual(new CalendarDate(2020, 3, 2));
-
-      date = new CalendarDate(2019, 2, 3);
-      expect(date.set({day: 31})).toEqual(new CalendarDate(2019, 3, 3));
+      expect(date.set({day: 31})).toEqual(new CalendarDate(2020, 9, 30));
     });
 
     it('should constrain day on leap years', function () {
       let date = new CalendarDate(2020, 2, 3);
-      expect(date.set({day: 31}, 'constrain')).toEqual(new CalendarDate(2020, 2, 29));
+      expect(date.set({day: 31})).toEqual(new CalendarDate(2020, 2, 29));
 
       date = new CalendarDate(2019, 2, 3);
-      expect(date.set({day: 31}, 'constrain')).toEqual(new CalendarDate(2019, 2, 28));
+      expect(date.set({day: 31})).toEqual(new CalendarDate(2019, 2, 28));
     });
 
     describe('Japanese calendar', function () {
-      it('should rebalance era', function () {
-        let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30);
-        expect(date.set({month: 5})).toEqual(new CalendarDate(new JapaneseCalendar(), 'reiwa', 1, 5, 30));
+      it('should constrain date in era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 30, 4, 30);
+        expect(date.set({year: 35})).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 6);
+        expect(date.set({year: 72})).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 6));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 2, 30);
+        expect(date.set({month: 5})).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 30);
+        expect(date.set({month: 5})).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 6);
+        expect(date.set({day: 8})).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 7));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 30);
+        expect(date.set({day: 5})).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 25));
       });
     });
 
     describe('Taiwan calendar', function () {
-      it('should rebalance era', function () {
+      it('should constrain year in era', function () {
         let date = new CalendarDate(new TaiwanCalendar(), 'before_minguo', 5, 4, 30);
-        expect(date.set({year: -2})).toEqual(new CalendarDate(new TaiwanCalendar(), 'minguo', 3, 4, 30));
+        expect(date.set({year: -2})).toEqual(new CalendarDate(new TaiwanCalendar(), 'before_minguo', 1, 4, 30));
+      });
+    });
+  });
+
+  describe('cycle', function () {
+    describe('era', function () {
+      it('should cycle the era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 10, 4, 30);
+        expect(date.cycle('era', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'reiwa', 10, 4, 30));
+        expect(date.cycle('era', -1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 10, 4, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 10, 4, 30);
+        expect(date.cycle('era', 2)).toEqual(new CalendarDate(new JapaneseCalendar(), 'reiwa', 10, 4, 30));
+        expect(date.cycle('era', 3)).toEqual(new CalendarDate(new JapaneseCalendar(), 'meiji', 10, 4, 30));
+      });
+
+      it('should constrain the date within the era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 6);
+        expect(date.cycle('era', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 1, 6));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 63, 7, 6);
+        expect(date.cycle('era', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 6));
+      });
+    });
+
+    describe('year', function () {
+      it('should cycle the year', function () {
+        let date = new CalendarDate(2020, 9, 3);
+        expect(date.cycle('year', 1)).toEqual(new CalendarDate(2021, 9, 3));
+        expect(date.cycle('year', -1)).toEqual(new CalendarDate(2019, 9, 3));
+        expect(date.cycle('year', 5)).toEqual(new CalendarDate(2025, 9, 3));
+        expect(date.cycle('year', -5)).toEqual(new CalendarDate(2015, 9, 3));
+      });
+
+      it('should cycle the year with rounding', function () {
+        let date = new CalendarDate(2019, 9, 3);
+        expect(date.cycle('year', 5, {round: true})).toEqual(new CalendarDate(2020, 9, 3));
+        expect(date.cycle('year', -5, {round: true})).toEqual(new CalendarDate(2015, 9, 3));
+      });
+
+      it('should constrain the day on leap years', function () {
+        let date = new CalendarDate(2020, 2, 29);
+        expect(date.cycle('year', 1)).toEqual(new CalendarDate(2021, 2, 28));
+      });
+
+      it('should constrain the year within the era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30);
+        expect(date.cycle('year', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 1, 4, 30));
+        expect(date.cycle('year', 5)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 5, 4, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 2, 8, 5);
+        expect(date.cycle('year', -1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 25));
+      });
+    });
+
+    describe('month', function () {
+      it('should cycle the month', function () {
+        let date = new CalendarDate(2020, 9, 3);
+        expect(date.cycle('month', 1)).toEqual(new CalendarDate(2020, 10, 3));
+        expect(date.cycle('month', -1)).toEqual(new CalendarDate(2020, 8, 3));
+        expect(date.cycle('month', 4)).toEqual(new CalendarDate(2020, 1, 3));
+        expect(date.cycle('month', -10)).toEqual(new CalendarDate(2020, 11, 3));
+      });
+
+      it('should cycle the month with rounding', function () {
+        let date = new CalendarDate(2020, 8, 3);
+        expect(date.cycle('month', 5, {round: true})).toEqual(new CalendarDate(2020, 10, 3));
+        expect(date.cycle('month', -5, {round: true})).toEqual(new CalendarDate(2020, 5, 3));
+      });
+
+      it('should constrain the day', function () {
+        let date = new CalendarDate(2020, 1, 31);
+        expect(date.cycle('month', 1)).toEqual(new CalendarDate(2020, 2, 29));
+
+        date = new CalendarDate(2021, 1, 31);
+        expect(date.cycle('month', 1)).toEqual(new CalendarDate(2021, 2, 28));
+      });
+
+      it('should constrain the month within the era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30);
+        expect(date.cycle('month', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 1, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 1, 30);
+        expect(date.cycle('month', -1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'heisei', 31, 4, 30));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 25);
+        expect(date.cycle('month', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 25));
+      });
+    });
+
+    describe('day', function () {
+      it('should cycle the day', function () {
+        let date = new CalendarDate(2020, 9, 3);
+        expect(date.cycle('day', 1)).toEqual(new CalendarDate(2020, 9, 4));
+        expect(date.cycle('day', -1)).toEqual(new CalendarDate(2020, 9, 2));
+        expect(date.cycle('day', 28)).toEqual(new CalendarDate(2020, 9, 1));
+        expect(date.cycle('day', -4)).toEqual(new CalendarDate(2020, 9, 29));
+      });
+
+      it('should cycle the day with rounding', function () {
+        let date = new CalendarDate(2020, 8, 3);
+        expect(date.cycle('day', 5, {round: true})).toEqual(new CalendarDate(2020, 8, 5));
+        expect(date.cycle('day', -5, {round: true})).toEqual(new CalendarDate(2020, 8, 1));
+      });
+
+      it('should constrain the day within the era', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 7);
+        expect(date.cycle('day', 1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 63, 1, 1));
+
+        date = new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 25);
+        expect(date.cycle('day', -1)).toEqual(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 31));
       });
     });
   });
diff --git a/packages/@internationalized/date/tests/queries.test.js b/packages/@internationalized/date/tests/queries.test.js
new file mode 100644
index 00000000000..098dadb6099
--- /dev/null
+++ b/packages/@internationalized/date/tests/queries.test.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CalendarDate, endOfMonth, getMinimumDayInMonth, getMinimumMonthInYear, IslamicUmalquraCalendar, isSameDay, isSameMonth, isSameYear, JapaneseCalendar, startOfMonth} from '..';
+
+describe('queries', function () {
+  describe('isSameDay', function () {
+    it('works with two dates in the same calendar', function () {
+      expect(isSameDay(new CalendarDate(2020, 2, 3), new CalendarDate(2020, 2, 3))).toBe(true);
+      expect(isSameDay(new CalendarDate(2019, 2, 3), new CalendarDate(2020, 2, 3))).toBe(false);
+      expect(isSameDay(new CalendarDate(2020, 3, 3), new CalendarDate(2020, 2, 3))).toBe(false);
+      expect(isSameDay(new CalendarDate(2020, 2, 4), new CalendarDate(2020, 2, 3))).toBe(false);
+    });
+
+    it('works with two dates in different calendars', function () {
+      expect(isSameDay(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameDay(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4), new CalendarDate(2021, 4, 16))).toBe(true);
+      expect(isSameDay(new CalendarDate(2019, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameDay(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1441, 9, 4))).toBe(false);
+      expect(isSameDay(new CalendarDate(2021, 5, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameDay(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 10, 4))).toBe(false);
+      expect(isSameDay(new CalendarDate(2021, 4, 17), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameDay(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 3))).toBe(false);
+    });
+  });
+
+  describe('isSameMonth', function () {
+    it('works with two dates in the same calendar', function () {
+      expect(isSameMonth(new CalendarDate(2020, 2, 3), new CalendarDate(2020, 2, 3))).toBe(true);
+      expect(isSameMonth(new CalendarDate(2019, 2, 3), new CalendarDate(2020, 2, 3))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2020, 3, 3), new CalendarDate(2020, 2, 3))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2020, 2, 4), new CalendarDate(2020, 2, 3))).toBe(true);
+    });
+
+    it('works with two dates in different calendars', function () {
+      expect(isSameMonth(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameMonth(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4), new CalendarDate(2021, 4, 16))).toBe(true);
+      expect(isSameMonth(new CalendarDate(2019, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1441, 9, 4))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2021, 5, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 10, 4))).toBe(false);
+      expect(isSameMonth(new CalendarDate(2021, 4, 17), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameMonth(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 3))).toBe(true);
+    });
+  });
+
+  describe('isSameYear', function () {
+    it('works with two dates in the same calendar', function () {
+      expect(isSameYear(new CalendarDate(2020, 2, 3), new CalendarDate(2020, 2, 3))).toBe(true);
+      expect(isSameYear(new CalendarDate(2019, 2, 3), new CalendarDate(2020, 2, 3))).toBe(false);
+      expect(isSameYear(new CalendarDate(2020, 3, 3), new CalendarDate(2020, 2, 3))).toBe(true);
+      expect(isSameYear(new CalendarDate(2020, 2, 4), new CalendarDate(2020, 2, 3))).toBe(true);
+    });
+
+    it('works with two dates in different calendars', function () {
+      expect(isSameYear(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameYear(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4), new CalendarDate(2021, 4, 16))).toBe(true);
+      expect(isSameYear(new CalendarDate(2019, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(false);
+      expect(isSameYear(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1441, 9, 4))).toBe(false);
+      expect(isSameYear(new CalendarDate(2021, 5, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameYear(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 10, 4))).toBe(true);
+      expect(isSameYear(new CalendarDate(2021, 4, 17), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toBe(true);
+      expect(isSameYear(new CalendarDate(2021, 4, 16), new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 3))).toBe(true);
+    });
+  });
+
+  describe('startOfMonth', function () {
+    it('moves the day to the first of the month', function () {
+      expect(startOfMonth(new CalendarDate(2020, 2, 3))).toEqual(new CalendarDate(2020, 2, 1));
+      expect(startOfMonth(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toEqual(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 1));
+    });
+  });
+
+  describe('endOfMonth', function () {
+    it('moves the day to the last day of the month', function () {
+      expect(endOfMonth(new CalendarDate(2020, 2, 3))).toEqual(new CalendarDate(2020, 2, 29));
+      expect(endOfMonth(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 4))).toEqual(new CalendarDate(new IslamicUmalquraCalendar(), 1442, 9, 30));
+    });
+  });
+
+  describe('getMinimumMonthInYear', function () {
+    it('returns the minimum month of the year', function () {
+      expect(getMinimumMonthInYear(new CalendarDate(2020, 2, 3))).toBe(1);
+    });
+
+    it('returns the minimum month of the year in japanese eras', function () {
+      expect(getMinimumMonthInYear(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 30))).toBe(12);
+      expect(getMinimumMonthInYear(new CalendarDate(new JapaneseCalendar(), 'showa', 2, 12, 30))).toBe(1);
+    });
+  });
+
+  describe('getMinimumDayInMonth', function () {
+    it('returns the minimum day in a month', function () {
+      expect(getMinimumDayInMonth(new CalendarDate(2020, 2, 3))).toBe(1);
+    });
+
+    it('returns the minimum day in a month in japanese eras', function () {
+      expect(getMinimumDayInMonth(new CalendarDate(new JapaneseCalendar(), 'showa', 1, 12, 30))).toBe(25);
+      expect(getMinimumDayInMonth(new CalendarDate(new JapaneseCalendar(), 'showa', 2, 12, 30))).toBe(1);
+    });
+  });
+});
diff --git a/packages/@react-aria/calendar/src/useCalendar.ts b/packages/@react-aria/calendar/src/useCalendar.ts
index 274bae09ea1..c234084987d 100644
--- a/packages/@react-aria/calendar/src/useCalendar.ts
+++ b/packages/@react-aria/calendar/src/useCalendar.ts
@@ -11,20 +11,19 @@
  */
 
 import {CalendarAria} from './types';
-import {CalendarProps} from '@react-types/calendar';
+import {CalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarState} from '@react-stately/calendar';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {toDate} from '@internationalized/date';
 import {useCalendarBase} from './useCalendarBase';
 import {useMemo} from 'react';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-export function useCalendar(props: CalendarProps, state: CalendarState): CalendarAria {
+export function useCalendar<T extends DateValue>(props: CalendarProps<T>, state: CalendarState): CalendarAria {
   // Compute localized message for the selected date
   let formatMessage = useMessageFormatter(intlMessages);
   let selectedDateDescription = useMemo(
-    () => state.value ? formatMessage('selectedDateDescription', {date: toDate(state.value, state.timeZone)}) : '',
+    () => state.value ? formatMessage('selectedDateDescription', {date: state.value.toDate(state.timeZone)}) : '',
     [formatMessage, state.value, state.timeZone]
   );
 
diff --git a/packages/@react-aria/calendar/src/useCalendarBase.ts b/packages/@react-aria/calendar/src/useCalendarBase.ts
index 38df4bb16ea..eef4357fd27 100644
--- a/packages/@react-aria/calendar/src/useCalendarBase.ts
+++ b/packages/@react-aria/calendar/src/useCalendarBase.ts
@@ -19,7 +19,6 @@ import {filterDOMProps, mergeProps, useId, useLabels, useUpdateEffect} from '@re
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {KeyboardEvent, useRef} from 'react';
-import {toDate} from '@internationalized/date';
 import {useDateFormatter, useLocale, useMessageFormatter} from '@react-aria/i18n';
 
 export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarStateBase, selectedDateDescription: string): CalendarAria {
@@ -41,7 +40,7 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
   useUpdateEffect(() => {
     // announce the new month with a change from the Previous or Next button
     if (!state.isFocused) {
-      announce(monthFormatter.format(toDate(state.currentMonth, state.timeZone)));
+      announce(monthFormatter.format(state.currentMonth.toDate(state.timeZone)));
     }
     // handle an update to the current month from the Previous or Next button
     // rather than move focus, we announce the new month value
diff --git a/packages/@react-aria/calendar/src/useCalendarCell.ts b/packages/@react-aria/calendar/src/useCalendarCell.ts
index 330d7f07737..d3714052791 100644
--- a/packages/@react-aria/calendar/src/useCalendarCell.ts
+++ b/packages/@react-aria/calendar/src/useCalendarCell.ts
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, isSameDay, isToday, toDate} from '@internationalized/date';
+import {CalendarDate, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {PressProps, usePress} from '@react-aria/interactions';
+import {PressProps, useHover, usePress} from '@react-aria/interactions';
 import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
 
 export interface AriaCalendarCellProps {
@@ -44,7 +44,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   let isDisabled = state.isCellDisabled(date);
 
   // aria-label should be localize Day of week, Month, Day and Year without Time.
-  let nativeDate = toDate(date, state.timeZone);
+  let nativeDate = date.toDate(state.timeZone);
   let label = dateFormatter.format(nativeDate);
   if (isToday(date, state.timeZone)) {
     // If date is today, set appropriate string depending on selected state:
@@ -78,19 +78,31 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   }
 
   let {pressProps} = usePress({
-    onPress: () => {
+    onPress: (e) => {
       if (!isDisabled) {
         state.selectDate(date);
-        state.setFocusedDate(date);
+
+        // For range selection, auto-advance the focused date by one if the pointer type is keyboard or touch.
+        // This gives an indication that you're selecting a range rather than a single date.
+        // For mouse, this is unnecessary because users will see the indication on hover. For screen readers,
+        // there will be an announcement to "click to finish selecting range" (above).
+        if ((e.pointerType === 'keyboard' || e.pointerType === 'touch') && 'anchorDate' in state && !state.anchorDate) {
+          state.setFocusedDate(date.add({days: 1}));
+        } else {
+          state.setFocusedDate(date);
+        }
       }
     }
   });
 
-  let onMouseEnter = () => {
-    if ('highlightDate' in state) {
-      state.highlightDate(date);
+  let {hoverProps} = useHover({
+    isDisabled,
+    onHoverStart() {
+      if ('highlightDate' in state) {
+        state.highlightDate(date);
+      }
     }
-  };
+  });
 
   let tabIndex = null;
   if (!isDisabled) {
@@ -106,7 +118,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
 
   return {
     cellProps: {
-      onMouseEnter: isDisabled ? null : onMouseEnter,
+      ...hoverProps,
       role: 'gridcell',
       'aria-colindex': colIndex,
       'aria-disabled': isDisabled || null,
diff --git a/packages/@react-aria/calendar/src/useRangeCalendar.ts b/packages/@react-aria/calendar/src/useRangeCalendar.ts
index 907c7fad363..852a1ed10f0 100644
--- a/packages/@react-aria/calendar/src/useRangeCalendar.ts
+++ b/packages/@react-aria/calendar/src/useRangeCalendar.ts
@@ -11,17 +11,17 @@
  */
 
 import {CalendarAria} from './types';
+import {DateValue, RangeCalendarProps} from '@react-types/calendar';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {isSameDay, toDate} from '@internationalized/date';
+import {isSameDay} from '@internationalized/date';
 import {mergeProps} from '@react-aria/utils';
-import {RangeCalendarProps} from '@react-types/calendar';
 import {RangeCalendarState} from '@react-stately/calendar';
 import {useCalendarBase} from './useCalendarBase';
 import {useMemo} from 'react';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-export function useRangeCalendar(props: RangeCalendarProps, state: RangeCalendarState): CalendarAria {
+export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState): CalendarAria {
   // Compute localized message for the selected date or range
   let formatMessage = useMessageFormatter(intlMessages);
   let {start, end} = state.highlightedRange || {start: null, end: null};
@@ -31,9 +31,9 @@ export function useRangeCalendar(props: RangeCalendarProps, state: RangeCalendar
       // Use a single date message if the start and end dates are the same day,
       // otherwise include both dates.
       if (isSameDay(start, end)) {
-        return formatMessage('selectedDateDescription', {date: toDate(start, state.timeZone)});
+        return formatMessage('selectedDateDescription', {date: start.toDate(state.timeZone)});
       } else {
-        return formatMessage('selectedRangeDescription', {start: toDate(start, state.timeZone), end: toDate(end, state.timeZone)});
+        return formatMessage('selectedRangeDescription', {start: start.toDate(state.timeZone), end: end.toDate(state.timeZone)});
       }
     }
     return '';
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 3cfd77dc3b0..18bfde5d2f4 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaDatePickerProps} from '@react-types/datepicker';
+import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerFieldState} from '@react-stately/datepicker';
 import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
@@ -26,7 +26,7 @@ interface DateFieldAria {
 
 export const labelIds = new WeakMap<DatePickerFieldState, string>();
 
-export function useDateField(props: AriaDatePickerProps, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
+export function useDateField<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
   let {labelProps, fieldProps} = useLabel({
     ...props,
     labelElementType: 'span'
diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts
index 25adea1ca91..7178717683c 100644
--- a/packages/@react-aria/datepicker/src/useDatePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDatePicker.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {AriaDatePickerProps} from '@react-types/datepicker';
+import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
@@ -22,15 +22,15 @@ import {mergeProps, useDescription, useId} from '@react-aria/utils';
 import {useLabel} from '@react-aria/label';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DatePickerAria {
+interface DatePickerAria<T extends DateValue> {
   groupProps: HTMLAttributes<HTMLElement>,
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  fieldProps: AriaDatePickerProps,
+  fieldProps: AriaDatePickerProps<T>,
   buttonProps: AriaButtonProps,
   dialogProps: AriaDialogProps
 }
 
-export function useDatePicker(props: AriaDatePickerProps, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria {
+export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria<T> {
   let buttonId = useId();
   let dialogId = useId();
   let formatMessage = useMessageFormatter(intlMessages);
@@ -52,7 +52,7 @@ export function useDatePicker(props: AriaDatePickerProps, state: DatePickerState
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
 
   let {locale} = useLocale();
-  let descriptionProps = useDescription(state.dateValue ? state.formatValue(locale, {month: 'long'}) : null);
+  let descriptionProps = useDescription(state.formatValue(locale, {month: 'long'}));
 
   return {
     groupProps: mergeProps(descriptionProps, {
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index 0721c94fe06..2f949e9153c 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';
+import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DateRangePickerState} from '@react-stately/datepicker';
@@ -23,16 +23,16 @@ import {mergeProps, useDescription, useId, useLabels} from '@react-aria/utils';
 import {useLabel} from '@react-aria/label';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DateRangePickerAria {
+interface DateRangePickerAria<T extends DateValue> {
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   groupProps: HTMLAttributes<HTMLElement>,
-  startFieldProps: AriaDatePickerProps,
-  endFieldProps: AriaDatePickerProps,
+  startFieldProps: AriaDatePickerProps<T>,
+  endFieldProps: AriaDatePickerProps<T>,
   buttonProps: AriaButtonProps,
   dialogProps:  AriaDialogProps
 }
 
-export function useDateRangePicker(props: AriaDateRangePickerProps, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria {
+export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria<T> {
   let formatMessage = useMessageFormatter(intlMessages);
   let {labelProps, fieldProps} = useLabel({
     ...props,
diff --git a/packages/@react-aria/datepicker/src/useDateSegment.ts b/packages/@react-aria/datepicker/src/useDateSegment.ts
index 2481eedc9b2..a8c23b133a3 100644
--- a/packages/@react-aria/datepicker/src/useDateSegment.ts
+++ b/packages/@react-aria/datepicker/src/useDateSegment.ts
@@ -11,7 +11,7 @@
  */
 
 import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
-import {DatePickerProps} from '@react-types/datepicker';
+import {DatePickerProps, DateValue} from '@react-types/datepicker';
 import {DOMProps} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -28,7 +28,7 @@ interface DateSegmentAria {
   segmentProps: HTMLAttributes<HTMLDivElement>
 }
 
-export function useDateSegment(props: DatePickerProps & DOMProps, segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
+export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> & DOMProps, segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
   let enteredKeys = useRef('');
   let {locale, direction} = useLocale();
   let messageFormatter = useMessageFormatter(intlMessages);
@@ -124,7 +124,7 @@ export function useDateSegment(props: DatePickerProps & DOMProps, segment: DateS
         // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
         e.preventDefault();
         e.stopPropagation();
-        if (parser.isValidPartialNumber(segment.text, segment.minValue, segment.maxValue) && !props.isReadOnly) {
+        if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) {
           let newValue = segment.text.slice(0, -1);
           state.setSegment(segment.type, newValue.length === 0 ? segment.minValue : parser.parse(newValue));
           enteredKeys.current = newValue;
@@ -173,15 +173,28 @@ export function useDateSegment(props: DatePickerProps & DOMProps, segment: DateS
       case 'second':
       case 'month':
       case 'year': {
-        if (!parser.isValidPartialNumber(newValue, segment.minValue, segment.maxValue)) {
+        if (!parser.isValidPartialNumber(newValue)) {
           return;
         }
 
         let numberValue = parser.parse(newValue);
         let segmentValue = numberValue;
         if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {
-          if (numberValue > 12) {
-            segmentValue = parser.parse(key);
+          switch (state.dateFormatter.resolvedOptions().hourCycle) {
+            case 'h11':
+              if (numberValue > 11) {
+                segmentValue = parser.parse(key);
+              }
+              break;
+            case 'h12':
+              if (numberValue === 0) {
+                return;
+              }
+
+              if (numberValue > 12) {
+                segmentValue = parser.parse(key);
+              }
+              break;
           }
 
           if (segment.value >= 12 && numberValue > 1) {
@@ -230,7 +243,7 @@ export function useDateSegment(props: DatePickerProps & DOMProps, segment: DateS
     switch (e.inputType) {
       case 'deleteContentBackward':
       case 'deleteContentForward':
-        if (parser.isValidPartialNumber(segment.text, segment.minValue, segment.maxValue) && !props.isReadOnly) {
+        if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) {
           let newValue = segment.text.slice(0, -1);
           state.setSegment(segment.type, newValue.length === 0 ? segment.minValue : parser.parse(newValue));
           enteredKeys.current = newValue;
diff --git a/packages/@react-spectrum/calendar/package.json b/packages/@react-spectrum/calendar/package.json
index 003bfb3eba9..f381dde3773 100644
--- a/packages/@react-spectrum/calendar/package.json
+++ b/packages/@react-spectrum/calendar/package.json
@@ -38,6 +38,7 @@
     "@react-aria/focus": "^3.1.0",
     "@react-aria/i18n": "^3.1.0",
     "@react-aria/interactions": "^3.1.0",
+    "@react-aria/utils": "^3.8.2",
     "@react-aria/visually-hidden": "^3.1.0",
     "@react-spectrum/button": "^3.1.0",
     "@react-spectrum/utils": "^3.1.0",
diff --git a/packages/@react-spectrum/calendar/src/Calendar.tsx b/packages/@react-spectrum/calendar/src/Calendar.tsx
index f3644ef65b9..6afa9bea2f8 100644
--- a/packages/@react-spectrum/calendar/src/Calendar.tsx
+++ b/packages/@react-spectrum/calendar/src/Calendar.tsx
@@ -12,12 +12,12 @@
 
 import {CalendarBase} from './CalendarBase';
 import {createCalendar} from '@internationalized/date';
+import {DateValue, SpectrumCalendarProps} from '@react-types/calendar';
 import React from 'react';
-import {SpectrumCalendarProps} from '@react-types/calendar';
 import {useCalendar} from '@react-aria/calendar';
 import {useCalendarState} from '@react-stately/calendar';
 
-export function Calendar(props: SpectrumCalendarProps) {
+export function Calendar<T extends DateValue>(props: SpectrumCalendarProps<T>) {
   let state = useCalendarState({
     ...props,
     createCalendar
diff --git a/packages/@react-spectrum/calendar/src/CalendarCell.tsx b/packages/@react-spectrum/calendar/src/CalendarCell.tsx
index e5fe2ff5aff..16bb1981527 100644
--- a/packages/@react-spectrum/calendar/src/CalendarCell.tsx
+++ b/packages/@react-spectrum/calendar/src/CalendarCell.tsx
@@ -14,9 +14,11 @@ import {AriaCalendarCellProps, useCalendarCell} from '@react-aria/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {classNames} from '@react-spectrum/utils';
 import {getDayOfWeek, isSameDay, isSameMonth, isToday, toDate} from '@internationalized/date';
+import {mergeProps} from '@react-aria/utils';
 import React, {useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useDateFormatter} from '@react-aria/i18n';
+import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
 
 interface CalendarCellProps extends AriaCalendarCellProps {
@@ -39,19 +41,19 @@ export function CalendarCell({state, ...props}: CalendarCellProps) {
   let dayOfWeek = getDayOfWeek(props.date);
   let isRangeStart = isSelected && (dayOfWeek === 0 || props.date.day === 1);
   let isRangeEnd = isSelected && (dayOfWeek === 6 || props.date.day === state.daysInMonth);
+  let {focusProps, isFocusVisible} = useFocusRing();
 
   return (
     <td
       {...cellProps}
       className={classNames(styles, 'spectrum-Calendar-tableCell')}>
       <span
-        {...buttonProps}
-        {...hoverProps}
+        {...mergeProps(buttonProps, hoverProps, focusProps)}
         ref={ref}
         className={classNames(styles, 'spectrum-Calendar-date', {
           'is-today': isToday(props.date, state.timeZone),
           'is-selected': isSelected,
-          'is-focused': state.isCellFocused(props.date),
+          'is-focused': state.isCellFocused(props.date) && isFocusVisible,
           'is-disabled': state.isCellDisabled(props.date),
           'is-outsideMonth': !isSameMonth(props.date, state.currentMonth),
           'is-range-start': isRangeStart,
diff --git a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx
index a2634d9ecf1..ccf0ab325e6 100644
--- a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx
+++ b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx
@@ -12,12 +12,12 @@
 
 import {CalendarBase} from './CalendarBase';
 import {createCalendar} from '@internationalized/date';
+import {DateValue, SpectrumRangeCalendarProps} from '@react-types/calendar';
 import React from 'react';
-import {SpectrumRangeCalendarProps} from '@react-types/calendar';
 import {useRangeCalendar} from '@react-aria/calendar';
 import {useRangeCalendarState} from '@react-stately/calendar';
 
-export function RangeCalendar(props: SpectrumRangeCalendarProps) {
+export function RangeCalendar<T extends DateValue>(props: SpectrumRangeCalendarProps<T>) {
   let state = useRangeCalendarState({
     ...props,
     createCalendar
diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
index 7b6bd80086b..1e2f3c8a716 100644
--- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
@@ -11,13 +11,14 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {addWeeks} from 'date-fns';
 import {Calendar} from '../';
+import {CalendarDate, CalendarDateTime, getLocalTimeZone, parseZonedDateTime, today, ZonedDateTime} from '@internationalized/date';
 import {Flex} from '@react-spectrum/layout';
 import {Item, Picker, Section} from '@react-spectrum/picker';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
+import {TimeField} from '@react-spectrum/datepicker';
 import {useLocale} from '@react-aria/i18n';
 
 storiesOf('Date and Time/Calendar', module)
@@ -27,31 +28,39 @@ storiesOf('Date and Time/Calendar', module)
   )
   .add(
     'defaultValue',
-    () => render({defaultValue: new Date(2019, 5, 5)})
+    () => render({defaultValue: new CalendarDate(2019, 6, 5)})
   )
   .add(
     'controlled value',
-    () => render({value: new Date(2019, 5, 5)})
+    () => render({value: new CalendarDate(2019, 5, 5)})
+  )
+  .add(
+    'with time',
+    () => <CalendarWithTime />
+  )
+  .add(
+    'with zoned time',
+    () => <CalendarWithZonedTime />
   )
   .add(
     'minValue: today, maxValue: 1 week from now',
-    () => render({minValue: new Date(), maxValue: addWeeks(new Date(), 1)})
+    () => render({minValue: today(getLocalTimeZone()), maxValue: today(getLocalTimeZone()).add({weeks: 1})})
   )
   .add(
     'defaultValue + minValue + maxValue',
-    () => render({defaultValue: new Date(2019, 5, 10), minValue: new Date(2019, 5, 5), maxValue: new Date(2019, 5, 20)})
+    () => render({defaultValue: new CalendarDate(2019, 6, 10), minValue: new CalendarDate(2019, 6, 5), maxValue: new CalendarDate(2019, 6, 20)})
   )
   .add(
     'isDisabled',
-    () => render({defaultValue: new Date(2019, 5, 5), isDisabled: true})
+    () => render({defaultValue: new CalendarDate(2019, 6, 5), isDisabled: true})
   )
   .add(
     'isReadOnly',
-    () => render({defaultValue: new Date(2019, 5, 5), isReadOnly: true})
+    () => render({defaultValue: new CalendarDate(2019, 6, 5), isReadOnly: true})
   )
   .add(
     'autoFocus',
-    () => render({defaultValue: new Date(2019, 5, 5), autoFocus: true})
+    () => render({defaultValue: new CalendarDate(2019, 6, 5), autoFocus: true})
   );
 
 function render(props = {}) {
@@ -128,3 +137,33 @@ function Example(props) {
     </Flex>
   );
 }
+
+function CalendarWithTime() {
+  let [value, setValue] = useState(new CalendarDateTime(2019, 6, 5, 8));
+  let onChange = (v: CalendarDateTime) => {
+    setValue(v);
+    action('onChange')(v);
+  };
+
+  return (
+    <Flex direction="column">
+      <Calendar value={value} onChange={onChange} />
+      <TimeField label="Time" value={value} onChange={onChange} />
+    </Flex>
+  );
+}
+
+function CalendarWithZonedTime() {
+  let [value, setValue] = useState(parseZonedDateTime('2021-03-14T00:45-08:00[America/Los_Angeles]'));
+  let onChange = (v: ZonedDateTime) => {
+    setValue(v);
+    action('onChange')(v);
+  };
+
+  return (
+    <Flex direction="column">
+      <Calendar value={value} onChange={onChange} />
+      <TimeField label="Time" value={value} onChange={onChange} />
+    </Flex>
+  );
+}
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
index 65cbe8de2ea..1bcfea12901 100644
--- a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
@@ -11,10 +11,12 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {addWeeks} from 'date-fns';
+import {CalendarDate, CalendarDateTime, getLocalTimeZone, parseZonedDateTime, today} from '@internationalized/date';
+import {Flex} from '@react-spectrum/layout';
 import {RangeCalendar} from '../';
-import React from 'react';
+import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
+import {TimeField} from '@react-spectrum/datepicker';
 
 storiesOf('Date and Time/RangeCalendar', module)
   .add(
@@ -23,33 +25,69 @@ storiesOf('Date and Time/RangeCalendar', module)
   )
   .add(
     'defaultValue',
-    () => render({defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}})
+    () => render({defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}})
   )
   .add(
     'controlled value',
-    () => render({value: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}})
+    () => render({value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}})
+  )
+  .add(
+    'with time',
+    () => <RangeCalendarWithTime />
+  )
+  .add(
+    'with zoned time',
+    () => <RangeCalendarWithZonedTime />
   )
   .add(
     'minValue: today, maxValue: 1 week from now',
-    () => render({minValue: new Date(), maxValue: addWeeks(new Date(), 1)})
+    () => render({minValue: today(getLocalTimeZone()), maxValue: today(getLocalTimeZone()).add({weeks: 1})})
   )
   .add(
     'defaultValue + minValue + maxValue',
-    () => render({defaultValue: {start: new Date(2019, 5, 10), end: new Date(2019, 5, 12)}, minValue: new Date(2019, 5, 5), maxValue: new Date(2019, 5, 20)})
+    () => render({defaultValue: {start: new CalendarDate(2019, 6, 10), end: new CalendarDate(2019, 6, 12)}, minValue: new CalendarDate(2019, 6, 5), maxValue: new CalendarDate(2019, 6, 20)})
   )
   .add(
     'isDisabled',
-    () => render({defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}, isDisabled: true})
+    () => render({defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}, isDisabled: true})
   )
   .add(
     'isReadOnly',
-    () => render({defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}, isReadOnly: true})
+    () => render({defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}, isReadOnly: true})
   )
   .add(
     'autoFocus',
-    () => render({defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}, autoFocus: true})
+    () => render({defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}, autoFocus: true})
   );
 
 function render(props = {}) {
   return <RangeCalendar onChange={action('change')} {...props} />;
 }
+
+function RangeCalendarWithTime() {
+  let [value, setValue] = useState({start: new CalendarDateTime(2019, 6, 5, 8), end: new CalendarDateTime(2019, 6, 10, 12)});
+
+  return (
+    <Flex direction="column">
+      <RangeCalendar value={value} onChange={setValue} />
+      <Flex gap="size-100">
+        <TimeField label="Start time" value={value.start} onChange={v => setValue({...value, start: v})} />
+        <TimeField label="End time" value={value.end} onChange={v => setValue({...value, end: v})} />
+      </Flex>
+    </Flex>
+  );
+}
+
+function RangeCalendarWithZonedTime() {
+  let [value, setValue] = useState({start: parseZonedDateTime('2021-03-10T00:45-05:00[America/New_York]'), end: parseZonedDateTime('2021-03-26T18:05-07:00[America/Los_Angeles]')});
+
+  return (
+    <Flex direction="column">
+      <RangeCalendar value={value} onChange={setValue} />
+      <Flex gap="size-100">
+        <TimeField label="Start time" value={value.start} onChange={v => setValue({...value, start: v})} />
+        <TimeField label="End time" value={value.end} onChange={v => setValue({...value, end: v})} />
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/packages/@react-spectrum/calendar/test/Calendar.test.js b/packages/@react-spectrum/calendar/test/Calendar.test.js
index 07130e33075..ee113fb5d26 100644
--- a/packages/@react-spectrum/calendar/test/Calendar.test.js
+++ b/packages/@react-spectrum/calendar/test/Calendar.test.js
@@ -13,10 +13,10 @@
 jest.mock('@react-aria/live-announcer');
 import {announce} from '@react-aria/live-announcer';
 import {Calendar} from '../';
+import {CalendarDate} from '@internationalized/date';
 import {fireEvent, render} from '@testing-library/react';
 import React from 'react';
 import {triggerPress} from '@react-spectrum/test-utils';
-import V2Calendar from '@react/react-spectrum/Calendar';
 
 let keyCodes = {'Enter': 13, ' ': 32, 'PageUp': 33, 'PageDown': 34, 'End': 35, 'Home': 36, 'ArrowLeft': 37, 'ArrowUp': 38, 'ArrowRight': 39, 'ArrowDown': 40};
 
@@ -33,10 +33,8 @@ describe('Calendar', () => {
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name should render a calendar with a defaultValue', ({Calendar}) => {
-      let isV2 = Calendar === V2Calendar;
-      let {getByLabelText, getByRole, getAllByRole} = render(<Calendar defaultValue={new Date(2019, 5, 5)} />);
+      let {getByLabelText, getByRole, getAllByRole} = render(<Calendar defaultValue={new CalendarDate(2019, 6, 5)} />);
 
       let heading = getByRole('heading');
       expect(heading).toHaveTextContent('June 2019');
@@ -45,18 +43,16 @@ describe('Calendar', () => {
       expect(gridCells.length).toBe(30);
 
       let selectedDate = getByLabelText('Selected', {exact: false});
-      expect(isV2 ? selectedDate : selectedDate.parentElement).toHaveAttribute('role', 'gridcell');
-      expect(isV2 ? selectedDate : selectedDate.parentElement).toHaveAttribute('aria-selected', 'true');
+      expect(selectedDate.parentElement).toHaveAttribute('role', 'gridcell');
+      expect(selectedDate.parentElement).toHaveAttribute('aria-selected', 'true');
       expect(selectedDate).toHaveAttribute('aria-label', 'Wednesday, June 5, 2019 selected');
     });
 
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name should render a calendar with a value', ({Calendar}) => {
-      let isV2 = Calendar === V2Calendar;
-      let {getByLabelText, getByRole, getAllByRole} = render(<Calendar value={new Date(2019, 5, 5)} />);
+      let {getByLabelText, getByRole, getAllByRole} = render(<Calendar value={new CalendarDate(2019, 6, 5)} />);
 
       let heading = getByRole('heading');
       expect(heading).toHaveTextContent('June 2019');
@@ -65,32 +61,24 @@ describe('Calendar', () => {
       expect(gridCells.length).toBe(30);
 
       let selectedDate = getByLabelText('Selected', {exact: false});
-      expect(isV2 ? selectedDate : selectedDate.parentElement).toHaveAttribute('role', 'gridcell');
-      expect(isV2 ? selectedDate : selectedDate.parentElement).toHaveAttribute('aria-selected', 'true');
+      expect(selectedDate.parentElement).toHaveAttribute('role', 'gridcell');
+      expect(selectedDate.parentElement).toHaveAttribute('aria-selected', 'true');
       expect(selectedDate).toHaveAttribute('aria-label', 'Wednesday, June 5, 2019 selected');
     });
 
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name should focus the selected date if autoFocus is set', ({Calendar}) => {
-      let {getByRole, getByLabelText} = render(<Calendar value={new Date(2019, 1, 3)} autoFocus />);
+      let {getByRole, getByLabelText} = render(<Calendar value={new CalendarDate(2019, 2, 3)} autoFocus />);
 
       let cell = getByLabelText('selected', {exact: false});
 
       let grid = getByRole('grid');
-      if (Calendar === V2Calendar) {
-        expect(cell).toHaveAttribute('role', 'gridcell');
-        expect(cell).toHaveAttribute('aria-selected', 'true');
-        expect(grid).toHaveFocus();
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      } else {
-        expect(cell.parentElement).toHaveAttribute('role', 'gridcell');
-        expect(cell.parentElement).toHaveAttribute('aria-selected', 'true');
-        expect(cell).toHaveFocus();
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-      }
+      expect(cell.parentElement).toHaveAttribute('role', 'gridcell');
+      expect(cell.parentElement).toHaveAttribute('aria-selected', 'true');
+      expect(cell).toHaveFocus();
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
     });
   });
 
@@ -98,12 +86,11 @@ describe('Calendar', () => {
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name selects a date on keyDown Enter/Space (uncontrolled)', ({Calendar}) => {
       let onChange = jest.fn();
       let {getByLabelText, getByRole} = render(
         <Calendar
-          defaultValue={new Date(2019, 5, 5)}
+          defaultValue={new CalendarDate(2019, 6, 5)}
           autoFocus
           onChange={onChange} />
       );
@@ -118,25 +105,24 @@ describe('Calendar', () => {
       selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('4');
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0].valueOf()).toBe(new Date(2019, 5, 4).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[0][0]).toEqual(new CalendarDate(2019, 6, 4));
 
       fireEvent.keyDown(grid, {key: 'ArrowLeft', keyCode: keyCodes.ArrowLeft});
       fireEvent.keyDown(grid, {key: ' ', keyCode: keyCodes[' ']});
       selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('3');
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange.mock.calls[1][0].valueOf()).toBe(new Date(2019, 5, 3).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[1][0]).toEqual(new CalendarDate(2019, 6, 3));
     });
 
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name selects a date on keyDown Enter/Space (controlled)', ({Calendar}) => {
       let onChange = jest.fn();
       let {getByLabelText, getByRole} = render(
         <Calendar
-          value={new Date(2019, 5, 5)}
+          value={new CalendarDate(2019, 6, 5)}
           autoFocus
           onChange={onChange} />
       );
@@ -151,21 +137,16 @@ describe('Calendar', () => {
       selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('5'); // controlled
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0].valueOf()).toBe(new Date(2019, 5, 4).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[0][0]).toEqual(new CalendarDate(2019, 6, 4));
 
       fireEvent.keyDown(grid, {key: 'ArrowLeft', keyCode: keyCodes.ArrowLeft});
       fireEvent.keyDown(grid, {key: ' ', keyCode: keyCodes[' ']});
       selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('5'); // controlled
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange.mock.calls[1][0].valueOf()).toBe(new Date(2019, 5, 3).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[1][0]).toEqual(new CalendarDate(2019, 6, 3));
     });
 
-    // v2 tests disabled until next release
-    // it.each`
-    //   Name      | Calendar      | props
-    //   ${'v3'}   | ${Calendar}   | ${{isReadOnly: true}}
-    //   ${'v2'}   | ${V2Calendar} | ${{readOnly: true}}
     it.each`
       Name      | Calendar      | props
       ${'v3'}   | ${Calendar}   | ${{isReadOnly: true}}
@@ -173,7 +154,7 @@ describe('Calendar', () => {
       let onChange = jest.fn();
       let {getByLabelText} = render(
         <Calendar
-          defaultValue={new Date(2019, 5, 5)}
+          defaultValue={new CalendarDate(2019, 6, 5)}
           autoFocus
           onChange={onChange}
           {...props} />
@@ -195,11 +176,6 @@ describe('Calendar', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    // v2 tests disabled until next release
-    // it.each`
-    //   Name      | Calendar
-    //   ${'v3'}   | ${Calendar}
-    //   ${'v2'}   | ${V2Calendar}
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
@@ -207,7 +183,7 @@ describe('Calendar', () => {
       let onChange = jest.fn();
       let {getByLabelText, getByText} = render(
         <Calendar
-          defaultValue={new Date(2019, 5, 5)}
+          defaultValue={new CalendarDate(2019, 6, 5)}
           onChange={onChange} />
       );
 
@@ -217,18 +193,17 @@ describe('Calendar', () => {
       let selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('17');
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0].valueOf()).toBe(new Date(2019, 5, 17).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[0][0]).toEqual(new CalendarDate(2019, 6, 17));
     });
 
     it.each`
       Name      | Calendar
       ${'v3'}   | ${Calendar}
-      ${'v2'}   | ${V2Calendar}
     `('$Name selects a date on click (controlled)', ({Calendar}) => {
       let onChange = jest.fn();
       let {getByLabelText, getByText} = render(
         <Calendar
-          value={new Date(2019, 5, 5)}
+          value={new CalendarDate(2019, 6, 5)}
           onChange={onChange} />
       );
 
@@ -238,18 +213,17 @@ describe('Calendar', () => {
       let selectedDate = getByLabelText('selected', {exact: false});
       expect(selectedDate.textContent).toBe('5');
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0].valueOf()).toBe(new Date(2019, 5, 17).valueOf()); // v2 returns a moment object
+      expect(onChange.mock.calls[0][0]).toEqual(new CalendarDate(2019, 6, 17));
     });
 
     it.each`
       Name      | Calendar      | props
       ${'v3'}   | ${Calendar}   | ${{isDisabled: true}}
-      ${'v2'}   | ${V2Calendar} | ${{disabled: true}}
     `('$Name does not select a date on click if isDisabled', ({Calendar, props}) => {
       let onChange = jest.fn();
       let {getByLabelText, getByText} = render(
         <Calendar
-          value={new Date(2019, 5, 5)}
+          value={new CalendarDate(2019, 6, 5)}
           onChange={onChange}
           {...props} />
       );
@@ -262,11 +236,6 @@ describe('Calendar', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    // v2 tests disabled until next release
-    // it.each`
-    //   Name      | Calendar      | props
-    //   ${'v3'}   | ${Calendar}   | ${{isReadOnly: true}}
-    //   ${'v2'}   | ${V2Calendar} | ${{readOnly: true}}
     it.each`
       Name      | Calendar      | props
       ${'v3'}   | ${Calendar}   | ${{isReadOnly: true}}
@@ -274,7 +243,7 @@ describe('Calendar', () => {
       let onChange = jest.fn();
       let {getByLabelText, getByText} = render(
         <Calendar
-          value={new Date(2019, 5, 5)}
+          value={new CalendarDate(2019, 6, 5)}
           onChange={onChange}
           {...props} />
       );
@@ -289,8 +258,7 @@ describe('Calendar', () => {
 
     it.each`
       Name      | Calendar      | props
-      ${'v3'}   | ${Calendar}   | ${{defaultValue: new Date(2019, 1, 8), minValue: new Date(2019, 1, 5), maxValue: new Date(2019, 1, 15)}}
-      ${'v2'}   | ${V2Calendar} | ${{defaultValue: new Date(2019, 1, 8), min: new Date(2019, 1, 5), max: new Date(2019, 1, 15)}}
+      ${'v3'}   | ${Calendar}   | ${{defaultValue: new CalendarDate(2019, 2, 8), minValue: new CalendarDate(2019, 2, 5), maxValue: new CalendarDate(2019, 2, 15)}}
     `('$Name does not select a date on click if outside the valid date range', ({Calendar, props}) => {
       let onChange = jest.fn();
       let {getByLabelText} = render(
@@ -328,7 +296,7 @@ describe('Calendar', () => {
   // These tests only work against v3
   describe('announcing', () => {
     it('announces when the current month changes', () => {
-      let {getByLabelText} = render(<Calendar defaultValue={new Date(2019, 5, 5)} />);
+      let {getByLabelText} = render(<Calendar defaultValue={new CalendarDate(2019, 6, 5)} />);
 
       let nextButton = getByLabelText('Next');
       triggerPress(nextButton);
@@ -338,7 +306,7 @@ describe('Calendar', () => {
     });
 
     it('announces when the selected date changes', () => {
-      let {getByText} = render(<Calendar defaultValue={new Date(2019, 5, 5)} />);
+      let {getByText} = render(<Calendar defaultValue={new CalendarDate(2019, 6, 5)} />);
 
       let newDate = getByText('17');
       triggerPress(newDate);
@@ -348,7 +316,7 @@ describe('Calendar', () => {
     });
 
     it('ensures that the active descendant is announced when the focused date changes', () => {
-      let {getByRole, getByLabelText} = render(<Calendar defaultValue={new Date(2019, 5, 5)} autoFocus />);
+      let {getByRole, getByLabelText} = render(<Calendar defaultValue={new CalendarDate(2019, 6, 5)} autoFocus />);
 
       let grid = getByRole('grid');
       let selectedDate = getByLabelText('selected', {exact: false});
@@ -359,7 +327,7 @@ describe('Calendar', () => {
     });
 
     it('renders a caption with the selected date', () => {
-      let {getByText, getByRole} = render(<Calendar defaultValue={new Date(2019, 5, 5)} />);
+      let {getByText, getByRole} = render(<Calendar defaultValue={new CalendarDate(2019, 6, 5)} />);
 
       let grid = getByRole('grid');
       let caption = document.getElementById(grid.getAttribute('aria-describedby'));
diff --git a/packages/@react-spectrum/calendar/test/CalendarBase.test.js b/packages/@react-spectrum/calendar/test/CalendarBase.test.js
index 33026c12f7e..b7f0ba84760 100644
--- a/packages/@react-spectrum/calendar/test/CalendarBase.test.js
+++ b/packages/@react-spectrum/calendar/test/CalendarBase.test.js
@@ -12,12 +12,12 @@
 
 import {act, fireEvent, render} from '@testing-library/react';
 import {Calendar, RangeCalendar} from '../';
+import {CalendarDate} from '@internationalized/date';
 import {getDaysInMonth} from 'date-fns';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import {triggerPress} from '@react-spectrum/test-utils';
-import V2Calendar from '@react/react-spectrum/Calendar';
 
 let cellFormatter = new Intl.DateTimeFormat('en-US', {weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'});
 let headingFormatter = new Intl.DateTimeFormat('en-US', {month: 'long', year: 'numeric'});
@@ -46,10 +46,7 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name shows the current month by default', ({Calendar, props}) => {
-      const isV2 = Calendar === V2Calendar;
       let {getByLabelText, getByRole, getAllByRole} = render(<Calendar {...props} />);
 
       let calendar = getByRole('group');
@@ -59,17 +56,12 @@ describe('CalendarBase', () => {
       expect(heading).toHaveTextContent(headingFormatter.format(new Date()));
 
       let grid = getByRole('grid');
-
-      if (isV2) {
-        expect(grid).toHaveAttribute('tabIndex', '0');
-      } else {
-        expect(grid).not.toHaveAttribute('tabIndex');
-      }
+      expect(grid).not.toHaveAttribute('tabIndex');
 
       let today = getByLabelText('today', {exact: false});
-      expect(isV2 ? today : today.parentElement).toHaveAttribute('role', 'gridcell');
+      expect(today.parentElement).toHaveAttribute('role', 'gridcell');
       expect(today).toHaveAttribute('aria-label', `Today, ${cellFormatter.format(new Date())}`);
-      expect(today).toHaveAttribute('tabIndex', !isV2 ? '0' : '-1');
+      expect(today).toHaveAttribute('tabIndex', '0');
 
       expect(getByLabelText('Previous')).toBeVisible();
       expect(getByLabelText('Next')).toBeVisible();
@@ -77,7 +69,7 @@ describe('CalendarBase', () => {
       let gridCells = getAllByRole('gridcell').filter(cell => cell.getAttribute('aria-disabled') !== 'true');
       expect(gridCells.length).toBe(getDaysInMonth(new Date()));
       for (let cell of gridCells) {
-        expect(isV2 ? cell : cell.children[0]).toHaveAttribute('aria-label');
+        expect(cell.children[0]).toHaveAttribute('aria-label');
       }
     });
 
@@ -85,8 +77,6 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{isDisabled: true}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{isDisabled: true}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{disabled: true}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range', disabled: true}}
     `('$Name should set aria-disabled when isDisabled', ({Calendar, props}) => {
       let {getByRole, getAllByRole, getByLabelText} = render(<Calendar {...props} />);
 
@@ -107,46 +97,29 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{isReadOnly: true}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{isReadOnly: true}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{readOnly: true}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range', readOnly: true}}
     `('$Name should set aria-readonly when isReadOnly', ({Calendar, props}) => {
-      const isV2 = Calendar === V2Calendar;
       let {getByRole} = render(<Calendar {...props} />);
       let grid = getByRole('grid');
       expect(grid).toHaveAttribute('aria-readonly', 'true');
-      if (isV2) {
-        expect(grid).toHaveAttribute('tabIndex', '0');
-      } else {
-        expect(grid).not.toHaveAttribute('tabIndex');
-      }
+      expect(grid).not.toHaveAttribute('tabIndex');
     });
 
     it.each`
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name should focus today if autoFocus is set and there is no selected value', ({Name, Calendar}) => {
-      const isV2 = Calendar === V2Calendar;
-      let {getByRole, getByLabelText} = render(<Calendar autoFocus />);
+      let {getByLabelText} = render(<Calendar autoFocus />);
 
       let cell = getByLabelText('today', {exact: false});
-      expect(isV2 ? cell : cell.parentElement).toHaveAttribute('role', 'gridcell');
-
-      let grid = getByRole('grid');
-      expect(isV2 ? grid : cell).toHaveFocus();
-      if (isV2) {
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      }
+      expect(cell.parentElement).toHaveAttribute('role', 'gridcell');
+      expect(cell).toHaveFocus();
     });
 
     it.each`
       Name                    | Calendar              | props
-      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new Date(2019, 1, 10), minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 1, 20)}}
-      ${'v2 Calendar'}        | ${V2Calendar}         | ${{defaultValue: new Date(2019, 1, 10), min: new Date(2019, 1, 3), max: new Date(2019, 1, 20)}}
-      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new Date(2019, 1, 10), end: new Date(2019, 1, 15)}, minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 1, 20)}}
-      ${'v2 range Calendar'}  | ${V2Calendar}         | ${{selectionType: 'range', defaultValue: [new Date(2019, 1, 10), new Date(2019, 1, 15)], min: new Date(2019, 1, 3), max: new Date(2019, 1, 20)}}
+      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new CalendarDate(2019, 2, 10), minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 2, 20)}}
+      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new CalendarDate(2019, 2, 10), end: new CalendarDate(2019, 2, 15)}, minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 2, 20)}}
     `('$Name should set aria-disabled on cells outside the valid date range', ({Calendar, props}) => {
       let {getAllByRole} = render(<Calendar {...props} />);
 
@@ -156,8 +129,8 @@ describe('CalendarBase', () => {
 
     it.each`
       Name                    | Calendar              | props
-      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new Date(2019, 1, 10), minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 2, 20)}}
-      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new Date(2019, 1, 10), end: new Date(2019, 1, 15)}, minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 2, 20)}}
+      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new CalendarDate(2019, 2, 10), minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 3, 20)}}
+      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new CalendarDate(2019, 2, 10), end: new CalendarDate(2019, 2, 15)}, minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 3, 20)}}
     `('$Name should disable the previous button if outside valid date range', ({Calendar, props}) => {
       let {getByLabelText} = render(<Calendar {...props} />);
 
@@ -167,8 +140,8 @@ describe('CalendarBase', () => {
 
     it.each`
       Name                    | Calendar              | props
-      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new Date(2019, 2, 10), minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 2, 20)}}
-      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new Date(2019, 2, 10), end: new Date(2019, 2, 15)}, minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 2, 20)}}
+      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new CalendarDate(2019, 3, 10), minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 3, 20)}}
+      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new CalendarDate(2019, 3, 10), end: new CalendarDate(2019, 3, 15)}, minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 3, 20)}}
     `('$Name should disable the next button if outside valid date range', ({Calendar, props}) => {
       let {getByLabelText} = render(<Calendar {...props} />);
 
@@ -178,8 +151,8 @@ describe('CalendarBase', () => {
 
     it.each`
       Name                    | Calendar              | props
-      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new Date(2019, 2, 10), minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 1, 20)}}
-      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new Date(2019, 2, 10), end: new Date(2019, 2, 15)}, minValue: new Date(2019, 1, 3), maxValue: new Date(2019, 1, 20)}}
+      ${'v3 Calendar'}        | ${Calendar}           | ${{defaultValue: new CalendarDate(2019, 3, 10), minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 2, 20)}}
+      ${'v3 RangeCalendar'}   | ${RangeCalendar}      | ${{defaultValue: {start: new CalendarDate(2019, 3, 10), end: new CalendarDate(2019, 3, 15)}, minValue: new CalendarDate(2019, 2, 3), maxValue: new CalendarDate(2019, 2, 20)}}
     `('$Name should disable both the next and previous buttons if outside valid date range', ({Calendar, props}) => {
       let {getByLabelText} = render(<Calendar {...props} />);
 
@@ -189,10 +162,8 @@ describe('CalendarBase', () => {
 
     it.each`
       Name                   | Calendar         | props
-      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new Date(2019, 5, 5)}}
-      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{defaultValue: new Date(2019, 5, 5)}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range', defaultValue: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new CalendarDate(2019, 6, 5)}}
+      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name should change the month when previous or next buttons are clicked', ({Calendar, props}) => {
       let {getByRole, getByLabelText, getAllByLabelText, getAllByRole} = render(<Calendar {...props} />);
 
@@ -230,10 +201,8 @@ describe('CalendarBase', () => {
   describe('labeling', () => {
     it.each`
       Name                   | Calendar         | props
-      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new Date(2019, 5, 5)}}}
-      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 5)}}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{defaultValue: new Date(2019, 5, 5)}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{defaultValue: new Date(2019, 5, 5), selectionType: 'range'}}
+      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new CalendarDate(2019, 6, 5)}}}
+      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 5)}}}
     `('$Name should be labeled by month heading by default', async ({Calendar, props}) => {
       let {getByRole} = render(<Calendar  {...props} />);
       let calendar = getByRole('group');
@@ -248,8 +217,6 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name should support labeling with aria-label', ({Calendar, props}) => {
       let {getByRole} = render(<Calendar {...props} aria-label="foo" />);
       let calendar = getByRole('group');
@@ -265,8 +232,6 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name should support labeling with aria-labelledby', ({Calendar, props}) => {
       let {getByRole} = render(<Calendar {...props} aria-labelledby="foo" />);
       let calendar = getByRole('group');
@@ -281,8 +246,6 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name should support labeling with aria-labelledby and aria-label', ({Calendar, props}) => {
       let {getByRole} = render(<Calendar {...props} aria-label="cal" aria-labelledby="foo" />);
       let calendar = getByRole('group');
@@ -298,8 +261,6 @@ describe('CalendarBase', () => {
       Name                   | Calendar         | props
       ${'v3 Calendar'}       | ${Calendar}      | ${{}}
       ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{}}
-      ${'v2 Calendar'}       | ${V2Calendar}    | ${{}}
-      ${'v2 range Calendar'} | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name should support labeling with a custom id', ({Calendar, props}) => {
       let {getByRole} = render(<Calendar {...props} id="hi" aria-label="cal" aria-labelledby="foo" />);
       let calendar = getByRole('group');
@@ -314,36 +275,24 @@ describe('CalendarBase', () => {
 
   describe('keyboard navigation', () => {
     async function testKeyboard(Calendar, defaultValue, key, value, month, props, opts) {
-      let isV2 = Calendar === V2Calendar;
-
       // For range calendars, convert the value to a range of one day
       if (Calendar === RangeCalendar) {
         defaultValue = {start: defaultValue, end: defaultValue};
-      } else if (isV2 && props && props.selectionType === 'range') {
-        defaultValue = [defaultValue, defaultValue];
       }
 
       let {getByRole, getAllByRole, getByLabelText, getAllByLabelText, unmount} = render(<Calendar defaultValue={defaultValue} autoFocus {...props} />);
       let grid = getAllByRole('grid')[0]; // get by role will see two, role=grid and implicit <table> which also has role=grid
 
       let cell = getAllByLabelText('selected', {exact: false}).filter(cell => cell.role !== 'grid')[0];
-      if (isV2) {
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      } else {
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-        expect(document.activeElement).toBe(cell);
-      }
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
+      expect(document.activeElement).toBe(cell);
 
       fireEvent.keyDown(document.activeElement, {key, keyCode: keyCodes[key], ...opts});
       fireEvent.keyUp(document.activeElement, {key, keyCode: keyCodes[key], ...opts});
 
       cell = getByLabelText(value, {exact: false});
-      if (isV2) {
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      } else {
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-        expect(document.activeElement).toBe(cell);
-      }
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
+      expect(document.activeElement).toBe(cell);
 
       let heading = getByRole('heading');
       expect(heading).toHaveTextContent(month);
@@ -360,85 +309,68 @@ describe('CalendarBase', () => {
       Name                    | Calendar          | props
       ${'v3 Calendar'}        | ${Calendar}       | ${{}}
       ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
-      ${'v2 Calendar'}        | ${V2Calendar}     | ${{}}
-      ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range'}}
     `('$Name should move the focused date by one day with the left/right arrows', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'ArrowLeft', 'Tuesday, June 4, 2019', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'ArrowRight', 'Thursday, June 6, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'ArrowLeft', 'Tuesday, June 4, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'ArrowRight', 'Thursday, June 6, 2019', 'June 2019', props);
 
-      await testKeyboard(Calendar, new Date(2019, 5, 1), 'ArrowLeft', 'Friday, May 31, 2019', 'May 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 30), 'ArrowRight', 'Monday, July 1, 2019', 'July 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 1), 'ArrowLeft', 'Friday, May 31, 2019', 'May 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 30), 'ArrowRight', 'Monday, July 1, 2019', 'July 2019', props);
     });
 
     it.each`
       Name                    | Calendar          | props
       ${'v3 Calendar'}        | ${Calendar}       | ${{}}
       ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
-      ${'v2 Calendar'}        | ${V2Calendar}     | ${{}}
-      ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range'}}
     `('$Name should move the focused date by one week with the up/down arrows', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 12), 'ArrowUp', 'Wednesday, June 5, 2019', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 12), 'ArrowDown', 'Wednesday, June 19, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 12), 'ArrowUp', 'Wednesday, June 5, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 12), 'ArrowDown', 'Wednesday, June 19, 2019', 'June 2019', props);
 
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'ArrowUp', 'Wednesday, May 29, 2019', 'May 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 26), 'ArrowDown', 'Wednesday, July 3, 2019', 'July 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'ArrowUp', 'Wednesday, May 29, 2019', 'May 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 26), 'ArrowDown', 'Wednesday, July 3, 2019', 'July 2019', props);
     });
 
     it.each`
       Name                    | Calendar          | props
       ${'v3 Calendar'}        | ${Calendar}       | ${{}}
       ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
-      ${'v2 Calendar'}        | ${V2Calendar}     | ${{}}
-      ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range'}}
     `('$Name should move the focused date to the start or end of the month with the home/end keys', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 12), 'Home', 'Saturday, June 1, 2019', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 12), 'End', 'Sunday, June 30, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 12), 'Home', 'Saturday, June 1, 2019', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 12), 'End', 'Sunday, June 30, 2019', 'June 2019', props);
     });
 
     it.each`
       Name                    | Calendar          | props
       ${'v3 Calendar'}        | ${Calendar}       | ${{}}
       ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
-      ${'v2 Calendar'}        | ${V2Calendar}     | ${{}}
-      ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range'}}
     `('$Name should move the focused date by one month with the page up/page down keys', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageUp', 'Sunday, May 5, 2019', 'May 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageDown', 'Friday, July 5, 2019', 'July 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageUp', 'Sunday, May 5, 2019', 'May 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageDown', 'Friday, July 5, 2019', 'July 2019', props);
     });
 
-    // v2 tests disabled until next release
-    // it.each`
-    //   Name                    | Calendar          | props
-    //   ${'v3 Calendar'}        | ${Calendar}       | ${{}}
-    //   ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
-    //   ${'v2 Calendar'}        | ${V2Calendar}     | ${{}}
-    //   ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range'}}
     it.each`
       Name                    | Calendar          | props
       ${'v3 Calendar'}        | ${Calendar}       | ${{}}
       ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{}}
     `('$Name should move the focused date by one year with the shift + page up/shift + page down keys', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageUp', 'Tuesday, June 5, 2018', 'June 2018', props, {shiftKey: true});
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageDown', 'Friday, June 5, 2020', 'June 2020', props, {shiftKey: true});
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageUp', 'Tuesday, June 5, 2018', 'June 2018', props, {shiftKey: true});
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageDown', 'Friday, June 5, 2020', 'June 2020', props, {shiftKey: true});
     });
 
     it.each`
       Name                    | Calendar          | props
-      ${'v3 Calendar'}        | ${Calendar}       | ${{minValue: new Date(2019, 5, 2), maxValue: new Date(2019, 5, 8)}}
-      ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{minValue: new Date(2019, 5, 2), maxValue: new Date(2019, 5, 8)}}
-      ${'v2 Calendar'}        | ${V2Calendar}     | ${{min: new Date(2019, 5, 5), max: new Date(2019, 5, 8)}}
-      ${'v2 range Calendar'}  | ${V2Calendar}     | ${{selectionType: 'range', min: new Date(2019, 5, 5), max: new Date(2019, 5, 8)}}
+      ${'v3 Calendar'}        | ${Calendar}       | ${{minValue: new CalendarDate(2019, 6, 2), maxValue: new CalendarDate(2019, 6, 8)}}
+      ${'v3 RangeCalendar'}   | ${RangeCalendar}  | ${{minValue: new CalendarDate(2019, 6, 2), maxValue: new CalendarDate(2019, 6, 8)}}
     `('$Name should not move the focused date outside the valid range', async ({Calendar, props}) => {
-      await testKeyboard(Calendar, new Date(2019, 5, 2), 'ArrowLeft', 'Sunday, June 2, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 8), 'ArrowRight', 'Saturday, June 8, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'ArrowUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'ArrowDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'Home', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'End', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props, {shiftKey: true});
-      await testKeyboard(Calendar, new Date(2019, 5, 5), 'PageDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props, {shiftKey: true});
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 2), 'ArrowLeft', 'Sunday, June 2, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 8), 'ArrowRight', 'Saturday, June 8, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'ArrowUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'ArrowDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'Home', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'End', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props);
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageUp', 'Wednesday, June 5, 2019 selected', 'June 2019', props, {shiftKey: true});
+      await testKeyboard(Calendar, new CalendarDate(2019, 6, 5), 'PageDown', 'Wednesday, June 5, 2019 selected', 'June 2019', props, {shiftKey: true});
     });
   });
 
@@ -470,8 +402,8 @@ describe('CalendarBase', () => {
 
     it.each`
       Name                   | Calendar         | props
-      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new Date(2019, 5, 5)}}
-      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
+      ${'v3 Calendar'}       | ${Calendar}      | ${{defaultValue: new CalendarDate(2019, 6, 5)}}
+      ${'v3 RangeCalendar'}  | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name should mirror arrow key movement in an RTL locale', ({Calendar, props}) => {
       // LTR
       let {getByRole, getAllByRole, rerender} = render(
diff --git a/packages/@react-spectrum/calendar/test/RangeCalendar.test.js b/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
index 5553a7f2069..62e547a8d91 100644
--- a/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
+++ b/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
@@ -12,12 +12,11 @@
 
 jest.mock('@react-aria/live-announcer');
 import {announce} from '@react-aria/live-announcer';
+import {CalendarDate} from '@internationalized/date';
 import {fireEvent, render} from '@testing-library/react';
 import {RangeCalendar} from '../';
 import React from 'react';
-import {startOfDay} from 'date-fns';
 import {triggerPress} from '@react-spectrum/test-utils';
-import V2Calendar from '@react/react-spectrum/Calendar';
 
 let cellFormatter = new Intl.DateTimeFormat('en-US', {weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'});
 let keyCodes = {'Enter': 13, ' ': 32, 'PageUp': 33, 'PageDown': 34, 'End': 35, 'Home': 36, 'ArrowLeft': 37, 'ArrowUp': 38, 'ArrowRight': 39, 'ArrowDown': 40, Escape: 27};
@@ -34,10 +33,8 @@ describe('RangeCalendar', () => {
   describe('basics', () => {
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', defaultValue: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name should render a calendar with a defaultValue', ({RangeCalendar, props}) => {
-      let isV2 = RangeCalendar === V2Calendar;
       let {getAllByLabelText, getByRole, getAllByRole} = render(<RangeCalendar {...props} />);
 
       let heading = getByRole('heading');
@@ -59,18 +56,16 @@ describe('RangeCalendar', () => {
 
       let i = 0;
       for (let cell of selectedDates) {
-        expect(isV2 ? cell : cell.parentElement).toHaveAttribute('role', 'gridcell');
-        expect(isV2 ? cell : cell.parentElement).toHaveAttribute('aria-selected', 'true');
+        expect(cell.parentElement).toHaveAttribute('role', 'gridcell');
+        expect(cell.parentElement).toHaveAttribute('aria-selected', 'true');
         expect(cell).toHaveAttribute('aria-label', labels[i++]);
       }
     });
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', value: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name should render a calendar with a value', ({RangeCalendar, props}) => {
-      let isV2 = RangeCalendar === V2Calendar;
       let {getAllByLabelText, getByRole, getAllByRole} = render(<RangeCalendar {...props} />);
 
       let heading = getByRole('heading');
@@ -92,38 +87,30 @@ describe('RangeCalendar', () => {
 
       let i = 0;
       for (let cell of selectedDates) {
-        expect(isV2 ? cell : cell.parentElement).toHaveAttribute('role', 'gridcell');
-        expect(isV2 ? cell : cell.parentElement).toHaveAttribute('aria-selected', 'true');
+        expect(cell.parentElement).toHaveAttribute('role', 'gridcell');
+        expect(cell.parentElement).toHaveAttribute('aria-selected', 'true');
         expect(cell).toHaveAttribute('aria-label', labels[i++]);
       }
     });
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new Date(2019, 1, 3), end: new Date(2019, 1, 18)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', value: [new Date(2019, 1, 3), new Date(2019, 1, 18)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2019, 2, 18)}}}
     `('$Name should focus the first selected date if autoFocus is set', ({RangeCalendar, props}) => {
       let {getByRole, getAllByLabelText} = render(<RangeCalendar {...props} autoFocus />);
 
       let cells = getAllByLabelText('selected', {exact: false});
       let grid = getByRole('grid');
 
-      if (RangeCalendar === V2Calendar) {
-        expect(cells[0]).toHaveAttribute('role', 'gridcell');
-        expect(cells[0]).toHaveAttribute('aria-selected', 'true');
-        expect(grid).toHaveFocus();
-        expect(grid).toHaveAttribute('aria-activedescendant', cells[0].id);
-      } else {
-        expect(cells[0].parentElement).toHaveAttribute('role', 'gridcell');
-        expect(cells[0].parentElement).toHaveAttribute('aria-selected', 'true');
-        expect(cells[0]).toHaveFocus();
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-      }
+      expect(cells[0].parentElement).toHaveAttribute('role', 'gridcell');
+      expect(cells[0].parentElement).toHaveAttribute('aria-selected', 'true');
+      expect(cells[0]).toHaveFocus();
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
     });
 
     // v2 doesn't pass this test - it starts by showing the end date instead of the start date.
     it('should show selected dates across multiple months', () => {
-      let {getByRole, getByLabelText, getAllByLabelText, getAllByRole} = render(<RangeCalendar value={{start: new Date(2019, 5, 20), end: new Date(2019, 6, 10)}} />);
+      let {getByRole, getByLabelText, getAllByLabelText, getAllByRole} = render(<RangeCalendar value={{start: new CalendarDate(2019, 6, 20), end: new CalendarDate(2019, 7, 10)}} />);
 
       let heading = getByRole('heading');
       expect(heading).toHaveTextContent('June 2019');
@@ -206,35 +193,24 @@ describe('RangeCalendar', () => {
     it.each`
       Name          | RangeCalendar    | props
       ${'v3'}       | ${RangeCalendar} | ${{}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range'}}
     `('$Name adds a range selection prompt to the focused cell', ({RangeCalendar, props}) => {
-      const isV2 = RangeCalendar === V2Calendar;
       let {getByRole, getByLabelText} = render(<RangeCalendar {...props} autoFocus />);
 
       let grid = getByRole('grid');
       let cell = getByLabelText('today', {exact: false});
-      if (isV2) {
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      } else {
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-      }
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
       expect(cell).toHaveAttribute('aria-label', `Today, ${cellFormatter.format(new Date())} (Click to start selecting date range)`);
 
       // enter selection mode
       fireEvent.keyDown(grid, {key: 'Enter', keyCode: keyCodes.Enter});
-      if (isV2) {
-        expect(grid).toHaveAttribute('aria-activedescendant', cell.id);
-      } else {
-        expect(grid).not.toHaveAttribute('aria-activedescendant');
-      }
-      expect(isV2 ? cell : cell.parentElement).toHaveAttribute('aria-selected');
+      expect(grid).not.toHaveAttribute('aria-activedescendant');
+      expect(cell.parentElement).toHaveAttribute('aria-selected');
       expect(cell).toHaveAttribute('aria-label', `Today, ${cellFormatter.format(new Date())} selected (Click to finish selecting date range)`);
     });
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', defaultValue: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name can select a range with the keyboard (uncontrolled)', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByRole} = render(
@@ -273,22 +249,14 @@ describe('RangeCalendar', () => {
       expect(selectedDates[selectedDates.length - 1].textContent).toBe('8');
       expect(onChange).toHaveBeenCalledTimes(1);
 
-      let value = onChange.mock.calls[0][0];
-      let start, end;
-      if (Array.isArray(value)) { // v2
-        [start, end] = value;
-      } else { // v3
-        ({start, end} = value);
-      }
-
-      expect(start.valueOf()).toBe(new Date(2019, 5, 4).valueOf()); // v2 returns a moment object
-      expect(startOfDay(end).valueOf()).toBe(new Date(2019, 5, 8).valueOf()); // v2 returns a moment object
+      let {start, end} = onChange.mock.calls[0][0];
+      expect(start).toEqual(new CalendarDate(2019, 6, 4));
+      expect(end).toEqual(new CalendarDate(2019, 6, 8));
     });
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', value: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name can select a range with the keyboard (controlled)', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByRole} = render(
@@ -327,19 +295,11 @@ describe('RangeCalendar', () => {
       expect(selectedDates[selectedDates.length - 1].textContent).toBe('10');
       expect(onChange).toHaveBeenCalledTimes(1);
 
-      let value = onChange.mock.calls[0][0];
-      let start, end;
-      if (Array.isArray(value)) { // v2
-        [start, end] = value;
-      } else { // v3
-        ({start, end} = value);
-      }
-
-      expect(start.valueOf()).toBe(new Date(2019, 5, 4).valueOf()); // v2 returns a moment object
-      expect(startOfDay(end).valueOf()).toBe(new Date(2019, 5, 8).valueOf()); // v2 returns a moment object
+      let {start, end} = onChange.mock.calls[0][0];
+      expect(start).toEqual(new CalendarDate(2019, 6, 4));
+      expect(end).toEqual(new CalendarDate(2019, 6, 8));
     });
 
-    // v2 does not pass this test.
     it('does not enter selection mode with the keyboard if isReadOnly', () => {
       let {getByRole, getByLabelText} = render(<RangeCalendar isReadOnly autoFocus />);
 
@@ -359,8 +319,7 @@ describe('RangeCalendar', () => {
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', defaultValue: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name selects a range with the mouse (uncontrolled)', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByText} = render(
@@ -391,22 +350,14 @@ describe('RangeCalendar', () => {
       expect(selectedDates[selectedDates.length - 1].textContent).toBe('17');
       expect(onChange).toHaveBeenCalledTimes(1);
 
-      let value = onChange.mock.calls[0][0];
-      let start, end;
-      if (Array.isArray(value)) { // v2
-        [start, end] = value;
-      } else { // v3
-        ({start, end} = value);
-      }
-
-      expect(start.valueOf()).toBe(new Date(2019, 5, 7).valueOf()); // v2 returns a moment object
-      expect(startOfDay(end).valueOf()).toBe(new Date(2019, 5, 17).valueOf()); // v2 returns a moment object
+      let {start, end} = onChange.mock.calls[0][0];
+      expect(start).toEqual(new CalendarDate(2019, 6, 7));
+      expect(end).toEqual(new CalendarDate(2019, 6, 17));
     });
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', value: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name selects a range with the mouse (controlled)', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByText} = render(
@@ -437,19 +388,11 @@ describe('RangeCalendar', () => {
       expect(selectedDates[selectedDates.length - 1].textContent).toBe('10');
       expect(onChange).toHaveBeenCalledTimes(1);
 
-      let value = onChange.mock.calls[0][0];
-      let start, end;
-      if (Array.isArray(value)) { // v2
-        [start, end] = value;
-      } else { // v3
-        ({start, end} = value);
-      }
-
-      expect(start.valueOf()).toBe(new Date(2019, 5, 7).valueOf()); // v2 returns a moment object
-      expect(startOfDay(end).valueOf()).toBe(new Date(2019, 5, 17).valueOf()); // v2 returns a moment object
+      let {start, end} = onChange.mock.calls[0][0];
+      expect(start).toEqual(new CalendarDate(2019, 6, 7));
+      expect(end).toEqual(new CalendarDate(2019, 6, 17));
     });
 
-    // v2 does not pass this test.
     it('does not enter selection mode with the mouse if isReadOnly', () => {
       let {getByRole, getByLabelText, getByText} = render(<RangeCalendar isReadOnly autoFocus />);
 
@@ -469,7 +412,6 @@ describe('RangeCalendar', () => {
     it.each`
       Name          | RangeCalendar    | props
       ${'v3'}       | ${RangeCalendar} | ${{isDisabled: true}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', disabled: true}}
     `('$Name does not select a date on click if isDisabled', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByText} = render(
@@ -489,8 +431,7 @@ describe('RangeCalendar', () => {
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new Date(2019, 1, 8), end: new Date(2019, 1, 15)}, minValue: new Date(2019, 1, 5), maxValue: new Date(2019, 1, 15)}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', defaultValue: [new Date(2019, 1, 8), new Date(2019, 1, 15)], min: new Date(2019, 1, 5), max: new Date(2019, 1, 15)}}
+      ${'v3'}       | ${RangeCalendar} | ${{defaultValue: {start: new CalendarDate(2019, 2, 8), end: new CalendarDate(2019, 2, 15)}, minValue: new CalendarDate(2019, 2, 5), maxValue: new CalendarDate(2019, 2, 15)}}
     `('$Name does not select a date on click if outside the valid date range', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getByLabelText, getAllByLabelText} = render(
@@ -530,8 +471,7 @@ describe('RangeCalendar', () => {
 
     it.each`
       Name          | RangeCalendar    | props
-      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}}}
-      ${'v2'}       | ${V2Calendar}    | ${{selectionType: 'range', value: [new Date(2019, 5, 5), new Date(2019, 5, 10)]}}
+      ${'v3'}       | ${RangeCalendar} | ${{value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}}
     `('$Name cancels the selection when the escape key is pressed', ({RangeCalendar, props}) => {
       let onChange = jest.fn();
       let {getByText, getAllByLabelText} = render(
@@ -570,7 +510,7 @@ describe('RangeCalendar', () => {
   // These tests only work against v3
   describe('announcing', () => {
     it('announces when the current month changes', () => {
-      let {getByLabelText} = render(<RangeCalendar defaultValue={{start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}} />);
+      let {getByLabelText} = render(<RangeCalendar defaultValue={{start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}} />);
 
       let nextButton = getByLabelText('Next');
       triggerPress(nextButton);
@@ -580,7 +520,7 @@ describe('RangeCalendar', () => {
     });
 
     it('announces when the selected date range changes', () => {
-      let {getByText} = render(<RangeCalendar defaultValue={{start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}} />);
+      let {getByText} = render(<RangeCalendar defaultValue={{start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}} />);
 
       triggerPress(getByText('17'));
       triggerPress(getByText('10'));
@@ -590,7 +530,7 @@ describe('RangeCalendar', () => {
     });
 
     it('ensures that the active descendant is announced when the focused date changes', () => {
-      let {getByRole, getAllByLabelText} = render(<RangeCalendar defaultValue={{start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}} autoFocus />);
+      let {getByRole, getAllByLabelText} = render(<RangeCalendar defaultValue={{start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}} autoFocus />);
 
       let grid = getByRole('grid');
 
@@ -603,7 +543,7 @@ describe('RangeCalendar', () => {
     });
 
     it('renders a caption with the selected date range', () => {
-      let {getByText, getByRole} = render(<RangeCalendar defaultValue={{start: new Date(2019, 5, 5), end: new Date(2019, 5, 10)}} />);
+      let {getByText, getByRole} = render(<RangeCalendar defaultValue={{start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}} />);
 
       let grid = getByRole('grid');
       let caption = document.getElementById(grid.getAttribute('aria-describedby'));
diff --git a/packages/@react-spectrum/datepicker/package.json b/packages/@react-spectrum/datepicker/package.json
index a9e28192221..1c153913a26 100644
--- a/packages/@react-spectrum/datepicker/package.json
+++ b/packages/@react-spectrum/datepicker/package.json
@@ -44,6 +44,7 @@
     "@react-spectrum/calendar": "3.0.0-alpha.1",
     "@react-spectrum/dialog": "^3.1.0",
     "@react-spectrum/label": "^3.3.4",
+    "@react-spectrum/layout": "^3.2.1",
     "@react-spectrum/utils": "^3.1.0",
     "@react-spectrum/view": "^3.1.1",
     "@react-stately/datepicker": "3.0.0-alpha.1",
diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx
new file mode 100644
index 00000000000..9aca860eab3
--- /dev/null
+++ b/packages/@react-spectrum/datepicker/src/DateField.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DatePickerField} from './DatePickerField';
+import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';
+import {FocusScope} from '@react-aria/focus';
+import React from 'react';
+import {useProviderProps} from '@react-spectrum/provider';
+
+export function DateField<T extends DateValue>(props: SpectrumDatePickerProps<T>) {
+  props = useProviderProps(props);
+  let {
+    autoFocus
+  } = props;
+
+  return (
+    <FocusScope autoFocus={autoFocus}>
+      <DatePickerField {...props} />
+    </FocusScope>
+  );
+}
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index ef2f7af3791..ece6d9fd703 100644
--- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
@@ -16,23 +16,23 @@ import {classNames} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
 import {DatePickerField} from './DatePickerField';
 import datepickerStyles from './index.css';
+import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Field} from '@react-spectrum/label';
 import {FieldButton} from '@react-spectrum/button';
 import {FocusScope, useFocusRing} from '@react-aria/focus';
-import {fromDateToLocal, getLocalTimeZone, toCalendarDate} from '@internationalized/date';
 import {mergeProps} from '@react-aria/utils';
 import React, {useRef} from 'react';
-import {SpectrumDatePickerProps} from '@react-types/datepicker';
 import '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
+import {TimeField} from './TimeField';
 import {useDatePicker} from '@react-aria/datepicker';
 import {useDatePickerState} from '@react-stately/datepicker';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export function DatePicker(props: SpectrumDatePickerProps) {
+export function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>) {
   props = useProviderProps(props);
   let {
     autoFocus,
@@ -47,7 +47,7 @@ export function DatePicker(props: SpectrumDatePickerProps) {
   let targetRef = useRef<HTMLDivElement>();
   let state = useDatePickerState(props);
   let {groupProps, labelProps, fieldProps, buttonProps, dialogProps} = useDatePicker(props, state, targetRef);
-  let {value, setValue, selectDate, isOpen, setOpen} = state;
+  let {value, setValue, isOpen, setOpen} = state;
   let {direction} = useLocale();
 
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({
@@ -88,6 +88,14 @@ export function DatePicker(props: SpectrumDatePickerProps) {
   //   return s.type;
   // }).join(' ') : '';
 
+  let v = state.value || props.placeholderValue;
+  let placeholder: DateValue = placeholderValue;
+  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
+  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
+  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
+  let timeGranularity = props.granularity === 'hour' || props.granularity === 'minute' || props.granularity === 'second' || props.granularity === 'millisecond' ? props.granularity : null;
+  let showTimeField = (v && 'hour' in v) || !!timeGranularity;
+
   return (
     <Field {...props} labelProps={labelProps}>
       <div
@@ -132,9 +140,20 @@ export function DatePicker(props: SpectrumDatePickerProps) {
             <Content>
               <Calendar
                 autoFocus
-                value={state.value ? state.value.toDate(getLocalTimeZone()) : null}
-                // @ts-ignore
-                onChange={date => selectDate(toCalendarDate(fromDateToLocal(date)))} />
+                value={state.dateValue}
+                onChange={state.setDateValue} />
+              {showTimeField &&
+                <TimeField
+                  label="Time"
+                  value={state.timeValue}
+                  onChange={state.setTimeValue}
+                  placeholderValue={timePlaceholder}
+                  granularity={timeGranularity}
+                  minValue={timeMinValue}
+                  maxValue={timeMaxValue}
+                  hourCycle={props.hourCycle}
+                  hideTimeZone={props.hideTimeZone} />
+              }
             </Content>
           </Dialog>
         </DialogTrigger>
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
index 0dd8fcd97af..ec866cafcab 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
@@ -16,21 +16,22 @@ import {classNames} from '@react-spectrum/utils';
 import {createCalendar} from '@internationalized/date';
 import {DatePickerSegment} from './DatePickerSegment';
 import datepickerStyles from './index.css';
+import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';
 import {Field} from '@react-spectrum/label';
 import {FocusRing} from '@react-aria/focus';
 import React, {useRef} from 'react';
-import {SpectrumDatePickerProps} from '@react-types/datepicker';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useDateField} from '@react-aria/datepicker';
 import {useDatePickerFieldState} from '@react-stately/datepicker';
+import {useLocale} from '@react-aria/i18n';
 
-interface DatePickerFieldProps extends SpectrumDatePickerProps {
+interface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerProps<T> {
   inputClassName?: string,
   hideValidationIcon?: boolean,
-  maxGranularity?: SpectrumDatePickerProps['granularity']
+  maxGranularity?: SpectrumDatePickerProps<T>['granularity']
 }
 
-export function DatePickerField(props: DatePickerFieldProps) {
+export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>) {
   let {
     isDisabled,
     isReadOnly,
@@ -40,8 +41,10 @@ export function DatePickerField(props: DatePickerFieldProps) {
     hideValidationIcon
   } = props;
   let ref = useRef();
+  let {locale} = useLocale();
   let state = useDatePickerFieldState({
     ...props,
+    locale,
     createCalendar
   });
 
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
index d1ef4fd293f..d59bf39812d 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {DatePickerBase} from '@react-types/datepicker';
+import {DatePickerBase, DateValue} from '@react-types/datepicker';
 import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
 import {NumberParser} from '@internationalized/number';
 import React, {useMemo, useRef} from 'react';
@@ -21,7 +21,7 @@ import {useFocusManager} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 
-interface DatePickerSegmentProps extends DatePickerBase {
+interface DatePickerSegmentProps extends DatePickerBase<DateValue> {
   segment: DateSegment,
   state: DatePickerFieldState
 }
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index 830c47cae94..05040729c02 100644
--- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
@@ -15,24 +15,24 @@ import {classNames, useStyleProps} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
 import {DatePickerField} from './DatePickerField';
 import datepickerStyles from './index.css';
-import {DateRange, SpectrumDateRangePickerProps} from '@react-types/datepicker';
+import {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Field} from '@react-spectrum/label';
 import {FieldButton} from '@react-spectrum/button';
+import {Flex} from '@react-spectrum/layout';
 import {FocusScope, useFocusManager, useFocusRing} from '@react-aria/focus';
-import {fromDateToLocal, getLocalTimeZone, toCalendarDate} from '@internationalized/date';
 import {mergeProps} from '@react-aria/utils';
 import {RangeCalendar} from '@react-spectrum/calendar';
-import {RangeValue} from '@react-types/shared';
 import React, {useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
+import {TimeField} from './TimeField';
 import {useDateRangePicker} from '@react-aria/datepicker';
 import {useDateRangePickerState} from '@react-stately/datepicker';
 import {useHover, usePress} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export function DateRangePicker(props: SpectrumDateRangePickerProps) {
+export function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>) {
   props = useProviderProps(props);
   let {
     isQuiet,
@@ -48,7 +48,7 @@ export function DateRangePicker(props: SpectrumDateRangePickerProps) {
   let targetRef = useRef<HTMLDivElement>();
   let state = useDateRangePickerState(props);
   let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps} = useDateRangePicker(props, state, targetRef);
-  let {value, setDate, selectDateRange, isOpen, setOpen} = state;
+  let {value, isOpen, setOpen} = state;
   let {direction} = useLocale();
 
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({
@@ -82,6 +82,14 @@ export function DateRangePicker(props: SpectrumDateRangePickerProps) {
     }
   );
 
+  let v = state.value?.start || props.placeholderValue;
+  let placeholder: DateValue = placeholderValue;
+  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
+  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
+  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
+  let timeGranularity = props.granularity === 'hour' || props.granularity === 'minute' || props.granularity === 'second' || props.granularity === 'millisecond' ? props.granularity : null;
+  let showTimeField = (v && 'hour' in v) || !!timeGranularity;
+
   return (
     <Field width="auto" {...props} labelProps={labelProps}>
       <div
@@ -101,7 +109,7 @@ export function DateRangePicker(props: SpectrumDateRangePickerProps) {
             placeholderValue={placeholderValue}
             value={value.start}
             defaultValue={null}
-            onChange={start => setDate('start', start)}
+            onChange={start => state.setValue({...value, start})}
             granularity={props.granularity}
             hourCycle={props.hourCycle}
             UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')}
@@ -117,7 +125,7 @@ export function DateRangePicker(props: SpectrumDateRangePickerProps) {
             placeholderValue={placeholderValue}
             value={value.end}
             defaultValue={null}
-            onChange={end => setDate('end', end)}
+            onChange={end => state.setValue({...value, end})}
             granularity={props.granularity}
             hourCycle={props.hourCycle}
             UNSAFE_className={classNames(
@@ -150,9 +158,32 @@ export function DateRangePicker(props: SpectrumDateRangePickerProps) {
             <Content>
               <RangeCalendar
                 autoFocus
-                value={rangeToCalendarRage(value)}
-                // @ts-ignore
-                onChange={range => selectDateRange(calendarRangeToRange(range))} />
+                value={state.dateRange}
+                onChange={state.setDateRange} />
+              {showTimeField &&
+                <Flex gap="size-100">
+                  <TimeField
+                    label="Start time"
+                    value={state.timeRange?.start || null}
+                    onChange={v => state.setTime('start', v)}
+                    placeholderValue={timePlaceholder}
+                    granularity={timeGranularity}
+                    minValue={timeMinValue}
+                    maxValue={timeMaxValue}
+                    hourCycle={props.hourCycle}
+                    hideTimeZone={props.hideTimeZone} />
+                  <TimeField
+                    label="End time"
+                    value={state.timeRange?.end || null}
+                    onChange={v => state.setTime('end', v)}
+                    placeholderValue={timePlaceholder}
+                    granularity={timeGranularity}
+                    minValue={timeMinValue}
+                    maxValue={timeMaxValue}
+                    hourCycle={props.hourCycle}
+                    hideTimeZone={props.hideTimeZone} />
+                </Flex>
+              }
             </Content>
           </Dialog>
         </DialogTrigger>
@@ -179,22 +210,3 @@ function DateRangeDash() {
       {...pressProps} />
   );
 }
-
-// TODO: remove once calendar API is converted over...
-function rangeToCalendarRage(range: DateRange) {
-  return {
-    start: range.start?.toDate(getLocalTimeZone()),
-    end: range.end?.toDate(getLocalTimeZone())
-  };
-}
-
-function calendarRangeToRange(range: RangeValue<Date>) {
-  if (!range) {
-    return null;
-  }
-
-  return {
-    start: toCalendarDate(fromDateToLocal(range.start)),
-    end: toCalendarDate(fromDateToLocal(range.end))
-  };
-}
diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx
index 9430986e8b3..3a3b32beace 100644
--- a/packages/@react-spectrum/datepicker/src/TimeField.tsx
+++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx
@@ -10,15 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, toTime, ZonedDateTime} from '@internationalized/date';
 import {DatePickerField} from './DatePickerField';
+import {DateValue, SpectrumTimePickerProps, TimeValue} from '@react-types/datepicker';
 import {FocusScope} from '@react-aria/focus';
+import {getLocalTimeZone, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
 import React, {useMemo} from 'react';
-import {SpectrumTimePickerProps} from '@react-types/datepicker';
 import {useControlledState} from '@react-stately/utils';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export function TimeField(props: SpectrumTimePickerProps) {
+export function TimeField<T extends TimeValue>(props: SpectrumTimePickerProps<T>) {
   props = useProviderProps(props);
   let {
     autoFocus,
@@ -27,7 +27,7 @@ export function TimeField(props: SpectrumTimePickerProps) {
     maxValue
   } = props;
 
-  let [value, setValue] = useControlledState(
+  let [value, setValue] = useControlledState<TimeValue>(
     props.value,
     props.defaultValue,
     props.onChange
@@ -60,7 +60,7 @@ export function TimeField(props: SpectrumTimePickerProps) {
   );
 }
 
-function convertValue(value: Time | CalendarDateTime | ZonedDateTime, date = today(getLocalTimeZone())) {
+function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
   if (!value) {
     return null;
   }
diff --git a/packages/@react-spectrum/datepicker/src/index.ts b/packages/@react-spectrum/datepicker/src/index.ts
index 0e36d5ec88f..55bdd660e05 100644
--- a/packages/@react-spectrum/datepicker/src/index.ts
+++ b/packages/@react-spectrum/datepicker/src/index.ts
@@ -15,3 +15,4 @@
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './TimeField';
+export * from './DateField';
diff --git a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
new file mode 100644
index 00000000000..bc3a52c80e7
--- /dev/null
+++ b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
@@ -0,0 +1,253 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {CalendarDate, CalendarDateTime, parseAbsolute, parseAbsoluteToLocal, parseDate, parseDateTime, parseZonedDateTime, toZoned} from '@internationalized/date';
+import {DateField} from '../';
+import {Flex} from '@react-spectrum/layout';
+import {Item, Picker, Section} from '@react-spectrum/picker';
+import {Provider} from '@react-spectrum/provider';
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useLocale} from '@react-aria/i18n';
+
+const BlockDecorator = storyFn => <div>{storyFn()}</div>;
+
+storiesOf('Date and Time/DateField', module)
+  .addDecorator(BlockDecorator)
+  .add(
+    'default',
+    () => render()
+  )
+  .add(
+    'defaultValue',
+    () => render({defaultValue: parseDate('2020-02-03')})
+  )
+  .add(
+    'controlled value',
+    () => render({value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'defaultValue, zoned',
+    () => render({defaultValue: toZoned(parseDate('2020-02-03'), 'America/Los_Angeles')})
+  )
+  .add(
+    'granularity: minute',
+    () => render({granularity: 'minute'})
+  )
+  .add(
+    'granularity: second',
+    () => render({granularity: 'second'})
+  )
+  .add(
+    'hourCycle: 12',
+    () => render({granularity: 'minute', hourCycle: 12})
+  )
+  .add(
+    'hourCycle: 24',
+    () => render({granularity: 'minute', hourCycle: 24})
+  )
+  .add(
+    'granularity: minute, defaultValue',
+    () => render({granularity: 'minute', defaultValue: parseDateTime('2021-03-14T08:45')})
+  )
+  .add(
+    'granularity: minute, defaultValue, zoned',
+    () => render({granularity: 'minute', defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')})
+  )
+  .add('granularity: minute, defaultValue, zoned, absolute',
+    () => render({granularity: 'minute', defaultValue: parseAbsoluteToLocal('2021-11-07T07:45:00Z')})
+  )
+  .add('granularity: minute, defaultValue, zoned, absolute, timeZone',
+    () => render({granularity: 'minute', defaultValue: parseAbsolute('2021-11-07T07:45:00Z', 'America/New_York')})
+  )
+  .add(
+    'defaultValue with time, granularity: day',
+    () => render({granularity: 'day', defaultValue: parseDateTime('2021-03-14T08:45')})
+  )
+  .add(
+    'hideTimeZone',
+    () => render({granularity: 'minute', defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true})
+  )
+  .add(
+    'isDisabled',
+    () => render({isDisabled: true, value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'isQuiet, isDisabled',
+    () => render({isQuiet: true, isDisabled: true, value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'isReadOnly',
+    () => render({isReadOnly: true, value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'autoFocus',
+    () => render({autoFocus: true})
+  )
+  .add(
+    'validationState: invalid',
+    () => render({validationState: 'invalid', value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'validationState: valid',
+    () => render({validationState: 'valid', value: new CalendarDate(2020, 2, 3)})
+  )
+  .add(
+    'minValue: 2010/1/1, maxValue: 2020/1/1',
+    () => render({minValue: new CalendarDate(2010, 0, 1), maxValue: new CalendarDate(2020, 0, 1)})
+  )
+  .add(
+    'placeholderValue: 1980/1/1',
+    () => render({placeholderValue: new CalendarDate(1980, 1, 1)})
+  )
+  .add(
+    'placeholderValue: 1980/1/1 8 AM',
+    () => render({placeholderValue: new CalendarDateTime(1980, 1, 1, 8)})
+  )
+  .add(
+    'placeholderValue: 1980/1/1, zoned',
+    () => render({placeholderValue: toZoned(new CalendarDate(1980, 1, 1), 'America/Los_Angeles')})
+  );
+
+storiesOf('Date and Time/DateField/styling', module)
+  .addDecorator(BlockDecorator)
+  .add(
+    'isQuiet',
+    () => render({isQuiet: true})
+  )
+  .add(
+    'labelPosition: side',
+    () => render({labelPosition: 'side'})
+  )
+  .add(
+    'labelAlign: end',
+    () => render({labelPosition: 'top', labelAlign: 'end'})
+  )
+  .add(
+    'required',
+    () => render({isRequired: true})
+  )
+  .add(
+    'required with label',
+    () => render({isRequired: true, necessityIndicator: 'label'})
+  )
+  .add(
+    'optional',
+    () => render({necessityIndicator: 'label'})
+  )
+  .add(
+    'no visible label',
+    () => render({'aria-label': 'Date', label: null})
+  )
+  .add(
+    'quiet no visible label',
+    () => render({isQuiet: true, 'aria-label': 'Date', label: null})
+  )
+  .add(
+    'custom width',
+    () => render({width: 'size-3000'})
+  )
+  .add(
+    'quiet custom width',
+    () => render({isQuiet: true, width: 'size-3000'})
+  )
+  .add(
+    'custom width no visible label',
+    () => render({width: 'size-3000', label: null, 'aria-label': 'Date'})
+  )
+  .add(
+    'custom width, labelPosition=side',
+    () => render({width: 'size-3000', labelPosition: 'side'})
+  );
+
+function render(props = {}) {
+  return (
+    <Example
+      label="Date"
+      onChange={action('change')}
+      {...props} />
+  );
+}
+
+// https://github.com/unicode-org/cldr/blob/22af90ae3bb04263f651323ce3d9a71747a75ffb/common/supplemental/supplementalData.xml#L4649-L4664
+const preferences = [
+  {locale: '', label: 'Default', ordering: 'gregory'},
+  {label: 'Arabic (Algeria)', locale: 'ar-DZ', territories: 'DJ DZ EH ER IQ JO KM LB LY MA MR OM PS SD SY TD TN YE', ordering: 'gregory islamic islamic-civil islamic-tbla'},
+  {label: 'Arabic (United Arab Emirates)', locale: 'ar-AE', territories: 'AE BH KW QA', ordering: 'gregory islamic-umalqura islamic islamic-civil islamic-tbla'},
+  {label: 'Arabic (Egypt)', locale: 'AR-EG', territories: 'EG', ordering: 'gregory coptic islamic islamic-civil islamic-tbla'},
+  {label: 'Arabic (Saudi Arabia)', locale: 'ar-SA', territories: 'SA', ordering: 'islamic-umalqura gregory islamic islamic-rgsa'},
+  {label: 'Farsi (Afghanistan)', locale: 'fa-AF', territories: 'AF IR', ordering: 'persian gregory islamic islamic-civil islamic-tbla'},
+  // {territories: 'CN CX HK MO SG', ordering: 'gregory chinese'},
+  {label: 'Amharic (Ethiopia)', locale: 'am-ET', territories: 'ET', ordering: 'gregory ethiopic ethioaa'},
+  {label: 'Hebrew (Israel)', locale: 'he-IL', territories: 'IL', ordering: 'gregory hebrew islamic islamic-civil islamic-tbla'},
+  {label: 'Hindi (India)', locale: 'hi-IN', territories: 'IN', ordering: 'gregory indian'},
+  // {label: 'Marathi (India)', locale: 'mr-IN', territories: 'IN', ordering: 'gregory indian'},
+  {label: 'Bengali (India)', locale: 'bn-IN', territories: 'IN', ordering: 'gregory indian'},
+  {label: 'Japanese (Japan)', locale: 'ja-JP', territories: 'JP', ordering: 'gregory japanese'},
+  // {territories: 'KR', ordering: 'gregory dangi'},
+  {label: 'Thai (Thailand)', locale: 'th-TH', territories: 'TH', ordering: 'buddhist gregory'},
+  {label: 'Chinese (Taiwan)', locale: 'zh-TW', territories: 'TW', ordering: 'gregory roc chinese'}
+];
+
+const calendars = [
+  {key: 'gregory', name: 'Gregorian'},
+  {key: 'japanese', name: 'Japanese'},
+  {key: 'buddhist', name: 'Buddhist'},
+  {key: 'roc', name: 'Taiwan'},
+  {key: 'persian', name: 'Persian'},
+  {key: 'indian', name: 'Indian'},
+  {key: 'islamic-umalqura', name: 'Islamic (Umm al-Qura)'},
+  {key: 'islamic-civil', name: 'Islamic Civil'},
+  {key: 'islamic-tbla', name: 'Islamic Tabular'},
+  {key: 'hebrew', name: 'Hebrew'},
+  {key: 'coptic', name: 'Coptic'},
+  {key: 'ethiopic', name: 'Ethiopic'},
+  {key: 'ethioaa', name: 'Ethiopic (Amete Alem)'}
+];
+
+function Example(props) {
+  let [locale, setLocale] = React.useState('');
+  let [calendar, setCalendar] = React.useState<React.Key>(calendars[0].key);
+  let {locale: defaultLocale} = useLocale();
+
+  let pref = preferences.find(p => p.locale === locale);
+  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
+  let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p.key === c.key)), [preferredCalendars]);
+
+  let updateLocale = locale => {
+    setLocale(locale);
+    let pref = preferences.find(p => p.locale === locale);
+    setCalendar(pref.ordering.split(' ')[0]);
+  };
+
+  return (
+    <Flex direction="column" gap="size-600" alignItems="center">
+      <Flex direction="row" gap="size-150" wrap justifyContent="center">
+        <Picker label="Locale" items={preferences} selectedKey={locale} onSelectionChange={updateLocale}>
+          {item => <Item key={item.locale}>{item.label}</Item>}
+        </Picker>
+        <Picker label="Calendar" selectedKey={calendar} onSelectionChange={setCalendar}>
+          <Section title="Preferred" items={preferredCalendars}>
+            {item => <Item>{item.name}</Item>}
+          </Section>
+          <Section title="Other" items={otherCalendars}>
+            {item => <Item>{item.name}</Item>}
+          </Section>
+        </Picker>
+      </Flex>
+      <Provider locale={(locale || defaultLocale) + (calendar && calendar !== preferredCalendars[0].key ? '-u-ca-' + calendar : '')}>
+        <DateField {...props} />
+      </Provider>
+    </Flex>
+  );
+}
diff --git a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
index e2135d29d04..4ba179dea16 100644
--- a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
@@ -40,10 +40,6 @@ storiesOf('Date and Time/DatePicker', module)
     'defaultValue, zoned',
     () => render({defaultValue: toZoned(parseDate('2020-02-03'), 'America/Los_Angeles')})
   )
-  .add(
-    'granularity: month',
-    () => render({granularity: 'month'})
-  )
   .add(
     'granularity: minute',
     () => render({granularity: 'minute'})
@@ -74,6 +70,10 @@ storiesOf('Date and Time/DatePicker', module)
   .add('granularity: minute, defaultValue, zoned, absolute, timeZone',
     () => render({granularity: 'minute', defaultValue: parseAbsolute('2021-11-07T07:45:00Z', 'America/New_York')})
   )
+  .add(
+    'defaultValue with time, granularity: day',
+    () => render({granularity: 'day', defaultValue: parseDateTime('2021-03-14T08:45')})
+  )
   .add(
     'hideTimeZone',
     () => render({granularity: 'minute', defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true})
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
index 2389d23c3ac..c95ee5e1dfc 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
@@ -40,6 +40,10 @@ storiesOf('Date and Time/DateRangePicker', module)
     'granularity: minute',
     () => render({granularity: 'minute'})
   )
+  .add(
+    'granularity: second',
+    () => render({granularity: 'second'})
+  )
   .add(
     'hourCycle: 12',
     () => render({granularity: 'minute', hourCycle: 12})
diff --git a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
index b5d64ccb4de..c0833d94e39 100644
--- a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
@@ -38,11 +38,19 @@ storiesOf('Date and Time/TimeField', module)
   )
   .add(
     'hourCycle: 12',
-    () => render({hourCycle: 12})
+    () => render({hourCycle: 12, defaultValue: parseTime('00:00')})
   )
   .add(
     'hourCycle: 24',
-    () => render({hourCycle: 24})
+    () => render({hourCycle: 24, defaultValue: parseTime('00:00')})
+  )
+  .add(
+    'hourCycle: 12, granularity: hour',
+    () => render({hourCycle: 12, granularity: 'hour'})
+  )
+  .add(
+    'hourCycle: 24, granularity: hour',
+    () => render({hourCycle: 24, granularity: 'hour'})
   )
   .add(
     'zoned',
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index ab09cda25db..b0964afd0b7 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render} from '@testing-library/react';
-import {CalendarDate, CalendarDateTime, getLocalTimeZone, today} from '../../../@internationalized/date';
+import {act, fireEvent, render, within} from '@testing-library/react';
+import {CalendarDate, CalendarDateTime, getLocalTimeZone, toCalendarDateTime, today} from '@internationalized/date';
 import {DatePicker} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -130,7 +130,7 @@ describe('DatePicker', function () {
   describe('calendar popover', function () {
     it('should emit onChange when selecting a date in the calendar in controlled mode', function () {
       let onChange = jest.fn();
-      let {getByRole, getAllByRole} = render(
+      let {getByRole, getAllByRole, queryByLabelText} = render(
         <Provider theme={theme}>
           <DatePicker label="Date" value={new CalendarDate(2019, 2, 3)} onChange={onChange} />
         </Provider>
@@ -145,6 +145,8 @@ describe('DatePicker', function () {
       let dialog = getByRole('dialog');
       expect(dialog).toBeVisible();
 
+      expect(queryByLabelText('Time')).toBeNull();
+
       let cells = getAllByRole('gridcell');
       let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
       expect(selected.children[0]).toHaveAttribute('aria-label', 'Sunday, February 3, 2019 selected');
@@ -185,6 +187,132 @@ describe('DatePicker', function () {
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(combobox).toHaveTextContent('2/4/2019'); // uncontrolled
     });
+
+    it('should display a time field when a CalendarDateTime value is used', function () {
+      let onChange = jest.fn();
+      let {getByRole, getAllByRole, getAllByLabelText} = render(
+        <Provider theme={theme}>
+          <DatePicker label="Date" defaultValue={new CalendarDateTime(2019, 2, 3, 8, 45)} onChange={onChange} />
+        </Provider>
+      );
+
+      let combobox = getAllByRole('group')[0];
+      expect(combobox).toHaveTextContent('2/3/2019, 8:45 AM');
+
+      let button = getByRole('button');
+      triggerPress(button);
+
+      let dialog = getByRole('dialog');
+      expect(dialog).toBeVisible();
+
+      let cells = getAllByRole('gridcell');
+      let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+      expect(selected.children[0]).toHaveAttribute('aria-label', 'Sunday, February 3, 2019 selected');
+
+      let timeField = getAllByLabelText('Time')[0];
+      expect(timeField).toHaveTextContent('8:45 AM');
+
+      // selecting a date should not close the popover
+      triggerPress(selected.nextSibling.children[0]);
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(new CalendarDateTime(2019, 2, 4, 8, 45));
+      expect(combobox).toHaveTextContent('2/4/2019, 8:45 AM');
+
+      let hour = within(timeField).getByLabelText('Hour');
+      expect(hour).toHaveAttribute('role', 'spinbutton');
+      expect(hour).toHaveAttribute('aria-valuetext', '8 AM');
+
+      act(() => hour.focus());
+      fireEvent.keyDown(hour, {key: 'ArrowUp'});
+      fireEvent.keyUp(hour, {key: 'ArrowUp'});
+
+      expect(hour).toHaveAttribute('aria-valuetext', '9 AM');
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(2);
+      expect(onChange).toHaveBeenCalledWith(new CalendarDateTime(2019, 2, 4, 9, 45));
+      expect(combobox).toHaveTextContent('2/4/2019, 9:45 AM');
+    });
+
+    it('should not fire onChange until both date and time are selected', function () {
+      let onChange = jest.fn();
+      let {getByRole, getAllByRole, getAllByLabelText} = render(
+        <Provider theme={theme}>
+          <DatePicker label="Date" granularity="minute" onChange={onChange} />
+        </Provider>
+      );
+
+      let combobox = getAllByRole('group')[0];
+      let formatter = new Intl.DateTimeFormat('en-US', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'});
+      let placeholder = formatter.format(toCalendarDateTime(today(getLocalTimeZone())).set({hour: 12, minute: 0}).toDate(getLocalTimeZone()));
+      expect(combobox).toHaveTextContent(placeholder);
+
+      let button = getByRole('button');
+      triggerPress(button);
+
+      let dialog = getByRole('dialog');
+      expect(dialog).toBeVisible();
+
+      let cells = getAllByRole('gridcell');
+      let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+      expect(selected).toBeUndefined();
+
+      let timeField = getAllByLabelText('Time')[0];
+      expect(timeField).toHaveTextContent('12:00 PM');
+
+      // selecting a date should not close the popover
+      let todayCell = cells.find(cell => cell.firstChild.getAttribute('aria-label')?.startsWith('Today'));
+      triggerPress(todayCell.firstChild);
+
+      expect(todayCell).toHaveAttribute('aria-selected', 'true');
+
+      expect(dialog).toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(combobox).toHaveTextContent(placeholder);
+
+      let hour = within(timeField).getByLabelText('Hour');
+      expect(hour).toHaveAttribute('role', 'spinbutton');
+      expect(hour).toHaveAttribute('aria-valuetext', '12 PM');
+
+      act(() => hour.focus());
+      fireEvent.keyDown(hour, {key: 'ArrowUp'});
+      fireEvent.keyUp(hour, {key: 'ArrowUp'});
+
+      expect(hour).toHaveAttribute('aria-valuetext', '1 PM');
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(combobox).toHaveTextContent(placeholder);
+
+      fireEvent.keyDown(hour, {key: 'ArrowRight'});
+      fireEvent.keyUp(hour, {key: 'ArrowRight'});
+
+      expect(document.activeElement).toHaveAttribute('aria-label', 'Minute');
+      expect(document.activeElement).toHaveAttribute('aria-valuetext', '00');
+      fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
+      fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+
+      expect(document.activeElement).toHaveAttribute('aria-valuetext', '01');
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(combobox).toHaveTextContent(placeholder);
+
+      fireEvent.keyDown(hour, {key: 'ArrowRight'});
+      fireEvent.keyUp(hour, {key: 'ArrowRight'});
+
+      expect(document.activeElement).toHaveAttribute('aria-label', 'Day Period');
+      expect(document.activeElement).toHaveAttribute('aria-valuetext', '1 PM');
+
+      fireEvent.keyDown(document.activeElement, {key: 'Enter'});
+      fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      let value = toCalendarDateTime(today(getLocalTimeZone())).set({hour: 13, minute: 1});
+      expect(onChange).toHaveBeenCalledWith(value);
+      expect(combobox).toHaveTextContent(formatter.format(value.toDate(getLocalTimeZone())));
+    });
   });
 
   describe('labeling', function () {
@@ -723,8 +851,8 @@ describe('DatePicker', function () {
     });
 
     it('should display an error icon when date is less than the minimum (uncontrolled)', function () {
-      let {getByTestId, getByLabelText} = render(<DatePicker label="Date" defaultValue={new CalendarDate(1985, 1, 1)} minValue={new CalendarDate(1985, 1, 1)} />);
-      expect(() => getByTestId('invalid-icon')).toThrow();
+      let {getByTestId, getByLabelText, queryByTestId} = render(<DatePicker label="Date" defaultValue={new CalendarDate(1985, 1, 1)} minValue={new CalendarDate(1985, 1, 1)} />);
+      expect(queryByTestId('invalid-icon')).toBeNull();
 
       let year = getByLabelText('Year');
       fireEvent.keyDown(year, {key: 'ArrowDown'});
@@ -732,7 +860,7 @@ describe('DatePicker', function () {
       expect(getByTestId('invalid-icon')).toBeVisible();
 
       fireEvent.keyDown(year, {key: 'ArrowUp'});
-      expect(() => getByTestId('invalid-icon')).toThrow();
+      expect(queryByTestId('invalid-icon')).toBeNull();
     });
 
     it('should display an error icon when date is greater than the maximum (controlled)', function () {
@@ -741,8 +869,8 @@ describe('DatePicker', function () {
     });
 
     it('should display an error icon when date is greater than the maximum (uncontrolled)', function () {
-      let {getByTestId, getByLabelText} = render(<DatePicker label="Date" defaultValue={new CalendarDate(1985, 1, 1)} maxValue={new CalendarDate(1985, 1, 1)} />);
-      expect(() => getByTestId('invalid-icon')).toThrow();
+      let {getByTestId, getByLabelText, queryByTestId} = render(<DatePicker label="Date" defaultValue={new CalendarDate(1985, 1, 1)} maxValue={new CalendarDate(1985, 1, 1)} />);
+      expect(queryByTestId('invalid-icon')).toBeNull();
 
       let year = getByLabelText('Year');
       fireEvent.keyDown(year, {key: 'ArrowUp'});
@@ -750,7 +878,7 @@ describe('DatePicker', function () {
       expect(getByTestId('invalid-icon')).toBeVisible();
 
       fireEvent.keyDown(year, {key: 'ArrowDown'});
-      expect(() => getByTestId('invalid-icon')).toThrow();
+      expect(queryByTestId('invalid-icon')).toBeNull();
     });
   });
 
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index e4656206798..a32379eb14f 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, getAllByRole as getAllByRoleInContainer, render} from '@testing-library/react';
-import {CalendarDate, CalendarDateTime, getLocalTimeZone, today} from '@internationalized/date';
+import {act, fireEvent, getAllByRole as getAllByRoleInContainer, render, within} from '@testing-library/react';
+import {CalendarDate, CalendarDateTime, getLocalTimeZone, toCalendarDateTime, today} from '@internationalized/date';
 import {DateRangePicker} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -238,6 +238,167 @@ describe('DateRangePicker', function () {
       expect(startDate).toHaveTextContent('2/10/2019'); // uncontrolled
       expect(endDate).toHaveTextContent('2/17/2019');
     });
+
+    it('should display time fields when a CalendarDateTime value is used', function () {
+      let onChange = jest.fn();
+      let {getByRole, getAllByRole, getByLabelText, getAllByLabelText} = render(
+        <Provider theme={theme}>
+          <DateRangePicker label="Date" defaultValue={{start: new CalendarDateTime(2019, 2, 3, 8, 45), end: new CalendarDateTime(2019, 5, 6, 10, 45)}} onChange={onChange} />
+        </Provider>
+      );
+
+      let startDate = getByLabelText('Start Date');
+      let endDate = getByLabelText('End Date');
+      expect(startDate).toHaveTextContent('2/3/2019, 8:45 AM');
+      expect(endDate).toHaveTextContent('5/6/2019, 10:45 AM');
+
+      let button = getByRole('button');
+      triggerPress(button);
+
+      let dialog = getByRole('dialog');
+      expect(dialog).toBeVisible();
+
+      let cells = getAllByRole('gridcell');
+      let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+      expect(selected.children[0]).toHaveAttribute('aria-label', 'Sunday, February 3, 2019 selected (Click to start selecting date range)');
+
+      let startTimeField = getAllByLabelText('Start time')[0];
+      expect(startTimeField).toHaveTextContent('8:45 AM');
+
+      let endTimeField = getAllByLabelText('End time')[0];
+      expect(endTimeField).toHaveTextContent('10:45 AM');
+
+      // selecting a date should not close the popover
+      triggerPress(getByLabelText('Sunday, February 10, 2019 selected'));
+      triggerPress(getByLabelText('Sunday, February 17, 2019'));
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith({start: new CalendarDateTime(2019, 2, 10, 8, 45), end: new CalendarDateTime(2019, 2, 17, 10, 45)});
+      expect(startDate).toHaveTextContent('2/10/2019, 8:45 AM');
+      expect(endDate).toHaveTextContent('2/17/2019, 10:45 AM');
+
+      let hour = within(startTimeField).getByLabelText('Hour');
+      expect(hour).toHaveAttribute('role', 'spinbutton');
+      expect(hour).toHaveAttribute('aria-valuetext', '8 AM');
+
+      act(() => hour.focus());
+      fireEvent.keyDown(hour, {key: 'ArrowUp'});
+      fireEvent.keyUp(hour, {key: 'ArrowUp'});
+
+      expect(hour).toHaveAttribute('aria-valuetext', '9 AM');
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(2);
+      expect(onChange).toHaveBeenCalledWith({start: new CalendarDateTime(2019, 2, 10, 9, 45), end: new CalendarDateTime(2019, 2, 17, 10, 45)});
+      expect(startDate).toHaveTextContent('2/10/2019, 9:45 AM');
+      expect(endDate).toHaveTextContent('2/17/2019, 10:45 AM');
+
+      hour = within(endTimeField).getByLabelText('Hour');
+      expect(hour).toHaveAttribute('role', 'spinbutton');
+      expect(hour).toHaveAttribute('aria-valuetext', '10 AM');
+
+      act(() => hour.focus());
+      fireEvent.keyDown(hour, {key: 'ArrowUp'});
+      fireEvent.keyUp(hour, {key: 'ArrowUp'});
+
+      expect(hour).toHaveAttribute('aria-valuetext', '11 AM');
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(3);
+      expect(onChange).toHaveBeenCalledWith({start: new CalendarDateTime(2019, 2, 10, 9, 45), end: new CalendarDateTime(2019, 2, 17, 11, 45)});
+      expect(startDate).toHaveTextContent('2/10/2019, 9:45 AM');
+      expect(endDate).toHaveTextContent('2/17/2019, 11:45 AM');
+    });
+
+    it('should not fire onChange until both date range and time range are selected', function () {
+      let onChange = jest.fn();
+      let {getByRole, getAllByRole, getByLabelText, getAllByLabelText} = render(
+        <Provider theme={theme}>
+          <DateRangePicker label="Date" granularity="minute" onChange={onChange} />
+        </Provider>
+      );
+
+      let formatter = new Intl.DateTimeFormat('en-US', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'});
+      let placeholder = formatter.format(toCalendarDateTime(today(getLocalTimeZone())).set({hour: 12, minute: 0}).toDate(getLocalTimeZone()));
+      let startDate = getByLabelText('Start Date');
+      let endDate = getByLabelText('End Date');
+      expect(startDate).toHaveTextContent(placeholder);
+      expect(endDate).toHaveTextContent(placeholder);
+
+      let button = getByRole('button');
+      triggerPress(button);
+
+      let dialog = getByRole('dialog');
+      expect(dialog).toBeVisible();
+
+      let cells = getAllByRole('gridcell');
+      let selected = cells.find(cell => cell.getAttribute('aria-selected') === 'true');
+      expect(selected).toBeUndefined();
+
+      let startTimeField = getAllByLabelText('Start time')[0];
+      expect(startTimeField).toHaveTextContent('12:00 PM');
+
+      let endTimeField = getAllByLabelText('End time')[0];
+      expect(endTimeField).toHaveTextContent('12:00 PM');
+
+      // selecting a date should not close the popover
+      let enabledCells = cells.filter(cell => !cell.hasAttribute('aria-disabled'));
+      triggerPress(enabledCells[0].firstChild);
+      triggerPress(enabledCells[1].firstChild);
+
+      expect(dialog).toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(startDate).toHaveTextContent(placeholder);
+      expect(endDate).toHaveTextContent(placeholder);
+
+      for (let timeField of [startTimeField, endTimeField]) {
+        let hour = within(timeField).getByLabelText('Hour');
+        expect(hour).toHaveAttribute('role', 'spinbutton');
+        expect(hour).toHaveAttribute('aria-valuetext', '12 PM');
+
+        act(() => hour.focus());
+        fireEvent.keyDown(hour, {key: 'ArrowUp'});
+        fireEvent.keyUp(hour, {key: 'ArrowUp'});
+
+        expect(hour).toHaveAttribute('aria-valuetext', '1 PM');
+
+        expect(onChange).not.toHaveBeenCalled();
+        expect(startDate).toHaveTextContent(placeholder);
+        expect(endDate).toHaveTextContent(placeholder);
+
+        fireEvent.keyDown(hour, {key: 'ArrowRight'});
+        fireEvent.keyUp(hour, {key: 'ArrowRight'});
+
+        expect(document.activeElement).toHaveAttribute('aria-label', 'Minute');
+        expect(document.activeElement).toHaveAttribute('aria-valuetext', '00');
+        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+
+        expect(document.activeElement).toHaveAttribute('aria-valuetext', '01');
+
+        expect(onChange).not.toHaveBeenCalled();
+        expect(startDate).toHaveTextContent(placeholder);
+        expect(endDate).toHaveTextContent(placeholder);
+
+        fireEvent.keyDown(hour, {key: 'ArrowRight'});
+        fireEvent.keyUp(hour, {key: 'ArrowRight'});
+
+        expect(document.activeElement).toHaveAttribute('aria-label', 'Day Period');
+        expect(document.activeElement).toHaveAttribute('aria-valuetext', '1 PM');
+
+        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+      }
+
+      expect(dialog).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      let startValue = toCalendarDateTime(today(getLocalTimeZone())).set({day: 1, hour: 13, minute: 1});
+      let endValue = toCalendarDateTime(today(getLocalTimeZone())).set({day: 2, hour: 13, minute: 1});
+      expect(onChange).toHaveBeenCalledWith({start: startValue, end: endValue});
+      expect(startDate).toHaveTextContent(formatter.format(startValue.toDate(getLocalTimeZone())));
+      expect(endDate).toHaveTextContent(formatter.format(endValue.toDate(getLocalTimeZone())));
+    });
   });
 
   describe('labeling', function () {
diff --git a/packages/@react-stately/calendar/src/types.ts b/packages/@react-stately/calendar/src/types.ts
index 294a61acd35..680f68a3c7f 100644
--- a/packages/@react-stately/calendar/src/types.ts
+++ b/packages/@react-stately/calendar/src/types.ts
@@ -11,6 +11,7 @@
  */
 
 import {CalendarDate} from '@internationalized/date';
+import {DateValue} from '@react-types/calendar';
 import {RangeValue} from '@react-types/shared';
 
 export interface CalendarStateBase {
@@ -49,12 +50,12 @@ export interface CalendarStateBase {
 
 export interface CalendarState extends CalendarStateBase {
   value: CalendarDate,
-  setValue(value: Date): void
+  setValue(value: CalendarDate): void
 }
 
 export interface RangeCalendarState extends CalendarStateBase {
-  value: RangeValue<CalendarDate>,
-  setValue(value: RangeValue<Date>): void,
+  value: RangeValue<DateValue>,
+  setValue(value: RangeValue<DateValue>): void,
   highlightDate(date: CalendarDate): void,
   anchorDate: CalendarDate | null,
   setAnchorDate(date: CalendarDate | null): void,
diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts
index a341a8ed04c..06fc9ae35b2 100644
--- a/packages/@react-stately/calendar/src/useCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useCalendarState.ts
@@ -13,10 +13,9 @@
 import {
   Calendar,
   CalendarDate,
-  compareDate,
   endOfMonth,
-  fromAbsolute,
   getDayOfWeek,
+  GregorianCalendar,
   isSameDay,
   isSameMonth,
   startOfMonth,
@@ -24,18 +23,18 @@ import {
   toCalendarDate,
   today
 } from '@internationalized/date';
-import {CalendarProps} from '@react-types/calendar';
+import {CalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarState} from './types';
 import {useControlledState} from '@react-stately/utils';
 import {useDateFormatter} from '@react-aria/i18n';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {useWeekStart} from './useWeekStart';
 
-interface CalendarStateOptions extends CalendarProps {
+interface CalendarStateOptions<T extends DateValue> extends CalendarProps<T> {
   createCalendar: (name: string) => Calendar
 }
 
-export function useCalendarState(props: CalendarStateOptions): CalendarState {
+export function useCalendarState<T extends DateValue>(props: CalendarStateOptions<T>): CalendarState {
   let defaultFormatter = useDateFormatter();
   let resolvedOptions = useMemo(() => defaultFormatter.resolvedOptions(), [defaultFormatter]);
   let {
@@ -45,9 +44,8 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
 
   let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
-  let [value, setControlledValue] = useControlledState(props.value || undefined, props.defaultValue, props.onChange);
-  let dateValue = useMemo(() => value ? new Date(value) : null, [value]);
-  let calendarDateValue = useMemo(() => dateValue ? toCalendar(toCalendarDate(fromAbsolute(dateValue.getTime(), timeZone)), calendar) : null, [dateValue, timeZone, calendar]);
+  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
   let defaultMonth = calendarDateValue || toCalendar(today(timeZone), calendar);
   let [currentMonth, setCurrentMonth] = useState(defaultMonth); // TODO: does this need to be in state at all??
   let [focusedDate, setFocusedDate] = useState(defaultMonth);
@@ -71,8 +69,8 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
 
   let days = currentMonth.calendar.getDaysInMonth(currentMonth);
   let weeksInMonth = Math.ceil((monthStartsAt + days) / 7);
-  let minDate = useMemo(() => props.minValue ? toCalendar(toCalendarDate(fromAbsolute(new Date(props.minValue).getTime(), timeZone)), calendar) : null, [calendar, props.minValue, timeZone]);
-  let maxDate = useMemo(() => props.maxValue ? toCalendar(toCalendarDate(fromAbsolute(new Date(props.maxValue).getTime(), timeZone)), calendar) : null, [calendar, props.maxValue, timeZone]);
+  let minDate = props.minValue;
+  let maxDate = props.maxValue;
 
   // Sets focus to a specific cell date
   function focusCell(date: CalendarDate) {
@@ -89,15 +87,24 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
     setFocusedDate(date);
   }
 
-  function setValue(value: Date) {
+  function setValue(newValue: CalendarDate) {
     if (!props.isDisabled && !props.isReadOnly) {
-      setControlledValue(value);
+      // The display calendar should not have any effect on the emitted value.
+      // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
+      newValue = toCalendar(newValue, value?.calendar || new GregorianCalendar());
+
+      // Preserve time if the input value had one.
+      if (value && 'hour' in value) {
+        setControlledValue(value.set(newValue));
+      } else {
+        setControlledValue(newValue);
+      }
     }
   }
 
   let weekDays = useMemo(() => (
     [...new Array(7).keys()]
-      .map(index => currentMonth.set({day: index - monthStartsAt + 1}))
+      .map(index => startOfMonth(currentMonth).add({days: index - monthStartsAt}))
   ), [currentMonth, monthStartsAt]);
 
   return {
@@ -140,10 +147,10 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
       focusCell(focusedDate.subtract({years: 1}));
     },
     selectFocusedDate() {
-      setValue(focusedDate.toDate(timeZone));
+      setValue(focusedDate);
     },
     selectDate(date) {
-      setValue(date.toDate(timeZone));
+      setValue(date);
     },
     isFocused,
     setFocused,
@@ -152,8 +159,8 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
     daysInMonth: currentMonth.calendar.getDaysInMonth(currentMonth),
     weekDays,
     getCellDate(weekIndex, dayIndex) {
-      let day = (weekIndex * 7 + dayIndex) - monthStartsAt + 1;
-      return currentMonth.set({day});
+      let days = (weekIndex * 7 + dayIndex) - monthStartsAt;
+      return startOfMonth(currentMonth).add({days});
     },
     isInvalid(date) {
       return isInvalid(date, minDate, maxDate);
@@ -176,7 +183,7 @@ export function useCalendarState(props: CalendarStateOptions): CalendarState {
   };
 }
 
-function isInvalid(date: CalendarDate, minDate: CalendarDate, maxDate: CalendarDate) {
-  return (minDate != null && compareDate(date, minDate) < 0) ||
-    (maxDate != null && compareDate(date, maxDate) > 0);
+function isInvalid(date: CalendarDate, minDate: DateValue, maxDate: DateValue) {
+  return (minDate != null && date.compare(minDate) < 0) ||
+    (maxDate != null && date.compare(maxDate) > 0);
 }
diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
index edfe7043eed..96f0d9a7126 100644
--- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, CalendarDate, compareDate, fromAbsolute, toCalendarDate, toDate} from '@internationalized/date';
-import {DateValue} from '@react-types/calendar';
+import {Calendar, CalendarDate, GregorianCalendar, toCalendar, toCalendarDate} from '@internationalized/date';
+import {DateRange, DateValue} from '@react-types/calendar';
 import {RangeCalendarProps} from '@react-types/calendar';
 import {RangeCalendarState} from './types';
 import {RangeValue} from '@react-types/shared';
@@ -19,13 +19,13 @@ import {useCalendarState} from './useCalendarState';
 import {useControlledState} from '@react-stately/utils';
 import {useState} from 'react';
 
-interface RangeCalendarStateOptions extends RangeCalendarProps {
+interface RangeCalendarStateOptions<T extends DateValue> extends RangeCalendarProps<T> {
   createCalendar: (name: string) => Calendar
 }
 
-export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState {
+export function useRangeCalendarState<T extends DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
   let {value: valueProp, defaultValue, onChange, createCalendar, ...calendarProps} = props;
-  let [value, setValue] = useControlledState(
+  let [value, setValue] = useControlledState<DateRange>(
     valueProp,
     defaultValue,
     onChange
@@ -38,8 +38,7 @@ export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCa
     createCalendar
   });
 
-  let dateRange = value != null ? convertRange(value, calendar.timeZone) : null;
-  let highlightedRange = anchorDate ? makeRange(anchorDate, calendar.focusedDate) : value && makeRange(dateRange.start, dateRange.end);
+  let highlightedRange = anchorDate ? makeRange(anchorDate, calendar.focusedDate) : value && makeRange(value.start, value.end);
   let selectDate = (date: CalendarDate) => {
     if (props.isReadOnly) {
       return;
@@ -50,8 +49,8 @@ export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCa
     } else {
       let range = makeRange(anchorDate, date);
       setValue({
-        start: toDate(range.start, calendar.timeZone),
-        end: toDate(range.end, calendar.timeZone)
+        start: convertValue(range.start, value?.start),
+        end: convertValue(range.end, value?.end)
       });
       setAnchorDate(null);
     }
@@ -59,7 +58,7 @@ export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCa
 
   return {
     ...calendar,
-    value: dateRange,
+    value,
     setValue,
     anchorDate,
     setAnchorDate,
@@ -74,26 +73,32 @@ export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCa
       }
     },
     isSelected(date) {
-      return highlightedRange && compareDate(date, highlightedRange.start) >= 0 && compareDate(date, highlightedRange.end) <= 0;
+      return highlightedRange && date.compare(highlightedRange.start) >= 0 && date.compare(highlightedRange.end) <= 0;
     }
   };
 }
 
-function makeRange(start: CalendarDate, end: CalendarDate): RangeValue<CalendarDate> {
+function makeRange(start: DateValue, end: DateValue): RangeValue<CalendarDate> {
   if (!start || !end) {
     return null;
   }
 
-  if (compareDate(end, start) < 0) {
+  if (end.compare(start) < 0) {
     [start, end] = [end, start];
   }
 
-  return {start, end};
+  return {start: toCalendarDate(start), end: toCalendarDate(end)};
 }
 
-function convertRange(range: RangeValue<DateValue>, timeZone: string): RangeValue<CalendarDate> {
-  return {
-    start: range.start ? toCalendarDate(fromAbsolute(new Date(range.start).getTime(), timeZone)) : null,
-    end: range.end ? toCalendarDate(fromAbsolute(new Date(range.end).getTime(), timeZone)) : null
-  };
+function convertValue(newValue: CalendarDate, oldValue: DateValue) {
+  // The display calendar should not have any effect on the emitted value.
+  // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
+  newValue = toCalendar(newValue, oldValue?.calendar || new GregorianCalendar());
+
+  // Preserve time if the input value had one.
+  if (oldValue && 'hour' in oldValue) {
+    return oldValue.set(newValue);
+  }
+
+  return newValue;
 }
diff --git a/packages/@react-stately/datepicker/package.json b/packages/@react-stately/datepicker/package.json
index 9fd98f8c7b9..ab02a290a63 100644
--- a/packages/@react-stately/datepicker/package.json
+++ b/packages/@react-stately/datepicker/package.json
@@ -20,7 +20,6 @@
   "dependencies": {
     "@babel/runtime": "^7.6.2",
     "@internationalized/date": "3.0.0-alpha.1",
-    "@react-aria/i18n": "^3.1.0",
     "@react-stately/utils": "^3.1.0",
     "@react-types/datepicker": "3.0.0-alpha.1",
     "@react-types/shared": "^3.1.0",
diff --git a/packages/@react-stately/datepicker/src/useDatePickerFieldState.ts b/packages/@react-stately/datepicker/src/useDatePickerFieldState.ts
index d354b1c6eaa..15e69f8744b 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerFieldState.ts
@@ -10,11 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, CalendarDateTime, GregorianCalendar, now, toCalendar, toCalendarDate, toCalendarDateTime, ZonedDateTime} from '@internationalized/date';
+import {Calendar, CalendarDateTime, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, now, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue} from '@react-types/datepicker';
 import {FieldOptions, getFormatOptions, isInvalid} from './utils';
 import {useControlledState} from '@react-stately/utils';
-import {useDateFormatter} from '@react-aria/i18n';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
@@ -28,11 +27,11 @@ export interface DateSegment {
 }
 
 export interface DatePickerFieldState {
-  value: CalendarDateTime,
+  value: DateValue,
   dateValue: Date,
   setValue: (value: CalendarDateTime) => void,
   segments: DateSegment[],
-  dateFormatter: Intl.DateTimeFormat,
+  dateFormatter: DateFormatter,
   validationState: ValidationState,
   increment: (type: Intl.DateTimeFormatPartTypes) => void,
   decrement: (type: Intl.DateTimeFormatPartTypes) => void,
@@ -68,22 +67,29 @@ const TYPE_MAPPING = {
   dayperiod: 'dayPeriod'
 };
 
-interface DatePickerFieldProps extends DatePickerProps {
-  maxGranularity?: DatePickerProps['granularity'],
+interface DatePickerFieldProps<T extends DateValue> extends DatePickerProps<T> {
+  maxGranularity?: 'year' | 'month' | DatePickerProps<T>['granularity'],
+  locale: string,
   createCalendar: (name: string) => Calendar
 }
 
-export function useDatePickerFieldState(props: DatePickerFieldProps): DatePickerFieldState {
+export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFieldProps<T>): DatePickerFieldState {
   let {
+    locale,
     createCalendar,
     hideTimeZone
   } = props;
 
-  let v = (props.value || props.defaultValue || props.placeholderValue);
+  let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
   let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
   let timeZone = defaultTimeZone || 'UTC';
   let granularity = props.granularity || (v && 'minute' in v ? 'minute' : 'day');
 
+  // props.granularity must actually exist in the value if one is provided.
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
   let [validSegments, setValidSegments] = useState<Partial<typeof EDITABLE_SEGMENTS>>(
     props.value || props.defaultValue ? {...EDITABLE_SEGMENTS} : {}
   );
@@ -97,7 +103,7 @@ export function useDatePickerFieldState(props: DatePickerFieldProps): DatePicker
   }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]);
   let opts = useMemo(() => getFormatOptions({}, formatOpts), [formatOpts]);
 
-  let dateFormatter = useDateFormatter(opts);
+  let dateFormatter = useMemo(() => new DateFormatter(locale, opts), [locale, opts]);
   let resolvedOptions = useMemo(() => dateFormatter.resolvedOptions(), [dateFormatter]);
   let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
@@ -121,59 +127,57 @@ export function useDatePickerFieldState(props: DatePickerFieldProps): DatePicker
   let [placeholderDate, setPlaceholderDate] = useState(
     props.placeholderValue
       ? convertValue(props.placeholderValue, calendar)
-      : createPlaceholderDate(calendar, defaultTimeZone)
-  );
-
-  let [date, setDate] = useControlledState(
-    convertValue(props.value, calendar),
-    convertValue(props.defaultValue, calendar),
-    value => {
-      if (props.onChange) {
-        let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
-        let gregorianDate = toCalendar(value, new GregorianCalendar());
-        props.onChange(hasTime || defaultTimeZone ? gregorianDate : toCalendarDate(gregorianDate));
-      }
-    }
+      : createPlaceholderDate(granularity, calendar, defaultTimeZone)
   );
 
-  // Reset date and placeholder when calendar changes
+  // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
   useEffect(() => {
     if (calendar.identifier !== lastCalendarIdentifier.current) {
-      let isValid = Object.keys(validSegments).length >= numSegments;
-      if (isValid) {
-        setDate(date => toCalendar(date, calendar));
-      } else {
-        setPlaceholderDate(placeholder => Object.keys(validSegments).length > 0 ? toCalendar(placeholder, calendar) : createPlaceholderDate(calendar, defaultTimeZone));
-      }
       lastCalendarIdentifier.current = calendar.identifier;
+      setPlaceholderDate(placeholder =>
+        Object.keys(validSegments).length > 0
+          ? toCalendar(placeholder, calendar)
+          : createPlaceholderDate(granularity, calendar, defaultTimeZone)
+      );
     }
-  }, [calendar, setDate, validSegments, defaultTimeZone, numSegments]);
+  }, [calendar, granularity, validSegments, defaultTimeZone]);
+
+  let [value, setDate] = useControlledState<DateValue>(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+
+  let calendarValue = convertValue(value, calendar);
 
   // If all segments are valid, use the date from state, otherwise use the placeholder date.
-  let value = date && Object.keys(validSegments).length >= numSegments ? date : placeholderDate;
-  let setValue = (value: CalendarDateTime) => {
+  let displayValue = calendarValue && Object.keys(validSegments).length >= numSegments ? calendarValue : placeholderDate;
+  let setValue = (newValue: DateValue) => {
     if (props.isDisabled || props.isReadOnly) {
       return;
     }
 
     if (Object.keys(validSegments).length >= numSegments) {
-      setDate(value);
+      // The display calendar should not have any effect on the emitted value.
+      // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
+      newValue = toCalendar(newValue, v?.calendar || new GregorianCalendar());
+      setDate(newValue);
     } else {
-      setPlaceholderDate(value);
+      setPlaceholderDate(newValue);
     }
   };
 
-  let dateValue = useMemo(() => value.toDate(timeZone), [value, timeZone]);
+  let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
   let segments = useMemo(() =>
     dateFormatter.formatToParts(dateValue)
       .map(segment => ({
         type: TYPE_MAPPING[segment.type] || segment.type,
         text: segment.value,
-        ...getSegmentLimits(value, segment.type, resolvedOptions),
+        ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
         isPlaceholder: !validSegments[segment.type]
       } as DateSegment))
-  , [dateValue, validSegments, dateFormatter, resolvedOptions, value]);
+  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue]);
 
   let hasEra = useMemo(() => segments.some(s => s.type === 'era'), [segments]);
 
@@ -187,14 +191,14 @@ export function useDatePickerFieldState(props: DatePickerFieldProps): DatePicker
 
   let adjustSegment = (type: Intl.DateTimeFormatPartTypes, amount: number) => {
     markValid(type);
-    setValue(addSegment(value, type, amount, resolvedOptions));
+    setValue(addSegment(displayValue, type, amount, resolvedOptions));
   };
 
   let validationState: ValidationState = props.validationState ||
-    (isInvalid(date, props.minValue, props.maxValue) ? 'invalid' : null);
+    (isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
 
   return {
-    value: date,
+    value: calendarValue,
     dateValue,
     setValue,
     segments,
@@ -214,11 +218,11 @@ export function useDatePickerFieldState(props: DatePickerFieldProps): DatePicker
     },
     setSegment(part, v) {
       markValid(part);
-      setValue(setSegment(value, part, v, resolvedOptions));
+      setValue(setSegment(displayValue, part, v, resolvedOptions));
     },
     confirmPlaceholder(part) {
       markValid(part);
-      setValue(value.copy());
+      setValue(displayValue.copy());
     },
     getFormatOptions(fieldOptions: FieldOptions) {
       return getFormatOptions(fieldOptions, formatOpts);
@@ -226,125 +230,144 @@ export function useDatePickerFieldState(props: DatePickerFieldProps): DatePicker
   };
 }
 
-function getSegmentLimits(date: CalendarDateTime, type: string, options: Intl.ResolvedDateTimeFormatOptions) {
-  let value, minValue, maxValue;
+function getSegmentLimits(date: DateValue, type: string, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (type) {
     case 'era': {
       let eras = date.calendar.getEras();
-      value = eras.indexOf(date.era);
-      minValue = 0;
-      maxValue = eras.length - 1;
-      break;
+      return {
+        value: eras.indexOf(date.era),
+        minValue: 0,
+        maxValue: eras.length - 1
+      };
     }
     case 'year':
-      value = date.year;
-      minValue = 1;
-      maxValue = date.calendar.getYearsInEra(date);
-      break;
+      return {
+        value: date.year,
+        minValue: 1,
+        maxValue: date.calendar.getYearsInEra(date)
+      };
     case 'month':
-      value = date.month;
-      minValue = 1;
-      maxValue = date.calendar.getMonthsInYear(date);
-      break;
+      return {
+        value: date.month,
+        minValue: getMinimumMonthInYear(date),
+        maxValue: date.calendar.getMonthsInYear(date)
+      };
     case 'day':
-      value = date.day;
-      minValue = 1;
-      maxValue = date.calendar.getDaysInMonth(date);
-      break;
-    case 'dayPeriod':
-      value = date.hour >= 12 ? 12 : 0;
-      minValue = 0;
-      maxValue = 12;
-      break;
-    case 'hour':
-      value = date.hour;
-      if (options.hour12) {
-        let isPM = value >= 12;
-        minValue = isPM ? 12 : 0;
-        maxValue = isPM ? 23 : 11;
-      } else {
-        minValue = 0;
-        maxValue = 23;
-      }
-      break;
-    case 'minute':
-      value = date.minute;
-      minValue = 0;
-      maxValue = 59;
-      break;
-    case 'second':
-      value = date.second;
-      minValue = 0;
-      maxValue = 59;
-      break;
-    default:
-      return {};
+      return {
+        value: date.day,
+        minValue: getMinimumDayInMonth(date),
+        maxValue: date.calendar.getDaysInMonth(date)
+      };
   }
 
-  return {
-    value,
-    minValue,
-    maxValue
-  };
+  if ('hour' in date) {
+    switch (type) {
+      case 'dayPeriod':
+        return {
+          value: date.hour >= 12 ? 12 : 0,
+          minValue: 0,
+          maxValue: 12
+        };
+      case 'hour':
+        if (options.hour12) {
+          let isPM = date.hour >= 12;
+          return {
+            value: date.hour,
+            minValue: isPM ? 12 : 0,
+            maxValue: isPM ? 23 : 11
+          };
+        }
+
+        return {
+          value: date.hour,
+          minValue: 0,
+          maxValue: 23
+        };
+      case 'minute':
+        return {
+          value: date.minute,
+          minValue: 0,
+          maxValue: 59
+        };
+      case 'second':
+        return {
+          value: date.second,
+          minValue: 0,
+          maxValue: 59
+        };
+    }
+  }
+
+  return {};
 }
 
-function addSegment(value: CalendarDateTime, part: string, amount: number, options: Intl.ResolvedDateTimeFormatOptions) {
+function addSegment(value: DateValue, part: string, amount: number, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (part) {
     case 'era':
     case 'year':
     case 'month':
     case 'day':
       return value.cycle(part, amount, {round: part === 'year'});
-    case 'dayPeriod': {
-      let hours = value.hour;
-      let isPM = hours >= 12;
-      return value.set({hour: isPM ? hours - 12 : hours + 12});
+  }
+
+  if ('hour' in value) {
+    switch (part) {
+      case 'dayPeriod': {
+        let hours = value.hour;
+        let isPM = hours >= 12;
+        return value.set({hour: isPM ? hours - 12 : hours + 12});
+      }
+      case 'hour':
+      case 'minute':
+      case 'second':
+        return value.cycle(part, amount, {
+          round: part !== 'hour',
+          hourCycle: options.hour12 ? 12 : 24
+        });
     }
-    case 'hour':
-    case 'minute':
-    case 'second':
-      return value.cycle(part, amount, {
-        round: part !== 'hour',
-        hourCycle: options.hour12 ? 12 : 24
-      });
   }
 }
 
-function setSegment(value: CalendarDateTime, part: string, segmentValue: number, options: Intl.ResolvedDateTimeFormatOptions) {
+function setSegment(value: DateValue, part: string, segmentValue: number, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (part) {
     case 'day':
     case 'month':
     case 'year':
       return value.set({[part]: segmentValue});
-    case 'dayPeriod': {
-      let hours = value.hour;
-      let wasPM = hours >= 12;
-      let isPM = segmentValue >= 12;
-      if (isPM === wasPM) {
-        return value;
-      }
-      return value.set({hour: wasPM ? hours - 12 : hours + 12});
-    }
-    case 'hour':
-      // In 12 hour time, ensure that AM/PM does not change
-      if (options.hour12) {
+  }
+
+  if ('hour' in value) {
+    switch (part) {
+      case 'dayPeriod': {
         let hours = value.hour;
         let wasPM = hours >= 12;
-        if (!wasPM && segmentValue === 12) {
-          segmentValue = 0;
-        }
-        if (wasPM && segmentValue < 12) {
-          segmentValue += 12;
+        let isPM = segmentValue >= 12;
+        if (isPM === wasPM) {
+          return value;
         }
+        return value.set({hour: wasPM ? hours - 12 : hours + 12});
       }
-      // fallthrough
-    case 'minute':
-    case 'second':
-      return value.set({[part]: segmentValue});
+      case 'hour':
+        // In 12 hour time, ensure that AM/PM does not change
+        if (options.hour12) {
+          let hours = value.hour;
+          let wasPM = hours >= 12;
+          if (!wasPM && segmentValue === 12) {
+            segmentValue = 0;
+          }
+          if (wasPM && segmentValue < 12) {
+            segmentValue += 12;
+          }
+        }
+        // fallthrough
+      case 'minute':
+      case 'second':
+        return value.set({[part]: segmentValue});
+    }
   }
 }
 
-function convertValue(value: DateValue, calendar: Calendar): CalendarDateTime | ZonedDateTime {
+function convertValue(value: DateValue, calendar: Calendar): DateValue {
   if (value === null) {
     return null;
   }
@@ -353,14 +376,10 @@ function convertValue(value: DateValue, calendar: Calendar): CalendarDateTime |
     return undefined;
   }
 
-  if ('hour' in value) {
-    return toCalendar(value, calendar);
-  }
-
-  return toCalendar(toCalendarDateTime(value), calendar);
+  return toCalendar(value, calendar);
 }
 
-function createPlaceholderDate(calendar, timeZone) {
+function createPlaceholderDate(granularity, calendar, timeZone) {
   let date = toCalendar(now(timeZone), calendar).set({
     hour: 12,
     minute: 0,
@@ -368,6 +387,10 @@ function createPlaceholderDate(calendar, timeZone) {
     millisecond: 0
   });
 
+  if (granularity === 'year' || granularity === 'month' || granularity === 'day') {
+    return toCalendarDate(date);
+  }
+
   if (!timeZone) {
     return toCalendarDateTime(date);
   }
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index 624f5e44ab6..65c56688e9c 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate} from '@internationalized/date';
-import {DatePickerProps, DateValue} from '@react-types/datepicker';
+import {CalendarDate, DateFormatter, toCalendarDateTime, toDateFields} from '@internationalized/date';
+import {DatePickerProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, getFormatOptions} from './utils';
 import {isInvalid} from './utils';
 import {useControlledState} from '@react-stately/utils';
@@ -20,31 +20,69 @@ import {ValidationState} from '@react-types/shared';
 
 export interface DatePickerState {
   value: DateValue,
-  dateValue: Date,
   setValue: (value: DateValue) => void,
-  selectDate: (value: CalendarDate) => void,
+  dateValue: DateValue,
+  setDateValue: (value: CalendarDate) => void,
+  timeValue: TimeValue,
+  setTimeValue: (value: TimeValue) => void,
   isOpen: boolean,
   setOpen: (isOpen: boolean) => void,
   validationState: ValidationState,
   formatValue(locale: string, fieldOptions: FieldOptions): string
 }
 
-export function useDatePickerState(props: DatePickerProps): DatePickerState {
+export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T>): DatePickerState {
   let [isOpen, setOpen] = useState(false);
-  let [value, setValue] = useControlledState(props.value, props.defaultValue || null, props.onChange);
+  let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
 
   let v = (value || props.placeholderValue);
   let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
   let granularity = props.granularity || (v && 'minute' in v ? 'minute' : 'day');
   let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+
+  let [selectedDate, setSelectedDate] = useState<DateValue>(null);
+  let [selectedTime, setSelectedTime] = useState<TimeValue>(null);
+
+  if (value) {
+    selectedDate = value;
+    if ('hour' in value) {
+      selectedTime = value;
+    }
+  }
+
+  // props.granularity must actually exist in the value if one is provided.
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
+  let commitValue = (date: DateValue, time: TimeValue) => {
+    setValue('timeZone' in time ? time.set(toDateFields(date)) : toCalendarDateTime(date, time));
+  };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
   let selectDate = (newValue: CalendarDate) => {
-    if (value && 'hour' in value) {
-      newValue = value.set(newValue);
+    if (hasTime) {
+      if (selectedTime) {
+        commitValue(newValue, selectedTime);
+      } else {
+        setSelectedDate(newValue);
+      }
+    } else {
+      setValue(newValue);
+    }
+
+    if (!hasTime) {
+      setOpen(false);
+    }
+  };
+
+  let selectTime = (newValue: TimeValue) => {
+    if (selectedDate) {
+      commitValue(selectedDate, newValue);
+    } else {
+      setSelectedTime(newValue);
     }
-    setValue(newValue);
-    setOpen(false);
   };
 
   let validationState: ValidationState = props.validationState ||
@@ -52,13 +90,19 @@ export function useDatePickerState(props: DatePickerProps): DatePickerState {
 
   return {
     value,
-    dateValue,
     setValue,
-    selectDate,
+    dateValue: selectedDate,
+    timeValue: selectedTime,
+    setDateValue: selectDate,
+    setTimeValue: selectTime,
     isOpen,
     setOpen,
     validationState,
     formatValue(locale, fieldOptions) {
+      if (!dateValue) {
+        return '';
+      }
+
       let formatOptions = getFormatOptions(fieldOptions, {
         granularity,
         timeZone: defaultTimeZone,
@@ -66,8 +110,7 @@ export function useDatePickerState(props: DatePickerProps): DatePickerState {
         hourCycle: props.hourCycle
       });
 
-      // TODO: cache
-      let formatter = new Intl.DateTimeFormat(locale, formatOptions);
+      let formatter = new DateFormatter(locale, formatOptions);
       return formatter.format(dateValue);
     }
   };
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index d136ea7b12e..f75af84d1ad 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -10,25 +10,30 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate} from '@internationalized/date';
-import {DateRange, DateRangePickerProps, DateValue} from '@react-types/datepicker';
+import {DateFormatter, toCalendarDateTime, toDateFields} from '@internationalized/date';
+import {DateRange, DateRangePickerProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, getFormatOptions, isInvalid} from './utils';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
 import {useState} from 'react';
 
+type TimeRange = RangeValue<TimeValue>;
 export interface DateRangePickerState {
   value: DateRange,
   setValue: (value: DateRange) => void,
   setDate: (part: keyof DateRange, value: DateValue) => void,
-  selectDateRange: (value: RangeValue<CalendarDate>) => void,
+  setTime: (part: keyof TimeRange, value: TimeValue) => void,
+  dateRange: DateRange,
+  setDateRange: (value: DateRange) => void,
+  timeRange: TimeRange,
+  setTimeRange: (value: TimeRange) => void,
   isOpen: boolean,
   setOpen: (isOpen: boolean) => void,
   validationState: ValidationState,
   formatValue(locale: string, fieldOptions: FieldOptions): string
 }
 
-export function useDateRangePickerState(props: DateRangePickerProps): DateRangePickerState {
+export function useDateRangePickerState<T extends DateValue>(props: DateRangePickerProps<T>): DateRangePickerState {
   let [isOpen, setOpen] = useState(false);
   let onChange = value => {
     if (value.start && value.end && props.onChange) {
@@ -42,16 +47,52 @@ export function useDateRangePickerState(props: DateRangePickerProps): DateRangeP
     onChange
   );
 
+  let v = (value?.start || value?.end || props.placeholderValue);
+  let granularity = props.granularity || (v && 'minute' in v ? 'minute' : 'day');
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+
+  let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
+  let [timeRange, setSelectedTimeRange] = useState<TimeRange>(null);
+
+  if (value && value.start && value.end) {
+    dateRange = value;
+    if ('hour' in value.start) {
+      timeRange = value as TimeRange;
+    }
+  }
+
+  let commitValue = (dateRange: DateRange, timeRange: TimeRange) => {
+    setValue({
+      start: 'timeZone' in timeRange.start ? timeRange.start.set(toDateFields(dateRange.start)) : toCalendarDateTime(dateRange.start, timeRange.start),
+      end: 'timeZone' in timeRange.end ? timeRange.end.set(toDateFields(dateRange.end)) : toCalendarDateTime(dateRange.end, timeRange.end)
+    });
+  };
+
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-  let selectDateRange = (range: RangeValue<CalendarDate>) => {
-    if (range && value?.start && 'hour' in value.start) {
-      range = {
-        start: value.start.set(range.start),
-        end: value.end.set(range.end)
-      };
+  let setDateRange = (range: DateRange) => {
+    if (hasTime) {
+      if (range.start && range.end && timeRange?.start && timeRange?.end) {
+        commitValue(range, timeRange);
+      } else {
+        setSelectedDateRange(range);
+      }
+    } else if (range.start && range.end) {
+      setValue(range);
+    } else {
+      setSelectedDateRange(range);
+    }
+
+    if (!hasTime) {
+      setOpen(false);
+    }
+  };
+
+  let setTimeRange = (range: TimeRange) => {
+    if (dateRange?.start && dateRange?.end && range.start && range.end) {
+      commitValue(dateRange, range);
+    } else {
+      setSelectedTimeRange(range);
     }
-    setValue(range);
-    setOpen(false);
   };
 
   let validationState: ValidationState = props.validationState
@@ -64,10 +105,16 @@ export function useDateRangePickerState(props: DateRangePickerProps): DateRangeP
   return {
     value,
     setValue,
+    dateRange,
+    timeRange,
     setDate(part, date) {
-      setValue({...value, [part]: date});
+      setDateRange({...dateRange, [part]: date});
+    },
+    setTime(part, time) {
+      setTimeRange({...timeRange, [part]: time});
     },
-    selectDateRange,
+    setDateRange,
+    setTimeRange,
     isOpen,
     setOpen,
     validationState,
@@ -88,20 +135,16 @@ export function useDateRangePickerState(props: DateRangePickerProps): DateRangeP
         hourCycle: props.hourCycle
       });
 
-      // TODO: cache
-      let startFormatter = new Intl.DateTimeFormat(locale, startOptions);
+      let startFormatter = new DateFormatter(locale, startOptions);
       let endFormatter: Intl.DateTimeFormat;
       if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
-        // Use formatRange if available, as it results in shorter output when some of the fields
+        // Use formatRange, as it results in shorter output when some of the fields
         // are shared between the start and end dates (e.g. the same month).
-        if ('formatRange' in startFormatter) {
-          // Formatting will fail if the end date is before the start date. Fall back below when that happens.
-          try {
-            // @ts-ignore
-            return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone));
-          } catch (e) {
-            // ignore
-          }
+        // Formatting will fail if the end date is before the start date. Fall back below when that happens.
+        try {
+          return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone));
+        } catch (e) {
+          // ignore
         }
 
         endFormatter = startFormatter;
@@ -113,7 +156,7 @@ export function useDateRangePickerState(props: DateRangePickerProps): DateRangeP
           hourCycle: props.hourCycle
         });
 
-        endFormatter = new Intl.DateTimeFormat(locale, endOptions);
+        endFormatter = new DateFormatter(locale, endOptions);
       }
 
       return `${startFormatter.format(value.start.toDate(startTimeZone))} – ${endFormatter.format(value.end.toDate(endTimeZone))}`;
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index 389a6b75ee7..de0f22d81eb 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -23,8 +23,8 @@ export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | '
 interface FormatterOptions {
   timeZone?: string,
   hideTimeZone?: boolean,
-  granularity?: DatePickerProps['granularity'],
-  maxGranularity?: DatePickerProps['granularity'],
+  granularity?: DatePickerProps<any>['granularity'],
+  maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
   hourCycle?: 12 | 24
 }
 
diff --git a/packages/@react-types/calendar/package.json b/packages/@react-types/calendar/package.json
index 7ba7af35cea..cbbb6e87dce 100644
--- a/packages/@react-types/calendar/package.json
+++ b/packages/@react-types/calendar/package.json
@@ -10,6 +10,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@internationalized/date": "3.0.0-alpha.1",
     "@react-types/shared": "^3.1.0"
   },
   "publishConfig": {
diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts
index 618768e5c3a..254792067e2 100644
--- a/packages/@react-types/calendar/src/index.d.ts
+++ b/packages/@react-types/calendar/src/index.d.ts
@@ -10,9 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date';
 import {DOMProps, RangeValue, StyleProps, ValueBase} from '@react-types/shared';
 
-export type DateValue = string | number | Date;
+export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
+type MappedDateValue<T> =
+  T extends ZonedDateTime ? ZonedDateTime :
+  T extends CalendarDateTime ? CalendarDateTime :
+  T extends CalendarDate ? CalendarDate :
+  never;
+
 export interface CalendarPropsBase {
   timeZone?: string,
   minValue?: DateValue,
@@ -23,8 +30,8 @@ export interface CalendarPropsBase {
 }
 
 export type DateRange = RangeValue<DateValue>;
-export interface CalendarProps extends CalendarPropsBase, ValueBase<DateValue> {}
-export interface RangeCalendarProps extends CalendarPropsBase, ValueBase<DateRange> {}
+export interface CalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<T, MappedDateValue<T>> {}
+export interface RangeCalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {}
 
-export interface SpectrumCalendarProps extends CalendarProps, DOMProps, StyleProps {}
-export interface SpectrumRangeCalendarProps extends RangeCalendarProps, DOMProps, StyleProps {}
+export interface SpectrumCalendarProps<T extends DateValue> extends CalendarProps<T>, DOMProps, StyleProps {}
+export interface SpectrumRangeCalendarProps<T extends DateValue> extends RangeCalendarProps<T>, DOMProps, StyleProps {}
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index b03eeb139b1..3f647091111 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -25,42 +25,54 @@ import {
 import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date';
 
 export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
-interface DatePickerBase extends InputBase, Validation, FocusableProps, LabelableProps {
+type MappedDateValue<T> =
+  T extends ZonedDateTime ? ZonedDateTime :
+  T extends CalendarDateTime ? CalendarDateTime :
+  T extends CalendarDate ? CalendarDate :
+  never;
+
+interface DatePickerBase<T extends DateValue> extends InputBase, Validation, FocusableProps, LabelableProps {
   minValue?: DateValue,
   maxValue?: DateValue,
-  placeholderValue?: DateValue,
+  placeholderValue?: T,
   hourCycle?: 12 | 24,
-  granularity?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond',
+  granularity?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond',
   hideTimeZone?: boolean
 }
 
-export interface AriaDatePickerBaseProps extends DatePickerBase, AriaLabelingProps, DOMProps {}
+export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, DOMProps {}
 
-export interface DatePickerProps extends DatePickerBase, ValueBase<DateValue> {}
-export interface AriaDatePickerProps extends AriaDatePickerBaseProps, DatePickerProps {}
+export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T, MappedDateValue<T>> {}
+export interface AriaDatePickerProps<T extends DateValue> extends AriaDatePickerBaseProps<T>, DatePickerProps<T> {}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps extends DatePickerBase, ValueBase<DateRange> {}
-export interface AriaDateRangePickerProps extends AriaDatePickerBaseProps, DateRangePickerProps {}
+export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {}
+export interface AriaDateRangePickerProps<T extends DateValue> extends AriaDatePickerBaseProps<T>, DateRangePickerProps<T> {}
 
-interface SpectrumDatePickerBase extends AriaDatePickerBaseProps, SpectrumLabelableProps, StyleProps {
+interface SpectrumDatePickerBase<T extends DateValue> extends AriaDatePickerBaseProps<T>, SpectrumLabelableProps, StyleProps {
   isQuiet?: boolean,
   showFormatHelpText?: boolean
 }
 
-export interface SpectrumDatePickerProps extends DatePickerProps, SpectrumDatePickerBase {}
-export interface SpectrumDateRangePickerProps extends DateRangePickerProps, SpectrumDatePickerBase {}
+export interface SpectrumDatePickerProps<T extends DateValue> extends DatePickerProps<T>, SpectrumDatePickerBase<T> {}
+export interface SpectrumDateRangePickerProps<T extends DateValue> extends DateRangePickerProps<T>, SpectrumDatePickerBase<T> {}
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
-interface TimePickerProps extends InputBase, Validation, FocusableProps, LabelableProps, ValueBase<TimeValue> {
+type MappedTimeValue<T> =
+  T extends ZonedDateTime ? ZonedDateTime :
+  T extends CalendarDateTime ? CalendarDateTime :
+  T extends Time ? Time :
+  never;
+
+export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation, FocusableProps, LabelableProps, ValueBase<T, MappedTimeValue<T>> {
   hourCycle?: 12 | 24,
   granularity?: 'hour' | 'minute' | 'second' | 'millisecond',
   hideTimeZone?: boolean,
-  placeholderValue?: TimeValue,
+  placeholderValue?: T,
   minValue?: TimeValue,
   maxValue?: TimeValue
 }
 
-interface SpectrumTimePickerProps extends TimePickerProps, SpectrumLabelableProps, DOMProps, StyleProps {
+export interface SpectrumTimePickerProps<T extends TimeValue> extends TimePickerProps<T>, SpectrumLabelableProps, DOMProps, StyleProps {
   isQuiet?: boolean
 }
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index 98cd12d8954..0634d303bf9 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -29,13 +29,13 @@ export interface InputBase {
   isReadOnly?: boolean
 }
 
-export interface ValueBase<T> {
+export interface ValueBase<T, C = T> {
   /** The current value (controlled). */
   value?: T,
   /** The default value (uncontrolled). */
   defaultValue?: T,
   /** Handler that is called when the value changes. */
-  onChange?: (value: T) => void
+  onChange?: (value: C) => void
 }
 
 export interface TextInputBase {

From 63e59f3da98ecdd2a09c827978a0d3a54643b62c Mon Sep 17 00:00:00 2001
From: Richard Geraghty <rgeraght@adobe.com>
Date: Fri, 27 Aug 2021 15:15:19 -0700
Subject: [PATCH 2/2] Latest Translations (#2255)

* sr-sp for new components

* Translations for new components

* Remaining translations

Co-authored-by: Danni <drobinson@livefyre.com>
---
 packages/@react-aria/datepicker/intl/el-GR.json    |  2 +-
 packages/@react-aria/datepicker/intl/fi-FI.json    |  2 +-
 packages/@react-aria/datepicker/intl/hr-HR.json    |  2 +-
 packages/@react-aria/datepicker/intl/it-IT.json    |  2 +-
 packages/@react-aria/datepicker/intl/ja-JP.json    |  2 +-
 packages/@react-aria/datepicker/intl/lt-LT.json    |  2 +-
 packages/@react-aria/datepicker/intl/nl-NL.json    |  2 +-
 packages/@react-aria/datepicker/intl/pt-BR.json    |  2 +-
 packages/@react-aria/datepicker/intl/pt-PT.json    |  2 ++
 packages/@react-aria/datepicker/intl/ro-RO.json    |  2 +-
 packages/@react-aria/datepicker/intl/ru-RU.json    |  2 +-
 packages/@react-aria/datepicker/intl/sr-SP.json    |  4 ++--
 packages/@react-aria/datepicker/intl/tr-TR.json    |  2 +-
 packages/@react-aria/datepicker/intl/uk-UA.json    |  2 +-
 packages/@react-aria/datepicker/intl/zh-CN.json    |  2 +-
 packages/@react-aria/datepicker/intl/zh-TW.json    |  2 +-
 packages/@react-aria/grid/intl/ar-AE.json          |  6 ++++++
 packages/@react-aria/grid/intl/bg-BG.json          |  6 ++++++
 packages/@react-aria/grid/intl/cs-CZ.json          |  6 ++++++
 packages/@react-aria/grid/intl/da-DK.json          |  6 ++++++
 packages/@react-aria/grid/intl/de-DE.json          |  6 ++++++
 packages/@react-aria/grid/intl/el-GR.json          |  6 ++++++
 packages/@react-aria/grid/intl/es-ES.json          |  6 ++++++
 packages/@react-aria/grid/intl/et-EE.json          |  6 ++++++
 packages/@react-aria/grid/intl/fi-FI.json          |  6 ++++++
 packages/@react-aria/grid/intl/fr-FR.json          |  6 ++++++
 packages/@react-aria/grid/intl/he-IL.json          |  6 ++++++
 packages/@react-aria/grid/intl/hr-HR.json          |  6 ++++++
 packages/@react-aria/grid/intl/hu-HU.json          |  6 ++++++
 packages/@react-aria/grid/intl/it-IT.json          |  6 ++++++
 packages/@react-aria/grid/intl/ja-JP.json          |  6 ++++++
 packages/@react-aria/grid/intl/ko-KR.json          |  6 ++++++
 packages/@react-aria/grid/intl/lt-LT.json          |  6 ++++++
 packages/@react-aria/grid/intl/lv-LV.json          |  6 ++++++
 packages/@react-aria/grid/intl/nb-NO.json          |  6 ++++++
 packages/@react-aria/grid/intl/nl-NL.json          |  6 ++++++
 packages/@react-aria/grid/intl/pl-PL.json          |  6 ++++++
 packages/@react-aria/grid/intl/pt-BR.json          |  6 ++++++
 packages/@react-aria/grid/intl/pt-PT.json          |  6 ++++++
 packages/@react-aria/grid/intl/ro-RO.json          |  6 ++++++
 packages/@react-aria/grid/intl/ru-RU.json          |  6 ++++++
 packages/@react-aria/grid/intl/sk-SK.json          |  6 ++++++
 packages/@react-aria/grid/intl/sl-SI.json          |  6 ++++++
 packages/@react-aria/grid/intl/sr-SP.json          |  6 ++++++
 packages/@react-aria/grid/intl/sv-SE.json          |  6 ++++++
 packages/@react-aria/grid/intl/tr-TR.json          |  6 ++++++
 packages/@react-aria/grid/intl/uk-UA.json          |  6 ++++++
 packages/@react-aria/grid/intl/zh-CN.json          |  6 ++++++
 packages/@react-aria/grid/intl/zh-TW.json          |  6 ++++++
 packages/@react-aria/table/intl/ar-AE.json         |  9 +++++++--
 packages/@react-aria/table/intl/bg-BG.json         |  9 +++++++--
 packages/@react-aria/table/intl/cs-CZ.json         |  9 +++++++--
 packages/@react-aria/table/intl/da-DK.json         |  9 +++++++--
 packages/@react-aria/table/intl/de-DE.json         |  9 +++++++--
 packages/@react-aria/table/intl/el-GR.json         |  9 +++++++--
 packages/@react-aria/table/intl/es-ES.json         |  9 +++++++--
 packages/@react-aria/table/intl/et-EE.json         |  7 ++++++-
 packages/@react-aria/table/intl/fi-FI.json         |  9 +++++++--
 packages/@react-aria/table/intl/fr-FR.json         |  9 +++++++--
 packages/@react-aria/table/intl/he-IL.json         |  9 +++++++--
 packages/@react-aria/table/intl/hr-HR.json         |  9 +++++++--
 packages/@react-aria/table/intl/hu-HU.json         |  9 +++++++--
 packages/@react-aria/table/intl/it-IT.json         |  9 +++++++--
 packages/@react-aria/table/intl/ja-JP.json         |  9 +++++++--
 packages/@react-aria/table/intl/ko-KR.json         |  9 +++++++--
 packages/@react-aria/table/intl/lt-LT.json         | 11 ++++++++---
 packages/@react-aria/table/intl/lv-LV.json         |  7 ++++++-
 packages/@react-aria/table/intl/nb-NO.json         |  9 +++++++--
 packages/@react-aria/table/intl/nl-NL.json         |  9 +++++++--
 packages/@react-aria/table/intl/pl-PL.json         |  9 +++++++--
 packages/@react-aria/table/intl/pt-BR.json         |  9 +++++++--
 packages/@react-aria/table/intl/pt-PT.json         |  7 ++++++-
 packages/@react-aria/table/intl/ro-RO.json         |  9 +++++++--
 packages/@react-aria/table/intl/ru-RU.json         |  9 +++++++--
 packages/@react-aria/table/intl/sk-SK.json         |  7 ++++++-
 packages/@react-aria/table/intl/sl-SI.json         |  9 +++++++--
 packages/@react-aria/table/intl/sr-SP.json         |  9 +++++++--
 packages/@react-aria/table/intl/sv-SE.json         |  9 +++++++--
 packages/@react-aria/table/intl/tr-TR.json         |  9 +++++++--
 packages/@react-aria/table/intl/uk-UA.json         |  9 +++++++--
 packages/@react-aria/table/intl/zh-CN.json         |  9 +++++++--
 packages/@react-aria/table/intl/zh-TW.json         |  9 +++++++--
 packages/@react-spectrum/actionbar/intl/ar-AE.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/bg-BG.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/cs-CZ.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/da-DK.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/de-DE.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/el-GR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/es-ES.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/et-EE.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/fi-FI.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/fr-FR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/he-IL.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/hr-HR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/hu-HU.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/it-IT.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/ja-JP.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/ko-KR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/lt-LT.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/lv-LV.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/nb-NO.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/nl-NL.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/pl-PL.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/pt-BR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/pt-PT.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/ro-RO.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/ru-RU.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/sk-SK.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/sl-SI.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/sr-SP.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/sv-SE.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/tr-TR.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/uk-UA.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/zh-CN.json |  7 +++++++
 packages/@react-spectrum/actionbar/intl/zh-TW.json |  7 +++++++
 packages/@react-spectrum/list/intl/da-DK.json      |  4 ++--
 packages/@react-spectrum/list/intl/ko-KR.json      |  4 ++--
 packages/@react-spectrum/list/intl/sl-SI.json      |  4 ++--
 packages/@react-spectrum/list/intl/zh-TW.json      |  2 +-
 packages/@react-spectrum/menu/intl/ar-AE.json      |  3 +++
 packages/@react-spectrum/menu/intl/bg-BG.json      |  3 +++
 packages/@react-spectrum/menu/intl/cs-CZ.json      |  3 +++
 packages/@react-spectrum/menu/intl/da-DK.json      |  3 +++
 packages/@react-spectrum/menu/intl/de-DE.json      |  4 ++--
 packages/@react-spectrum/menu/intl/el-GR.json      |  3 +++
 packages/@react-spectrum/menu/intl/es-ES.json      |  3 +++
 packages/@react-spectrum/menu/intl/et-EE.json      |  3 +++
 packages/@react-spectrum/menu/intl/fi-FI.json      |  3 +++
 packages/@react-spectrum/menu/intl/fr-FR.json      |  3 +++
 packages/@react-spectrum/menu/intl/he-IL.json      |  3 +++
 packages/@react-spectrum/menu/intl/hr-HR.json      |  3 +++
 packages/@react-spectrum/menu/intl/hu-HU.json      |  3 +++
 packages/@react-spectrum/menu/intl/it-IT.json      |  3 +++
 packages/@react-spectrum/menu/intl/ja-JP.json      |  3 +++
 packages/@react-spectrum/menu/intl/ko-KR.json      |  3 +++
 packages/@react-spectrum/menu/intl/lt-LT.json      |  3 +++
 packages/@react-spectrum/menu/intl/lv-LV.json      |  3 +++
 packages/@react-spectrum/menu/intl/nb-NO.json      |  3 +++
 packages/@react-spectrum/menu/intl/nl-NL.json      |  3 +++
 packages/@react-spectrum/menu/intl/pl-PL.json      |  3 +++
 packages/@react-spectrum/menu/intl/pt-BR.json      |  3 +++
 packages/@react-spectrum/menu/intl/pt-PT.json      |  3 +++
 packages/@react-spectrum/menu/intl/ro-RO.json      |  3 +++
 packages/@react-spectrum/menu/intl/ru-RU.json      |  3 +++
 packages/@react-spectrum/menu/intl/sk-SK.json      |  3 +++
 packages/@react-spectrum/menu/intl/sl-SI.json      |  3 +++
 packages/@react-spectrum/menu/intl/sr-SP.json      |  3 +++
 packages/@react-spectrum/menu/intl/sv-SE.json      |  3 +++
 packages/@react-spectrum/menu/intl/tr-TR.json      |  3 +++
 packages/@react-spectrum/menu/intl/uk-UA.json      |  3 +++
 packages/@react-spectrum/menu/intl/zh-CN.json      |  3 +++
 packages/@react-spectrum/menu/intl/zh-TW.json      |  3 +++
 152 files changed, 780 insertions(+), 88 deletions(-)
 create mode 100644 packages/@react-aria/grid/intl/ar-AE.json
 create mode 100644 packages/@react-aria/grid/intl/bg-BG.json
 create mode 100644 packages/@react-aria/grid/intl/cs-CZ.json
 create mode 100644 packages/@react-aria/grid/intl/da-DK.json
 create mode 100644 packages/@react-aria/grid/intl/de-DE.json
 create mode 100644 packages/@react-aria/grid/intl/el-GR.json
 create mode 100644 packages/@react-aria/grid/intl/es-ES.json
 create mode 100644 packages/@react-aria/grid/intl/et-EE.json
 create mode 100644 packages/@react-aria/grid/intl/fi-FI.json
 create mode 100644 packages/@react-aria/grid/intl/fr-FR.json
 create mode 100644 packages/@react-aria/grid/intl/he-IL.json
 create mode 100644 packages/@react-aria/grid/intl/hr-HR.json
 create mode 100644 packages/@react-aria/grid/intl/hu-HU.json
 create mode 100644 packages/@react-aria/grid/intl/it-IT.json
 create mode 100644 packages/@react-aria/grid/intl/ja-JP.json
 create mode 100644 packages/@react-aria/grid/intl/ko-KR.json
 create mode 100644 packages/@react-aria/grid/intl/lt-LT.json
 create mode 100644 packages/@react-aria/grid/intl/lv-LV.json
 create mode 100644 packages/@react-aria/grid/intl/nb-NO.json
 create mode 100644 packages/@react-aria/grid/intl/nl-NL.json
 create mode 100644 packages/@react-aria/grid/intl/pl-PL.json
 create mode 100644 packages/@react-aria/grid/intl/pt-BR.json
 create mode 100644 packages/@react-aria/grid/intl/pt-PT.json
 create mode 100644 packages/@react-aria/grid/intl/ro-RO.json
 create mode 100644 packages/@react-aria/grid/intl/ru-RU.json
 create mode 100644 packages/@react-aria/grid/intl/sk-SK.json
 create mode 100644 packages/@react-aria/grid/intl/sl-SI.json
 create mode 100644 packages/@react-aria/grid/intl/sr-SP.json
 create mode 100644 packages/@react-aria/grid/intl/sv-SE.json
 create mode 100644 packages/@react-aria/grid/intl/tr-TR.json
 create mode 100644 packages/@react-aria/grid/intl/uk-UA.json
 create mode 100644 packages/@react-aria/grid/intl/zh-CN.json
 create mode 100644 packages/@react-aria/grid/intl/zh-TW.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/ar-AE.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/bg-BG.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/cs-CZ.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/da-DK.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/de-DE.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/el-GR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/es-ES.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/et-EE.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/fi-FI.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/fr-FR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/he-IL.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/hr-HR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/hu-HU.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/it-IT.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/ja-JP.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/ko-KR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/lt-LT.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/lv-LV.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/nb-NO.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/nl-NL.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/pl-PL.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/pt-BR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/pt-PT.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/ro-RO.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/ru-RU.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/sk-SK.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/sl-SI.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/sr-SP.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/sv-SE.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/tr-TR.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/uk-UA.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/zh-CN.json
 create mode 100644 packages/@react-spectrum/actionbar/intl/zh-TW.json
 create mode 100644 packages/@react-spectrum/menu/intl/ar-AE.json
 create mode 100644 packages/@react-spectrum/menu/intl/bg-BG.json
 create mode 100644 packages/@react-spectrum/menu/intl/cs-CZ.json
 create mode 100644 packages/@react-spectrum/menu/intl/da-DK.json
 create mode 100644 packages/@react-spectrum/menu/intl/el-GR.json
 create mode 100644 packages/@react-spectrum/menu/intl/es-ES.json
 create mode 100644 packages/@react-spectrum/menu/intl/et-EE.json
 create mode 100644 packages/@react-spectrum/menu/intl/fi-FI.json
 create mode 100644 packages/@react-spectrum/menu/intl/fr-FR.json
 create mode 100644 packages/@react-spectrum/menu/intl/he-IL.json
 create mode 100644 packages/@react-spectrum/menu/intl/hr-HR.json
 create mode 100644 packages/@react-spectrum/menu/intl/hu-HU.json
 create mode 100644 packages/@react-spectrum/menu/intl/it-IT.json
 create mode 100644 packages/@react-spectrum/menu/intl/ja-JP.json
 create mode 100644 packages/@react-spectrum/menu/intl/ko-KR.json
 create mode 100644 packages/@react-spectrum/menu/intl/lt-LT.json
 create mode 100644 packages/@react-spectrum/menu/intl/lv-LV.json
 create mode 100644 packages/@react-spectrum/menu/intl/nb-NO.json
 create mode 100644 packages/@react-spectrum/menu/intl/nl-NL.json
 create mode 100644 packages/@react-spectrum/menu/intl/pl-PL.json
 create mode 100644 packages/@react-spectrum/menu/intl/pt-BR.json
 create mode 100644 packages/@react-spectrum/menu/intl/pt-PT.json
 create mode 100644 packages/@react-spectrum/menu/intl/ro-RO.json
 create mode 100644 packages/@react-spectrum/menu/intl/ru-RU.json
 create mode 100644 packages/@react-spectrum/menu/intl/sk-SK.json
 create mode 100644 packages/@react-spectrum/menu/intl/sl-SI.json
 create mode 100644 packages/@react-spectrum/menu/intl/sr-SP.json
 create mode 100644 packages/@react-spectrum/menu/intl/sv-SE.json
 create mode 100644 packages/@react-spectrum/menu/intl/tr-TR.json
 create mode 100644 packages/@react-spectrum/menu/intl/uk-UA.json
 create mode 100644 packages/@react-spectrum/menu/intl/zh-CN.json
 create mode 100644 packages/@react-spectrum/menu/intl/zh-TW.json

diff --git a/packages/@react-aria/datepicker/intl/el-GR.json b/packages/@react-aria/datepicker/intl/el-GR.json
index bff4505c7dd..5bbe8b59760 100644
--- a/packages/@react-aria/datepicker/intl/el-GR.json
+++ b/packages/@react-aria/datepicker/intl/el-GR.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Ημερολόγιο",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} έως {end, date, long}",
+  "currentDateRange": "{start, date, long} ως {end, date, long}",
   "date": "Ημερομηνία",
   "dateRange": "Εύρος ημερομηνιών",
   "day": "Ημέρα",
diff --git a/packages/@react-aria/datepicker/intl/fi-FI.json b/packages/@react-aria/datepicker/intl/fi-FI.json
index 5a0d7679066..d0e00738ef9 100644
--- a/packages/@react-aria/datepicker/intl/fi-FI.json
+++ b/packages/@react-aria/datepicker/intl/fi-FI.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Kalenteri",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long}-{end, date, long}",
+  "currentDateRange": "{start, date, long}–{end, date, long}",
   "date": "Päivämäärä",
   "dateRange": "Päivämääräalue",
   "day": "Päivä",
diff --git a/packages/@react-aria/datepicker/intl/hr-HR.json b/packages/@react-aria/datepicker/intl/hr-HR.json
index ca1bcb5ad0b..a88a15d755c 100644
--- a/packages/@react-aria/datepicker/intl/hr-HR.json
+++ b/packages/@react-aria/datepicker/intl/hr-HR.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Kalendar",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "od {start, date, long} do {end, date, long}",
+  "currentDateRange": "{start, date, long} do {end, date, long}",
   "date": "Datum",
   "dateRange": "Raspon datuma",
   "day": "Dan",
diff --git a/packages/@react-aria/datepicker/intl/it-IT.json b/packages/@react-aria/datepicker/intl/it-IT.json
index 594da29ad5b..d367e7c26b0 100644
--- a/packages/@react-aria/datepicker/intl/it-IT.json
+++ b/packages/@react-aria/datepicker/intl/it-IT.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Calendario",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} a {end, date, long}",
+  "currentDateRange": "Da {start, date, long} a {end, date, long}",
   "date": "Data",
   "dateRange": "Intervallo date",
   "day": "Giorno",
diff --git a/packages/@react-aria/datepicker/intl/ja-JP.json b/packages/@react-aria/datepicker/intl/ja-JP.json
index aba0c3b09ad..65930208806 100644
--- a/packages/@react-aria/datepicker/intl/ja-JP.json
+++ b/packages/@react-aria/datepicker/intl/ja-JP.json
@@ -1,7 +1,7 @@
 {
   "calendar": "カレンダー",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} ~ {end, date, long}",
+  "currentDateRange": "{start, date, long} ～ {end, date, long}",
   "date": "日付",
   "dateRange": "日付範囲",
   "day": "日",
diff --git a/packages/@react-aria/datepicker/intl/lt-LT.json b/packages/@react-aria/datepicker/intl/lt-LT.json
index 4704a6ae3eb..8adda9f95c1 100644
--- a/packages/@react-aria/datepicker/intl/lt-LT.json
+++ b/packages/@react-aria/datepicker/intl/lt-LT.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Kalendorius",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "nuo {start, date, long} iki {end, date, long}",
+  "currentDateRange": "Nuo {start, date, long} iki {end, date, long}",
   "date": "Data",
   "dateRange": "Datų intervalas",
   "day": "Diena",
diff --git a/packages/@react-aria/datepicker/intl/nl-NL.json b/packages/@react-aria/datepicker/intl/nl-NL.json
index b4624a174d1..6b37df89d27 100644
--- a/packages/@react-aria/datepicker/intl/nl-NL.json
+++ b/packages/@react-aria/datepicker/intl/nl-NL.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Kalender",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} tot {end, date, long}",
+  "currentDateRange": "{start, date, long} t/m {end, date, long}",
   "date": "Datum",
   "dateRange": "Datumbereik",
   "day": "Dag",
diff --git a/packages/@react-aria/datepicker/intl/pt-BR.json b/packages/@react-aria/datepicker/intl/pt-BR.json
index a1aaacf8466..7e112f7f363 100644
--- a/packages/@react-aria/datepicker/intl/pt-BR.json
+++ b/packages/@react-aria/datepicker/intl/pt-BR.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Calendário",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} para {end, date, long}",
+  "currentDateRange": "{start, date, long} a {end, date, long}",
   "date": "Data",
   "dateRange": "Intervalo de datas",
   "day": "Dia",
diff --git a/packages/@react-aria/datepicker/intl/pt-PT.json b/packages/@react-aria/datepicker/intl/pt-PT.json
index a854e6ff374..30cd436bfa3 100644
--- a/packages/@react-aria/datepicker/intl/pt-PT.json
+++ b/packages/@react-aria/datepicker/intl/pt-PT.json
@@ -1,5 +1,7 @@
 {
   "calendar": "Calendário",
+  "currentDate": "{date, date, full}",
+  "currentDateRange": "{start, date, long} a {end, date, long}",
   "date": "Data",
   "dateRange": "Intervalo de datas",
   "day": "Dia",
diff --git a/packages/@react-aria/datepicker/intl/ro-RO.json b/packages/@react-aria/datepicker/intl/ro-RO.json
index 68433d493b2..1cec0d1d2c1 100644
--- a/packages/@react-aria/datepicker/intl/ro-RO.json
+++ b/packages/@react-aria/datepicker/intl/ro-RO.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Calendar",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} la {end, date, long}",
+  "currentDateRange": "{start, date, long} - {end, date, long}",
   "date": "Dată",
   "dateRange": "Raza datei",
   "day": "Zi",
diff --git a/packages/@react-aria/datepicker/intl/ru-RU.json b/packages/@react-aria/datepicker/intl/ru-RU.json
index 06fcd8a50ed..b73297e27e6 100644
--- a/packages/@react-aria/datepicker/intl/ru-RU.json
+++ b/packages/@react-aria/datepicker/intl/ru-RU.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Календарь",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} до {end, date, long}",
+  "currentDateRange": "{start, date, long} – {end, date, long}",
   "date": "Дата",
   "dateRange": "Диапазон дат",
   "day": "День",
diff --git a/packages/@react-aria/datepicker/intl/sr-SP.json b/packages/@react-aria/datepicker/intl/sr-SP.json
index d47021cb40d..541b9c030a2 100644
--- a/packages/@react-aria/datepicker/intl/sr-SP.json
+++ b/packages/@react-aria/datepicker/intl/sr-SP.json
@@ -1,13 +1,13 @@
 {
   "calendar": "Kalendar",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "od {start, date, long} do {end, date, long}",
+  "currentDateRange": "{start, date, long} do {end, date, long}",
   "date": "Datum",
   "dateRange": "Opseg datuma",
   "day": "Dan",
   "dayPeriod": "Dnevni period",
   "endDate": "Datum završetka",
-  "era": "Eра",
+  "era": "Era",
   "hour": "Čas",
   "minute": "Minut",
   "month": "Mesec",
diff --git a/packages/@react-aria/datepicker/intl/tr-TR.json b/packages/@react-aria/datepicker/intl/tr-TR.json
index 88191115e03..1bf9106190f 100644
--- a/packages/@react-aria/datepicker/intl/tr-TR.json
+++ b/packages/@react-aria/datepicker/intl/tr-TR.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Takvim",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long} ila {end, date, long}",
+  "currentDateRange": "{start, date, long} - {end, date, long}",
   "date": "Tarih",
   "dateRange": "Tarih Aralığı",
   "day": "Gün",
diff --git a/packages/@react-aria/datepicker/intl/uk-UA.json b/packages/@react-aria/datepicker/intl/uk-UA.json
index 3f45d07ed1a..5a03be41e9b 100644
--- a/packages/@react-aria/datepicker/intl/uk-UA.json
+++ b/packages/@react-aria/datepicker/intl/uk-UA.json
@@ -1,7 +1,7 @@
 {
   "calendar": "Календар",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "від {start, date, long} до {end, date, long}",
+  "currentDateRange": "Від {start, date, long} до {end, date, long}",
   "date": "Дата",
   "dateRange": "Діапазон дат",
   "day": "День",
diff --git a/packages/@react-aria/datepicker/intl/zh-CN.json b/packages/@react-aria/datepicker/intl/zh-CN.json
index 3ed6a9ebf5e..a50f397ec30 100644
--- a/packages/@react-aria/datepicker/intl/zh-CN.json
+++ b/packages/@react-aria/datepicker/intl/zh-CN.json
@@ -1,7 +1,7 @@
 {
   "calendar": "日历",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long}至{end, date, long}",
+  "currentDateRange": "{start, date, long} 至 {end, date, long}",
   "date": "日期",
   "dateRange": "日期范围",
   "day": "日",
diff --git a/packages/@react-aria/datepicker/intl/zh-TW.json b/packages/@react-aria/datepicker/intl/zh-TW.json
index 250ab407353..6d38628aca2 100644
--- a/packages/@react-aria/datepicker/intl/zh-TW.json
+++ b/packages/@react-aria/datepicker/intl/zh-TW.json
@@ -1,7 +1,7 @@
 {
   "calendar": "日曆",
   "currentDate": "{date, date, full}",
-  "currentDateRange": "{start, date, long}至{end, date, long}",
+  "currentDateRange": "{start, date, long}至 {end, date, long}",
   "date": "日期",
   "dateRange": "日期範圍",
   "day": "日",
diff --git a/packages/@react-aria/grid/intl/ar-AE.json b/packages/@react-aria/grid/intl/ar-AE.json
new file mode 100644
index 00000000000..175a5c33ccd
--- /dev/null
+++ b/packages/@react-aria/grid/intl/ar-AE.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} غير المحدد",
+  "selectedAll": "جميع العناصر المحددة.",
+  "selectedCount": "{count, plural, =0 {لم يتم تحديد عناصر} one {# عنصر محدد} other {# عنصر محدد}}.",
+  "selectedItem": "{item} المحدد"
+}
diff --git a/packages/@react-aria/grid/intl/bg-BG.json b/packages/@react-aria/grid/intl/bg-BG.json
new file mode 100644
index 00000000000..1de6eb8c596
--- /dev/null
+++ b/packages/@react-aria/grid/intl/bg-BG.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} не е избран.",
+  "selectedAll": "Всички елементи са избрани.",
+  "selectedCount": "{count, plural, =0 {Няма избрани елементи} one {# избран елемент} other {# избрани елементи}}.",
+  "selectedItem": "{item} избран."
+}
diff --git a/packages/@react-aria/grid/intl/cs-CZ.json b/packages/@react-aria/grid/intl/cs-CZ.json
new file mode 100644
index 00000000000..187db897353
--- /dev/null
+++ b/packages/@react-aria/grid/intl/cs-CZ.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Položka {item} není vybrána.",
+  "selectedAll": "Vybrány všechny položky.",
+  "selectedCount": "{count, plural, =0 {Nevybrány žádné položky} one {Vybrána # položka} other {Vybráno # položek}}.",
+  "selectedItem": "Vybrána položka {item}."
+}
diff --git a/packages/@react-aria/grid/intl/da-DK.json b/packages/@react-aria/grid/intl/da-DK.json
new file mode 100644
index 00000000000..ab64daafc25
--- /dev/null
+++ b/packages/@react-aria/grid/intl/da-DK.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} ikke valgt.",
+  "selectedAll": "Alle elementer valgt.",
+  "selectedCount": "{count, plural, =0 {Ingen elementer valgt} one {# element valgt} other {# elementer valgt}}.",
+  "selectedItem": "{item} valgt."
+}
diff --git a/packages/@react-aria/grid/intl/de-DE.json b/packages/@react-aria/grid/intl/de-DE.json
new file mode 100644
index 00000000000..edcec880fc2
--- /dev/null
+++ b/packages/@react-aria/grid/intl/de-DE.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} nicht ausgewählt.",
+  "selectedAll": "Alle Elemente ausgewählt.",
+  "selectedCount": "{count, plural, =0 {Keine Elemente ausgewählt} one {# Element ausgewählt} other {# Elemente ausgewählt}}.",
+  "selectedItem": "{item} ausgewählt."
+}
diff --git a/packages/@react-aria/grid/intl/el-GR.json b/packages/@react-aria/grid/intl/el-GR.json
new file mode 100644
index 00000000000..3001ed51f47
--- /dev/null
+++ b/packages/@react-aria/grid/intl/el-GR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Δεν επιλέχθηκε το στοιχείο {item}.",
+  "selectedAll": "Επιλέχθηκαν όλα τα στοιχεία.",
+  "selectedCount": "{count, plural, =0 {Δεν επιλέχθηκαν στοιχεία} one {Επιλέχθηκε # στοιχείο} other {Επιλέχθηκαν # στοιχεία}}.",
+  "selectedItem": "Επιλέχθηκε το στοιχείο {item}."
+}
diff --git a/packages/@react-aria/grid/intl/es-ES.json b/packages/@react-aria/grid/intl/es-ES.json
new file mode 100644
index 00000000000..1541894836e
--- /dev/null
+++ b/packages/@react-aria/grid/intl/es-ES.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} no seleccionado.",
+  "selectedAll": "Todos los elementos seleccionados.",
+  "selectedCount": "{count, plural, =0 {Ningún elemento seleccionado} one {# elemento seleccionado} other {# elementos seleccionados}}.",
+  "selectedItem": "{item} seleccionado."
+}
diff --git a/packages/@react-aria/grid/intl/et-EE.json b/packages/@react-aria/grid/intl/et-EE.json
new file mode 100644
index 00000000000..3c80e99d2d8
--- /dev/null
+++ b/packages/@react-aria/grid/intl/et-EE.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} pole valitud.",
+  "selectedAll": "Kõik üksused valitud.",
+  "selectedCount": "{count, plural, =0 {Üksusi pole valitud} one {# üksus valitud} other {# üksust valitud}}.",
+  "selectedItem": "{item} valitud."
+}
diff --git a/packages/@react-aria/grid/intl/fi-FI.json b/packages/@react-aria/grid/intl/fi-FI.json
new file mode 100644
index 00000000000..b15b140a5a1
--- /dev/null
+++ b/packages/@react-aria/grid/intl/fi-FI.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Kohdetta {item} ei valittu.",
+  "selectedAll": "Kaikki kohteet valittu.",
+  "selectedCount": "{count, plural, =0 {Ei yhtään kohdetta valittu} one {# kohde valittu} other {# kohdetta valittu}}.",
+  "selectedItem": "{item} valittu."
+}
diff --git a/packages/@react-aria/grid/intl/fr-FR.json b/packages/@react-aria/grid/intl/fr-FR.json
new file mode 100644
index 00000000000..824421e0d19
--- /dev/null
+++ b/packages/@react-aria/grid/intl/fr-FR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} non sélectionné.",
+  "selectedAll": "Tous les éléments sélectionnés.",
+  "selectedCount": "{count, plural, =0 {Aucun élément sélectionné} one {# élément sélectionné} other {# éléments sélectionnés}}.",
+  "selectedItem": "{item} sélectionné."
+}
diff --git a/packages/@react-aria/grid/intl/he-IL.json b/packages/@react-aria/grid/intl/he-IL.json
new file mode 100644
index 00000000000..7599c5b2212
--- /dev/null
+++ b/packages/@react-aria/grid/intl/he-IL.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} לא נבחר.",
+  "selectedAll": "כל הפריטים נבחרו.",
+  "selectedCount": "{count, plural, =0 {לא נבחרו פריטים} one {פריט # נבחר} other {# פריטים נבחרו}}.",
+  "selectedItem": "{item} נבחר."
+}
diff --git a/packages/@react-aria/grid/intl/hr-HR.json b/packages/@react-aria/grid/intl/hr-HR.json
new file mode 100644
index 00000000000..cdf4ab876cf
--- /dev/null
+++ b/packages/@react-aria/grid/intl/hr-HR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Stavka {item} nije odabrana.",
+  "selectedAll": "Odabrane su sve stavke.",
+  "selectedCount": "{count, plural, =0 {Nije odabrana nijedna stavka} one {Odabrana je # stavka} other {Odabrano je # stavki}}.",
+  "selectedItem": "Stavka {item} je odabrana."
+}
diff --git a/packages/@react-aria/grid/intl/hu-HU.json b/packages/@react-aria/grid/intl/hu-HU.json
new file mode 100644
index 00000000000..57e781dedf5
--- /dev/null
+++ b/packages/@react-aria/grid/intl/hu-HU.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} nincs kijelölve.",
+  "selectedAll": "Az összes elem kijelölve.",
+  "selectedCount": "{count, plural, =0 {Egy elem sincs kijelölve} one {# elem kijelölve} other {# elem kijelölve}}.",
+  "selectedItem": "{item} kijelölve."
+}
diff --git a/packages/@react-aria/grid/intl/it-IT.json b/packages/@react-aria/grid/intl/it-IT.json
new file mode 100644
index 00000000000..327a14778e7
--- /dev/null
+++ b/packages/@react-aria/grid/intl/it-IT.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} non selezionato.",
+  "selectedAll": "Tutti gli elementi selezionati.",
+  "selectedCount": "{count, plural, =0 {Nessun elemento selezionato} one {# elemento selezionato} other {# elementi selezionati}}.",
+  "selectedItem": "{item} selezionato."
+}
diff --git a/packages/@react-aria/grid/intl/ja-JP.json b/packages/@react-aria/grid/intl/ja-JP.json
new file mode 100644
index 00000000000..dfa1e27ce5a
--- /dev/null
+++ b/packages/@react-aria/grid/intl/ja-JP.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} が選択されていません。",
+  "selectedAll": "すべての項目を選択しました。",
+  "selectedCount": "{count, plural, =0 {項目が選択されていません} one {# 項目を選択しました} other {# 項目を選択しました}}。",
+  "selectedItem": "{item} を選択しました。"
+}
diff --git a/packages/@react-aria/grid/intl/ko-KR.json b/packages/@react-aria/grid/intl/ko-KR.json
new file mode 100644
index 00000000000..7e48efba28d
--- /dev/null
+++ b/packages/@react-aria/grid/intl/ko-KR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item}이(가) 선택되지 않았습니다.",
+  "selectedAll": "모든 항목이 선택되었습니다.",
+  "selectedCount": "{count, plural, =0 {선택된 항목이 없습니다} one {#개 항목이 선택되었습니다} other {#개 항목이 선택되었습니다}}.",
+  "selectedItem": "{item}이(가) 선택되었습니다."
+}
diff --git a/packages/@react-aria/grid/intl/lt-LT.json b/packages/@react-aria/grid/intl/lt-LT.json
new file mode 100644
index 00000000000..be938b790fa
--- /dev/null
+++ b/packages/@react-aria/grid/intl/lt-LT.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} nepasirinkta.",
+  "selectedAll": "Pasirinkti visi elementai.",
+  "selectedCount": "{count, plural, =0 {Nepasirinktas nė vienas elementas} one {Pasirinktas # elementas} other {Pasirinkta elementų: #}}.",
+  "selectedItem": "Pasirinkta: {item}."
+}
diff --git a/packages/@react-aria/grid/intl/lv-LV.json b/packages/@react-aria/grid/intl/lv-LV.json
new file mode 100644
index 00000000000..71c35acaaeb
--- /dev/null
+++ b/packages/@react-aria/grid/intl/lv-LV.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Vienums {item} nav atlasīts.",
+  "selectedAll": "Atlasīti visi vienumi.",
+  "selectedCount": "{count, plural, =0 {Nav atlasīts neviens vienums} one {Atlasīto vienumu skaits: #} other {Atlasīto vienumu skaits: #}}.",
+  "selectedItem": "Atlasīts vienums {item}."
+}
diff --git a/packages/@react-aria/grid/intl/nb-NO.json b/packages/@react-aria/grid/intl/nb-NO.json
new file mode 100644
index 00000000000..74e63716693
--- /dev/null
+++ b/packages/@react-aria/grid/intl/nb-NO.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} er ikke valgt.",
+  "selectedAll": "Alle elementer er valgt.",
+  "selectedCount": "{count, plural, =0 {Ingen elementer er valgt} one {# element er valgt} other {# elementer er valgt}}.",
+  "selectedItem": "{item} er valgt."
+}
diff --git a/packages/@react-aria/grid/intl/nl-NL.json b/packages/@react-aria/grid/intl/nl-NL.json
new file mode 100644
index 00000000000..7e0b162140c
--- /dev/null
+++ b/packages/@react-aria/grid/intl/nl-NL.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} niet geselecteerd.",
+  "selectedAll": "Alle items geselecteerd.",
+  "selectedCount": "{count, plural, =0 {Geen items geselecteerd} one {# item geselecteerd} other {# items geselecteerd}}.",
+  "selectedItem": "{item} geselecteerd."
+}
diff --git a/packages/@react-aria/grid/intl/pl-PL.json b/packages/@react-aria/grid/intl/pl-PL.json
new file mode 100644
index 00000000000..8d9b3e8203d
--- /dev/null
+++ b/packages/@react-aria/grid/intl/pl-PL.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Nie zaznaczono {item}.",
+  "selectedAll": "Wszystkie zaznaczone elementy.",
+  "selectedCount": "{count, plural, =0 {Nie zaznaczono żadnych elementów} one {# zaznaczony element} other {# zaznaczonych elementów}}.",
+  "selectedItem": "Zaznaczono {item}."
+}
diff --git a/packages/@react-aria/grid/intl/pt-BR.json b/packages/@react-aria/grid/intl/pt-BR.json
new file mode 100644
index 00000000000..a88bfffe0a4
--- /dev/null
+++ b/packages/@react-aria/grid/intl/pt-BR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} não selecionado.",
+  "selectedAll": "Todos os itens selecionados.",
+  "selectedCount": "{count, plural, =0 {Nenhum item selecionado} one {# item selecionado} other {# itens selecionados}}.",
+  "selectedItem": "{item} selecionado."
+}
diff --git a/packages/@react-aria/grid/intl/pt-PT.json b/packages/@react-aria/grid/intl/pt-PT.json
new file mode 100644
index 00000000000..a88bfffe0a4
--- /dev/null
+++ b/packages/@react-aria/grid/intl/pt-PT.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} não selecionado.",
+  "selectedAll": "Todos os itens selecionados.",
+  "selectedCount": "{count, plural, =0 {Nenhum item selecionado} one {# item selecionado} other {# itens selecionados}}.",
+  "selectedItem": "{item} selecionado."
+}
diff --git a/packages/@react-aria/grid/intl/ro-RO.json b/packages/@react-aria/grid/intl/ro-RO.json
new file mode 100644
index 00000000000..3c3bcb5ebed
--- /dev/null
+++ b/packages/@react-aria/grid/intl/ro-RO.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} neselectat.",
+  "selectedAll": "Toate elementele selectate.",
+  "selectedCount": "{count, plural, =0 {Niciun element selectat} one {# element selectat} other {# elemente selectate}}.",
+  "selectedItem": "{item} selectat."
+}
diff --git a/packages/@react-aria/grid/intl/ru-RU.json b/packages/@react-aria/grid/intl/ru-RU.json
new file mode 100644
index 00000000000..f80cf80e43c
--- /dev/null
+++ b/packages/@react-aria/grid/intl/ru-RU.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{Item} не выбрано.",
+  "selectedAll": "Выбраны все элементы.",
+  "selectedCount": "{count, plural, =0 {Нет выбранных элементов} one {# элемент выбран} other {# элементов выбрано}}.",
+  "selectedItem": "{Item} выбрано."
+}
diff --git a/packages/@react-aria/grid/intl/sk-SK.json b/packages/@react-aria/grid/intl/sk-SK.json
new file mode 100644
index 00000000000..e9926b217c5
--- /dev/null
+++ b/packages/@react-aria/grid/intl/sk-SK.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Nevybraté položky: {item}.",
+  "selectedAll": "Všetky vybraté položky.",
+  "selectedCount": "{count, plural, =0 {Žiadne vybraté položky} one {# vybratá položka} other {Počet vybratých položiek:#}}.",
+  "selectedItem": "Vybraté položky: {item}."
+}
diff --git a/packages/@react-aria/grid/intl/sl-SI.json b/packages/@react-aria/grid/intl/sl-SI.json
new file mode 100644
index 00000000000..fb6f04368df
--- /dev/null
+++ b/packages/@react-aria/grid/intl/sl-SI.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "Element {item} ni izbran.",
+  "selectedAll": "Vsi elementi so izbrani.",
+  "selectedCount": "{count, plural, =0 {Noben element ni izbran} one {# element je izbran} other {# elementov je izbranih}}.",
+  "selectedItem": "Element {item} je izbran."
+}
diff --git a/packages/@react-aria/grid/intl/sr-SP.json b/packages/@react-aria/grid/intl/sr-SP.json
new file mode 100644
index 00000000000..28bb0aa2e13
--- /dev/null
+++ b/packages/@react-aria/grid/intl/sr-SP.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} nije izabrano.",
+  "selectedAll": "Izabrane su sve stavke.",
+  "selectedCount": "{count, plural, =0 {Nije izabrana nijedna stavka} one {Izabrana je # stavka} other {Izabrano je # stavki}}.",
+  "selectedItem": "{Item} je izabrano."
+}
diff --git a/packages/@react-aria/grid/intl/sv-SE.json b/packages/@react-aria/grid/intl/sv-SE.json
new file mode 100644
index 00000000000..d2e7f38af7f
--- /dev/null
+++ b/packages/@react-aria/grid/intl/sv-SE.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} ej markerat.",
+  "selectedAll": "Alla markerade objekt.",
+  "selectedCount": "{count, plural, =0 {Inga markerade objekt} one {# markerat objekt} other {# markerade objekt}}.",
+  "selectedItem": "{item} markerat."
+}
diff --git a/packages/@react-aria/grid/intl/tr-TR.json b/packages/@react-aria/grid/intl/tr-TR.json
new file mode 100644
index 00000000000..f59637108b3
--- /dev/null
+++ b/packages/@react-aria/grid/intl/tr-TR.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} seçilmedi.",
+  "selectedAll": "Tüm ögeler seçildi.",
+  "selectedCount": "{count, plural, =0 {Hiçbir öge seçilmedi} one {# öge seçildi} other {# öge seçildi}}.",
+  "selectedItem": "{item} seçildi."
+}
diff --git a/packages/@react-aria/grid/intl/uk-UA.json b/packages/@react-aria/grid/intl/uk-UA.json
new file mode 100644
index 00000000000..715ba635d02
--- /dev/null
+++ b/packages/@react-aria/grid/intl/uk-UA.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "{item} не вибрано.",
+  "selectedAll": "Усі елементи вибрано.",
+  "selectedCount": "{count, plural, =0 {Жодних елементів не вибрано} one {# елемент вибрано} other {Вибрано елементів: #}}.",
+  "selectedItem": "{item} вибрано."
+}
diff --git a/packages/@react-aria/grid/intl/zh-CN.json b/packages/@react-aria/grid/intl/zh-CN.json
new file mode 100644
index 00000000000..75e24757385
--- /dev/null
+++ b/packages/@react-aria/grid/intl/zh-CN.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "未选择 {item}。",
+  "selectedAll": "已选择所有项目。",
+  "selectedCount": "{count, plural, =0 {未选择项目} one {已选择 # 个项目} other {已选择 # 个项目}}。",
+  "selectedItem": "已选择 {item}。"
+}
diff --git a/packages/@react-aria/grid/intl/zh-TW.json b/packages/@react-aria/grid/intl/zh-TW.json
new file mode 100644
index 00000000000..bdaa471fac2
--- /dev/null
+++ b/packages/@react-aria/grid/intl/zh-TW.json
@@ -0,0 +1,6 @@
+{
+  "deselectedItem": "未選取「{item}」。",
+  "selectedAll": "已選取所有項目。",
+  "selectedCount": "{count, plural, =0 {未選取任何項目} one {已選取 # 個項目} other {已選取 # 個項目}}。",
+  "selectedItem": "已選取「{item}」。"
+}
diff --git a/packages/@react-aria/table/intl/ar-AE.json b/packages/@react-aria/table/intl/ar-AE.json
index 00318d4c5e7..b113a16c271 100644
--- a/packages/@react-aria/table/intl/ar-AE.json
+++ b/packages/@react-aria/table/intl/ar-AE.json
@@ -1,4 +1,9 @@
 {
-  "select": "يحدد",
-  "selectAll": "تحديد الكل"
+  "ascending": "تصاعدي",
+  "ascendingSort": "ترتيب حسب العمود {columnName} بترتيب تصاعدي",
+  "descending": "تنازلي",
+  "descendingSort": "ترتيب حسب العمود {columnName} بترتيب تنازلي",
+  "select": "تحديد",
+  "selectAll": "تحديد الكل",
+  "sortable": "عمود قابل للترتيب"
 }
diff --git a/packages/@react-aria/table/intl/bg-BG.json b/packages/@react-aria/table/intl/bg-BG.json
index f40b7076e4e..79c7e6594e1 100644
--- a/packages/@react-aria/table/intl/bg-BG.json
+++ b/packages/@react-aria/table/intl/bg-BG.json
@@ -1,4 +1,9 @@
 {
-  "select": "Избирам",
-  "selectAll": "Избери всички"
+  "ascending": "възходящ",
+  "ascendingSort": "сортирано по колона {columnName} във възходящ ред",
+  "descending": "низходящ",
+  "descendingSort": "сортирано по колона {columnName} в низходящ ред",
+  "select": "Изберете",
+  "selectAll": "Изберете всичко",
+  "sortable": "сортираща колона"
 }
diff --git a/packages/@react-aria/table/intl/cs-CZ.json b/packages/@react-aria/table/intl/cs-CZ.json
index 85b515c444f..2cf4c03d89c 100644
--- a/packages/@react-aria/table/intl/cs-CZ.json
+++ b/packages/@react-aria/table/intl/cs-CZ.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "vzestupně",
+  "ascendingSort": "řazeno vzestupně podle sloupce {columnName}",
+  "descending": "sestupně",
+  "descendingSort": "řazeno sestupně podle sloupce {columnName}",
   "select": "Vybrat",
-  "selectAll": "Vybrat vše"
-}
\ No newline at end of file
+  "selectAll": "Vybrat vše",
+  "sortable": "sloupec s možností řazení"
+}
diff --git a/packages/@react-aria/table/intl/da-DK.json b/packages/@react-aria/table/intl/da-DK.json
index d5332ec5fb2..f2269ab098e 100644
--- a/packages/@react-aria/table/intl/da-DK.json
+++ b/packages/@react-aria/table/intl/da-DK.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "stigende",
+  "ascendingSort": "sorteret efter kolonne {columnName} i stigende rækkefølge",
+  "descending": "faldende",
+  "descendingSort": "sorteret efter kolonne {columnName} i faldende rækkefølge",
   "select": "Vælg",
-  "selectAll": "Vælg alle"
-}
\ No newline at end of file
+  "selectAll": "Vælg alle",
+  "sortable": "sorterbar kolonne"
+}
diff --git a/packages/@react-aria/table/intl/de-DE.json b/packages/@react-aria/table/intl/de-DE.json
index 14412aec693..aff34133ef9 100644
--- a/packages/@react-aria/table/intl/de-DE.json
+++ b/packages/@react-aria/table/intl/de-DE.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "aufsteigend",
+  "ascendingSort": "sortiert nach Spalte {columnName} in aufsteigender Reihenfolge",
+  "descending": "absteigend",
+  "descendingSort": "sortiert nach Spalte {columnName} in absteigender Reihenfolge",
   "select": "Auswählen",
-  "selectAll": "Alles auswählen"
-}
\ No newline at end of file
+  "selectAll": "Alles auswählen",
+  "sortable": "sortierbare Spalte"
+}
diff --git a/packages/@react-aria/table/intl/el-GR.json b/packages/@react-aria/table/intl/el-GR.json
index f421ee38507..184b3d14854 100644
--- a/packages/@react-aria/table/intl/el-GR.json
+++ b/packages/@react-aria/table/intl/el-GR.json
@@ -1,4 +1,9 @@
 {
-    "select": "Επιλέγω",
-    "selectAll": "Επιλογή όλων"
+  "ascending": "αύξουσα",
+  "ascendingSort": "διαλογή ανά στήλη {columnName} σε αύξουσα σειρά",
+  "descending": "φθίνουσα",
+  "descendingSort": "διαλογή ανά στήλη {columnName} σε φθίνουσα σειρά",
+  "select": "Επιλογή",
+  "selectAll": "Επιλογή όλων",
+  "sortable": "Στήλη διαλογής"
 }
diff --git a/packages/@react-aria/table/intl/es-ES.json b/packages/@react-aria/table/intl/es-ES.json
index 157e1fe0d43..4ca7209cb9c 100644
--- a/packages/@react-aria/table/intl/es-ES.json
+++ b/packages/@react-aria/table/intl/es-ES.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "de subida",
+  "ascendingSort": "ordenado por columna {columnName} en orden de subida",
+  "descending": "de bajada",
+  "descendingSort": "ordenado por columna {columnName} en orden de bajada",
   "select": "Seleccionar",
-  "selectAll": "Seleccionar todos"
-}
\ No newline at end of file
+  "selectAll": "Seleccionar todos",
+  "sortable": "columna ordenable"
+}
diff --git a/packages/@react-aria/table/intl/et-EE.json b/packages/@react-aria/table/intl/et-EE.json
index 07bf4148f16..d26411d7cdc 100644
--- a/packages/@react-aria/table/intl/et-EE.json
+++ b/packages/@react-aria/table/intl/et-EE.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "tõusev järjestus",
+  "ascendingSort": "sorditud veeru järgi {columnName} tõusvas järjestuses",
+  "descending": "laskuv järjestus",
+  "descendingSort": "sorditud veeru järgi {columnName} laskuvas järjestuses",
   "select": "Vali",
-  "selectAll": "Vali kõik"
+  "selectAll": "Vali kõik",
+  "sortable": "sorditav veerg"
 }
diff --git a/packages/@react-aria/table/intl/fi-FI.json b/packages/@react-aria/table/intl/fi-FI.json
index bba5d17b8e9..8cbc20f7385 100644
--- a/packages/@react-aria/table/intl/fi-FI.json
+++ b/packages/@react-aria/table/intl/fi-FI.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "nouseva",
+  "ascendingSort": "lajiteltu sarakkeen {columnName} mukaan nousevassa järjestyksessä",
+  "descending": "laskeva",
+  "descendingSort": "lajiteltu sarakkeen {columnName} mukaan laskevassa järjestyksessä",
   "select": "Valitse",
-  "selectAll": "Valitse kaikki"
-}
\ No newline at end of file
+  "selectAll": "Valitse kaikki",
+  "sortable": "lajiteltava sarake"
+}
diff --git a/packages/@react-aria/table/intl/fr-FR.json b/packages/@react-aria/table/intl/fr-FR.json
index dd3b9e17fd0..b8486b3217d 100644
--- a/packages/@react-aria/table/intl/fr-FR.json
+++ b/packages/@react-aria/table/intl/fr-FR.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "croissant",
+  "ascendingSort": "trié en fonction de la colonne {columnName} par ordre croissant",
+  "descending": "décroissant",
+  "descendingSort": "trié en fonction de la colonne {columnName} par ordre décroissant",
   "select": "Sélectionner",
-  "selectAll": "Sélectionner tout"
-}
\ No newline at end of file
+  "selectAll": "Sélectionner tout",
+  "sortable": "colonne triable"
+}
diff --git a/packages/@react-aria/table/intl/he-IL.json b/packages/@react-aria/table/intl/he-IL.json
index f42e338582d..8564cb1105d 100644
--- a/packages/@react-aria/table/intl/he-IL.json
+++ b/packages/@react-aria/table/intl/he-IL.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "עולה",
+  "ascendingSort": "מוין לפי עמודה {columnName} בסדר עולה",
+  "descending": "יורד",
+  "descendingSort": "מוין לפי עמודה {columnName} בסדר יורד",
   "select": "בחר",
-  "selectAll": "בחר הכל"
-}
\ No newline at end of file
+  "selectAll": "בחר הכול",
+  "sortable": "עמודה שניתן למיין"
+}
diff --git a/packages/@react-aria/table/intl/hr-HR.json b/packages/@react-aria/table/intl/hr-HR.json
index 4e0a842b6fd..07df6a6e677 100644
--- a/packages/@react-aria/table/intl/hr-HR.json
+++ b/packages/@react-aria/table/intl/hr-HR.json
@@ -1,4 +1,9 @@
 {
-  "select": "Odaberi",
-  "selectAll": "Odaberi sve"
+  "ascending": "rastući",
+  "ascendingSort": "razvrstano po stupcima {columnName} rastućem redoslijedom",
+  "descending": "padajući",
+  "descendingSort": "razvrstano po stupcima {columnName} padajućim redoslijedom",
+  "select": "Odaberite",
+  "selectAll": "Odaberite sve",
+  "sortable": "stupac koji se može razvrstati"
 }
diff --git a/packages/@react-aria/table/intl/hu-HU.json b/packages/@react-aria/table/intl/hu-HU.json
index 35b4a432f45..8c4c0dabb8d 100644
--- a/packages/@react-aria/table/intl/hu-HU.json
+++ b/packages/@react-aria/table/intl/hu-HU.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "növekvő",
+  "ascendingSort": "rendezve a(z) {columnName} oszlop szerint, növekvő sorrendben",
+  "descending": "csökkenő",
+  "descendingSort": "rendezve a(z) {columnName} oszlop szerint, csökkenő sorrendben",
   "select": "Kijelölés",
-  "selectAll": "Összes kijelölése"
-}
\ No newline at end of file
+  "selectAll": "Összes kijelölése",
+  "sortable": "rendezendő oszlop"
+}
diff --git a/packages/@react-aria/table/intl/it-IT.json b/packages/@react-aria/table/intl/it-IT.json
index b9dc02964c3..5bc848e5981 100644
--- a/packages/@react-aria/table/intl/it-IT.json
+++ b/packages/@react-aria/table/intl/it-IT.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "crescente",
+  "ascendingSort": "in ordine crescente in base alla colonna {columnName}",
+  "descending": "decrescente",
+  "descendingSort": "in ordine decrescente in base alla colonna {columnName}",
   "select": "Seleziona",
-  "selectAll": "Seleziona tutto"
-}
\ No newline at end of file
+  "selectAll": "Seleziona tutto",
+  "sortable": "colonna ordinabile"
+}
diff --git a/packages/@react-aria/table/intl/ja-JP.json b/packages/@react-aria/table/intl/ja-JP.json
index 7c96dc3963b..6dedc21b000 100644
--- a/packages/@react-aria/table/intl/ja-JP.json
+++ b/packages/@react-aria/table/intl/ja-JP.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "昇順",
+  "ascendingSort": "列 {columnName} を昇順で並べ替え",
+  "descending": "降順",
+  "descendingSort": "列 {columnName} を降順で並べ替え",
   "select": "選択",
-  "selectAll": "すべてを選択"
-}
\ No newline at end of file
+  "selectAll": "すべて選択",
+  "sortable": "並べ替え可能な列"
+}
diff --git a/packages/@react-aria/table/intl/ko-KR.json b/packages/@react-aria/table/intl/ko-KR.json
index ca9f6e6ba0e..f37b5677060 100644
--- a/packages/@react-aria/table/intl/ko-KR.json
+++ b/packages/@react-aria/table/intl/ko-KR.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "오름차순",
+  "ascendingSort": "{columnName} 열을 기준으로 오름차순으로 정렬됨",
+  "descending": "내림차순",
+  "descendingSort": "{columnName} 열을 기준으로 내림차순으로 정렬됨",
   "select": "선택",
-  "selectAll": "모두 선택"
-}
\ No newline at end of file
+  "selectAll": "모두 선택",
+  "sortable": "정렬 가능한 열"
+}
diff --git a/packages/@react-aria/table/intl/lt-LT.json b/packages/@react-aria/table/intl/lt-LT.json
index b3690693154..7657adf8460 100644
--- a/packages/@react-aria/table/intl/lt-LT.json
+++ b/packages/@react-aria/table/intl/lt-LT.json
@@ -1,4 +1,9 @@
 {
-  "select": "Žymėti",
-  "selectAll": "Žymėti viską"
-}
\ No newline at end of file
+  "ascending": "didėjančia tvarka",
+  "ascendingSort": "surikiuota pagal stulpelį {columnName} didėjančia tvarka",
+  "descending": "mažėjančia tvarka",
+  "descendingSort": "surikiuota pagal stulpelį {columnName} mažėjančia tvarka",
+  "select": "Pasirinkti",
+  "selectAll": "Pasirinkti viską",
+  "sortable": "rikiuojamas stulpelis"
+}
diff --git a/packages/@react-aria/table/intl/lv-LV.json b/packages/@react-aria/table/intl/lv-LV.json
index a0520c43819..b591f7bb5d1 100644
--- a/packages/@react-aria/table/intl/lv-LV.json
+++ b/packages/@react-aria/table/intl/lv-LV.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "augošā secībā",
+  "ascendingSort": "kārtots pēc kolonnas {columnName} augošā secībā",
+  "descending": "dilstošā secībā",
+  "descendingSort": "kārtots pēc kolonnas {columnName} dilstošā secībā",
   "select": "Atlasīt",
-  "selectAll": "Atlasīt visus"
+  "selectAll": "Atlasīt visu",
+  "sortable": "kārtojamā kolonna"
 }
diff --git a/packages/@react-aria/table/intl/nb-NO.json b/packages/@react-aria/table/intl/nb-NO.json
index 33fb6f9eeae..a524b7c46af 100644
--- a/packages/@react-aria/table/intl/nb-NO.json
+++ b/packages/@react-aria/table/intl/nb-NO.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "stigende",
+  "ascendingSort": "sortert etter kolonne {columnName} i stigende rekkefølge",
+  "descending": "synkende",
+  "descendingSort": "sortert etter kolonne {columnName} i synkende rekkefølge",
   "select": "Velg",
-  "selectAll": "Velg alle"
-}
\ No newline at end of file
+  "selectAll": "Velg alle",
+  "sortable": "kolonne som kan sorteres"
+}
diff --git a/packages/@react-aria/table/intl/nl-NL.json b/packages/@react-aria/table/intl/nl-NL.json
index 9abdef3ff23..0368f85e367 100644
--- a/packages/@react-aria/table/intl/nl-NL.json
+++ b/packages/@react-aria/table/intl/nl-NL.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "oplopend",
+  "ascendingSort": "gesorteerd in oplopende volgorde in kolom {columnName}",
+  "descending": "aflopend",
+  "descendingSort": "gesorteerd in aflopende volgorde in kolom {columnName}",
   "select": "Selecteren",
-  "selectAll": "Alles selecteren"
-}
\ No newline at end of file
+  "selectAll": "Alles selecteren",
+  "sortable": "sorteerbare kolom"
+}
diff --git a/packages/@react-aria/table/intl/pl-PL.json b/packages/@react-aria/table/intl/pl-PL.json
index 08e3dfae441..dec39e6ea69 100644
--- a/packages/@react-aria/table/intl/pl-PL.json
+++ b/packages/@react-aria/table/intl/pl-PL.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "rosnąco",
+  "ascendingSort": "posortowano według kolumny {columnName} w porządku rosnącym",
+  "descending": "malejąco",
+  "descendingSort": "posortowano według kolumny {columnName} w porządku malejącym",
   "select": "Zaznacz",
-  "selectAll": "Zaznacz wszystko"
-}
\ No newline at end of file
+  "selectAll": "Zaznacz wszystko",
+  "sortable": "kolumna z możliwością sortowania"
+}
diff --git a/packages/@react-aria/table/intl/pt-BR.json b/packages/@react-aria/table/intl/pt-BR.json
index efbb53936fa..db99b8ec0c8 100644
--- a/packages/@react-aria/table/intl/pt-BR.json
+++ b/packages/@react-aria/table/intl/pt-BR.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "crescente",
+  "ascendingSort": "classificado pela coluna {columnName} em ordem crescente",
+  "descending": "decrescente",
+  "descendingSort": "classificado pela coluna {columnName} em ordem decrescente",
   "select": "Selecionar",
-  "selectAll": "Selecionar tudo"
-}
\ No newline at end of file
+  "selectAll": "Selecionar tudo",
+  "sortable": "coluna classificável"
+}
diff --git a/packages/@react-aria/table/intl/pt-PT.json b/packages/@react-aria/table/intl/pt-PT.json
index 0fb25037954..1c21ac328c4 100644
--- a/packages/@react-aria/table/intl/pt-PT.json
+++ b/packages/@react-aria/table/intl/pt-PT.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "ascendente",
+  "ascendingSort": "Ordenar por coluna {columnName} em ordem ascendente",
+  "descending": "descendente",
+  "descendingSort": "Ordenar por coluna {columnName} em ordem descendente",
   "select": "Selecionar",
-  "selectAll": "Selecionar tudo"
+  "selectAll": "Selecionar tudo",
+  "sortable": "Coluna ordenável"
 }
diff --git a/packages/@react-aria/table/intl/ro-RO.json b/packages/@react-aria/table/intl/ro-RO.json
index 0245f2f0b32..a453ec231f6 100644
--- a/packages/@react-aria/table/intl/ro-RO.json
+++ b/packages/@react-aria/table/intl/ro-RO.json
@@ -1,4 +1,9 @@
 {
-  "select": "Selectați",
-  "selectAll": "Selectați tot"
+  "ascending": "crescătoare",
+  "ascendingSort": "sortate după coloana {columnName} în ordine crescătoare",
+  "descending": "descrescătoare",
+  "descendingSort": "sortate după coloana {columnName} în ordine descrescătoare",
+  "select": "Selectare",
+  "selectAll": "Selectare totală",
+  "sortable": "coloană sortabilă"
 }
diff --git a/packages/@react-aria/table/intl/ru-RU.json b/packages/@react-aria/table/intl/ru-RU.json
index fc8361a741a..11de78f0db8 100644
--- a/packages/@react-aria/table/intl/ru-RU.json
+++ b/packages/@react-aria/table/intl/ru-RU.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "возрастание",
+  "ascendingSort": "сортировать столбец {columnName} в порядке возрастания",
+  "descending": "убывание",
+  "descendingSort": "сортировать столбец {columnName} в порядке убывания",
   "select": "Выбрать",
-  "selectAll": "Выбрать все"
-}
\ No newline at end of file
+  "selectAll": "Выбрать все",
+  "sortable": "сортируемый столбец"
+}
diff --git a/packages/@react-aria/table/intl/sk-SK.json b/packages/@react-aria/table/intl/sk-SK.json
index 472221dabbd..3f7fa857900 100644
--- a/packages/@react-aria/table/intl/sk-SK.json
+++ b/packages/@react-aria/table/intl/sk-SK.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "vzostupne",
+  "ascendingSort": "zoradené zostupne podľa stĺpca {columnName}",
+  "descending": "zostupne",
+  "descendingSort": "zoradené zostupne podľa stĺpca {columnName}",
   "select": "Vybrať",
-  "selectAll": "Vybrať všetko"
+  "selectAll": "Vybrať všetko",
+  "sortable": "zoraditeľný stĺpec"
 }
diff --git a/packages/@react-aria/table/intl/sl-SI.json b/packages/@react-aria/table/intl/sl-SI.json
index a572779bb19..34f2c291018 100644
--- a/packages/@react-aria/table/intl/sl-SI.json
+++ b/packages/@react-aria/table/intl/sl-SI.json
@@ -1,4 +1,9 @@
 {
-  "select": "Izberi",
-  "selectAll": "Izberi vse"
+  "ascending": "naraščajoče",
+  "ascendingSort": "razvrščeno po stolpcu {columnName} v naraščajočem vrstnem redu",
+  "descending": "padajoče",
+  "descendingSort": "razvrščeno po stolpcu {columnName} v padajočem vrstnem redu",
+  "select": "Izberite",
+  "selectAll": "Izberite vse",
+  "sortable": "razvrstljivi stolpec"
 }
diff --git a/packages/@react-aria/table/intl/sr-SP.json b/packages/@react-aria/table/intl/sr-SP.json
index 32dfa6c0d7b..4d2491e1afc 100644
--- a/packages/@react-aria/table/intl/sr-SP.json
+++ b/packages/@react-aria/table/intl/sr-SP.json
@@ -1,4 +1,9 @@
 {
-  "select": "Izaberi",
-  "selectAll": "Izaberi sve"
+  "ascending": "rastući",
+  "ascendingSort": "sortirano po kolonama {columnName} rastućim redosledom",
+  "descending": "padajući",
+  "descendingSort": "sortirano po kolonama {columnName} padajućim redosledom",
+  "select": "Izaberite",
+  "selectAll": "Izaberite sve",
+  "sortable": "kolona koja se može sortirati"
 }
diff --git a/packages/@react-aria/table/intl/sv-SE.json b/packages/@react-aria/table/intl/sv-SE.json
index af8f25a8164..cd79ff392f1 100644
--- a/packages/@react-aria/table/intl/sv-SE.json
+++ b/packages/@react-aria/table/intl/sv-SE.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "stigande",
+  "ascendingSort": "sorterat på kolumn {columnName} i stigande ordning",
+  "descending": "fallande",
+  "descendingSort": "sorterat på kolumn {columnName} i fallande ordning",
   "select": "Markera",
-  "selectAll": "Markera allt"
-}
\ No newline at end of file
+  "selectAll": "Markera allt",
+  "sortable": "sorterbar kolumn"
+}
diff --git a/packages/@react-aria/table/intl/tr-TR.json b/packages/@react-aria/table/intl/tr-TR.json
index e9ab674b2da..f8255b6e858 100644
--- a/packages/@react-aria/table/intl/tr-TR.json
+++ b/packages/@react-aria/table/intl/tr-TR.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "artan sırada",
+  "ascendingSort": "{columnName} sütuna göre artan düzende sırala",
+  "descending": "azalan sırada",
+  "descendingSort": "{columnName} sütuna göre azalan düzende sırala",
   "select": "Seç",
-  "selectAll": "Tümünü Seç"
-}
\ No newline at end of file
+  "selectAll": "Tümünü Seç",
+  "sortable": "Sıralanabilir sütun"
+}
diff --git a/packages/@react-aria/table/intl/uk-UA.json b/packages/@react-aria/table/intl/uk-UA.json
index 63b56f730cc..4566164563b 100644
--- a/packages/@react-aria/table/intl/uk-UA.json
+++ b/packages/@react-aria/table/intl/uk-UA.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "висхідний",
+  "ascendingSort": "відсортовано за стовпцем {columnName} у висхідному порядку",
+  "descending": "низхідний",
+  "descendingSort": "відсортовано за стовпцем {columnName} у низхідному порядку",
   "select": "Вибрати",
-  "selectAll": "Вибрати все"
-}
\ No newline at end of file
+  "selectAll": "Вибрати все",
+  "sortable": "сортувальний стовпець"
+}
diff --git a/packages/@react-aria/table/intl/zh-CN.json b/packages/@react-aria/table/intl/zh-CN.json
index 955cf6f5d9b..24dea2998c0 100644
--- a/packages/@react-aria/table/intl/zh-CN.json
+++ b/packages/@react-aria/table/intl/zh-CN.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "升序",
+  "ascendingSort": "按列 {columnName} 升序排序",
+  "descending": "降序",
+  "descendingSort": "按列 {columnName} 降序排序",
   "select": "选择",
-  "selectAll": "全选"
-}
\ No newline at end of file
+  "selectAll": "全选",
+  "sortable": "可排序的列"
+}
diff --git a/packages/@react-aria/table/intl/zh-TW.json b/packages/@react-aria/table/intl/zh-TW.json
index f771daf522f..98d97950ee4 100644
--- a/packages/@react-aria/table/intl/zh-TW.json
+++ b/packages/@react-aria/table/intl/zh-TW.json
@@ -1,4 +1,9 @@
 {
+  "ascending": "遞增",
+  "ascendingSort": "已依據「{columnName}」欄遞增排序",
+  "descending": "遞減",
+  "descendingSort": "已依據「{columnName}」欄遞減排序",
   "select": "選取",
-  "selectAll": "全選"
-}
\ No newline at end of file
+  "selectAll": "全選",
+  "sortable": "可排序的欄"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/ar-AE.json b/packages/@react-spectrum/actionbar/intl/ar-AE.json
new file mode 100644
index 00000000000..be9c7577455
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/ar-AE.json
@@ -0,0 +1,7 @@
+{
+  "actions": "الإجراءات",
+  "actionsAvailable": "الإجراءات المتاحة.",
+  "clearSelection": "إزالة التحديد",
+  "selected": "{count, plural, =0 {غير محدد} other {# محدد}}",
+  "selectedAll": "تم تحديد الكل"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/bg-BG.json b/packages/@react-spectrum/actionbar/intl/bg-BG.json
new file mode 100644
index 00000000000..4e479b3d679
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/bg-BG.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Действия",
+  "actionsAvailable": "Налични действия.",
+  "clearSelection": "Изчистване на избора",
+  "selected": "{count, plural, =0 {Няма избрани} other {# избрани}}",
+  "selectedAll": "Всички избрани"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/cs-CZ.json b/packages/@react-spectrum/actionbar/intl/cs-CZ.json
new file mode 100644
index 00000000000..47c7614d9b9
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/cs-CZ.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Akce",
+  "actionsAvailable": "Dostupné akce.",
+  "clearSelection": "Vymazat výběr",
+  "selected": "{count, plural, =0 {Nic není vybráno} other {Vybráno #}}",
+  "selectedAll": "Vybráno vše"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/da-DK.json b/packages/@react-spectrum/actionbar/intl/da-DK.json
new file mode 100644
index 00000000000..862484ba8d7
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/da-DK.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Handlinger",
+  "actionsAvailable": "Tilgængelige handlinger.",
+  "clearSelection": "Ryd markering",
+  "selected": "{count, plural, =0 {Ingen valgt} other {# valgt}}",
+  "selectedAll": "Alle valgt"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/de-DE.json b/packages/@react-spectrum/actionbar/intl/de-DE.json
new file mode 100644
index 00000000000..acf371d164c
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/de-DE.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Aktionen",
+  "actionsAvailable": "Aktionen verfügbar.",
+  "clearSelection": "Auswahl löschen",
+  "selected": "{count, plural, =0 {Nichts ausgewählt} other {# ausgewählt}}",
+  "selectedAll": "Alles ausgewählt"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/el-GR.json b/packages/@react-spectrum/actionbar/intl/el-GR.json
new file mode 100644
index 00000000000..dbb7f4f21d6
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/el-GR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Ενέργειες",
+  "actionsAvailable": "Υπάρχουν διαθέσιμες ενέργειες.",
+  "clearSelection": "Εκκαθάριση επιλογής",
+  "selected": "{count, plural, =0 {Δεν επιλέχθηκε κανένα} other {Επιλέχθηκαν #}}",
+  "selectedAll": "Επιλέχθηκαν όλα"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/es-ES.json b/packages/@react-spectrum/actionbar/intl/es-ES.json
new file mode 100644
index 00000000000..b28b2d7eac3
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/es-ES.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Acciones",
+  "actionsAvailable": "Acciones disponibles.",
+  "clearSelection": "Borrar selección",
+  "selected": "{count, plural, =0 {Nada seleccionado} other {# seleccionado}}",
+  "selectedAll": "Todo seleccionado"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/et-EE.json b/packages/@react-spectrum/actionbar/intl/et-EE.json
new file mode 100644
index 00000000000..a8c2597417b
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/et-EE.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Toimingud",
+  "actionsAvailable": "Toimingud saadaval.",
+  "clearSelection": "Puhasta valik",
+  "selected": "{count, plural, =0 {Pole valitud} other {# valitud}}",
+  "selectedAll": "Kõik valitud"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/fi-FI.json b/packages/@react-spectrum/actionbar/intl/fi-FI.json
new file mode 100644
index 00000000000..24dab06be96
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/fi-FI.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Toiminnot",
+  "actionsAvailable": "Toiminnot käytettävissä.",
+  "clearSelection": "Poista valinta",
+  "selected": "{count, plural, =0 {Ei mitään valittu} other {# valittu}}",
+  "selectedAll": "Kaikki valittu"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/fr-FR.json b/packages/@react-spectrum/actionbar/intl/fr-FR.json
new file mode 100644
index 00000000000..27f3cf3b6f9
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/fr-FR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Actions",
+  "actionsAvailable": "Actions disponibles.",
+  "clearSelection": "Supprimer la sélection",
+  "selected": "{count, plural, =0 {Aucun élément sélectionné} other {# sélectionnés}}",
+  "selectedAll": "Toute la sélection"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/he-IL.json b/packages/@react-spectrum/actionbar/intl/he-IL.json
new file mode 100644
index 00000000000..d175abb76a1
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/he-IL.json
@@ -0,0 +1,7 @@
+{
+  "actions": "פעולות",
+  "actionsAvailable": "פעולות זמינות.",
+  "clearSelection": "נקה בחירה",
+  "selected": "{count, plural, =0 {לא בוצעה בחירה} other {# נבחרו}}",
+  "selectedAll": "כל הפריטים שנבחרו"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/hr-HR.json b/packages/@react-spectrum/actionbar/intl/hr-HR.json
new file mode 100644
index 00000000000..cdb7951af8d
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/hr-HR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Radnje",
+  "actionsAvailable": "Dostupne radnje.",
+  "clearSelection": "Poništi odabir",
+  "selected": "{count, plural, =0 {Nijedna nije odabrana} other {# je odabrano}}",
+  "selectedAll": "Sve je odabrano"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/hu-HU.json b/packages/@react-spectrum/actionbar/intl/hu-HU.json
new file mode 100644
index 00000000000..390354f2780
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/hu-HU.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Műveletek",
+  "actionsAvailable": "Műveletek állnak rendelkezésre.",
+  "clearSelection": "Kijelölés törlése",
+  "selected": "{count, plural, =0 {Egy sincs kijelölve} other {# kijelölve}}",
+  "selectedAll": "Mind kijelölve"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/it-IT.json b/packages/@react-spectrum/actionbar/intl/it-IT.json
new file mode 100644
index 00000000000..2e2edc1cf51
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/it-IT.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Azioni",
+  "actionsAvailable": "Azioni disponibili.",
+  "clearSelection": "Annulla selezione",
+  "selected": "{count, plural, =0 {Nessuno selezionato} other {# selezionato/i}}",
+  "selectedAll": "Tutti selezionati"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/ja-JP.json b/packages/@react-spectrum/actionbar/intl/ja-JP.json
new file mode 100644
index 00000000000..1e8514eac94
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/ja-JP.json
@@ -0,0 +1,7 @@
+{
+  "actions": "アクション",
+  "actionsAvailable": "アクションを利用できます。",
+  "clearSelection": "選択をクリア",
+  "selected": "{count, plural, =0 {選択されていません} other {# 個を選択しました}}",
+  "selectedAll": "すべてを選択"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/ko-KR.json b/packages/@react-spectrum/actionbar/intl/ko-KR.json
new file mode 100644
index 00000000000..6136957e26e
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/ko-KR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "액션",
+  "actionsAvailable": "사용 가능한 액션",
+  "clearSelection": "선택 항목 지우기",
+  "selected": "{count, plural, =0 {선택된 항목 없음} other {#개 선택됨}}",
+  "selectedAll": "모두 선택됨"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/lt-LT.json b/packages/@react-spectrum/actionbar/intl/lt-LT.json
new file mode 100644
index 00000000000..58442363c69
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/lt-LT.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Veiksmai",
+  "actionsAvailable": "Galimi veiksmai.",
+  "clearSelection": "Išvalyti pasirinkimą",
+  "selected": "{count, plural, =0 {Nieko nepasirinkta} other {Pasirinkta #}}",
+  "selectedAll": "Pasirinkta viskas"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/lv-LV.json b/packages/@react-spectrum/actionbar/intl/lv-LV.json
new file mode 100644
index 00000000000..b82efb16e19
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/lv-LV.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Darbības",
+  "actionsAvailable": "Pieejamas darbības.",
+  "clearSelection": "Notīrīt atlasi",
+  "selected": "{count, plural, =0 {Nav atlasīts nekas} other {Atlasīts: #}}",
+  "selectedAll": "Atlasīts viss"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/nb-NO.json b/packages/@react-spectrum/actionbar/intl/nb-NO.json
new file mode 100644
index 00000000000..62fd10b1505
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/nb-NO.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Handlinger",
+  "actionsAvailable": "Tilgjengelige handlinger.",
+  "clearSelection": "Tøm utvalg",
+  "selected": "{count, plural, =0 {Ingen er valgt} other {# er valgt}}",
+  "selectedAll": "Alle er valgt"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/nl-NL.json b/packages/@react-spectrum/actionbar/intl/nl-NL.json
new file mode 100644
index 00000000000..68ee0e0e5fb
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/nl-NL.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Acties",
+  "actionsAvailable": "Acties beschikbaar.",
+  "clearSelection": "Selectie wissen",
+  "selected": "{count, plural, =0 {Niets geselecteerd} other {# geselecteerd}}",
+  "selectedAll": "Alles geselecteerd"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/pl-PL.json b/packages/@react-spectrum/actionbar/intl/pl-PL.json
new file mode 100644
index 00000000000..98d99635a9d
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/pl-PL.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Działania",
+  "actionsAvailable": "Dostępne działania.",
+  "clearSelection": "Wyczyść zaznaczenie",
+  "selected": "{count, plural, =0 {Nie zaznaczono żadnego elementu} other {# zaznaczonych}}",
+  "selectedAll": "Wszystkie zaznaczone"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/pt-BR.json b/packages/@react-spectrum/actionbar/intl/pt-BR.json
new file mode 100644
index 00000000000..48b16208bc1
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/pt-BR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Ações",
+  "actionsAvailable": "Ações disponíveis.",
+  "clearSelection": "Limpar seleção",
+  "selected": "{count, plural, =0 {Nada selecionado} other {# selecionado}}",
+  "selectedAll": "Todos selecionados"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/pt-PT.json b/packages/@react-spectrum/actionbar/intl/pt-PT.json
new file mode 100644
index 00000000000..677e4dd52b2
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/pt-PT.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Ações",
+  "actionsAvailable": "Ações disponíveis.",
+  "clearSelection": "Limpar seleção",
+  "selected": "{count, plural, =0 {Nenhum selecionado} other {# selecionado}}",
+  "selectedAll": "Tudo selecionado"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/ro-RO.json b/packages/@react-spectrum/actionbar/intl/ro-RO.json
new file mode 100644
index 00000000000..19f81c7db37
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/ro-RO.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Acțiuni",
+  "actionsAvailable": "Acțiuni disponibile.",
+  "clearSelection": "Goliți selecția",
+  "selected": "{count, plural, =0 {Niciunul selectat} other {# selectate}}",
+  "selectedAll": "Toate selectate"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/ru-RU.json b/packages/@react-spectrum/actionbar/intl/ru-RU.json
new file mode 100644
index 00000000000..17b991e35e5
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/ru-RU.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Действия",
+  "actionsAvailable": "Возможно выполнение действий.",
+  "clearSelection": "Очистить выбор",
+  "selected": "{count, plural, =0 {Ничего не выбоано} other {# выбрано}}",
+  "selectedAll": "Выбрано все"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/sk-SK.json b/packages/@react-spectrum/actionbar/intl/sk-SK.json
new file mode 100644
index 00000000000..515bcb75fc8
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/sk-SK.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Akcie",
+  "actionsAvailable": "Dostupné akcie.",
+  "clearSelection": "Vymazať výber",
+  "selected": "{count, plural, =0 {Žiadne vybraté položky} other {Počet vybratých položiek: #}}",
+  "selectedAll": "Všetky vybraté položky"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/sl-SI.json b/packages/@react-spectrum/actionbar/intl/sl-SI.json
new file mode 100644
index 00000000000..eb948dc71ac
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/sl-SI.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Dejanja",
+  "actionsAvailable": "Na voljo so dejanja.",
+  "clearSelection": "Počisti izbor",
+  "selected": "{count, plural, =0 {Nič izbranih} other {# izbranih}}",
+  "selectedAll": "Vsi izbrani"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/sr-SP.json b/packages/@react-spectrum/actionbar/intl/sr-SP.json
new file mode 100644
index 00000000000..b27fcb0d4f9
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/sr-SP.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Radnje",
+  "actionsAvailable": "Dostupne su radnje.",
+  "clearSelection": "Poništi izbor",
+  "selected": "{count, plural, =0 {Ništa nije izabrano} other {# je izabrano}}",
+  "selectedAll": "Sve je izabrano"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/sv-SE.json b/packages/@react-spectrum/actionbar/intl/sv-SE.json
new file mode 100644
index 00000000000..6d21118d811
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/sv-SE.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Åtgärder",
+  "actionsAvailable": "Åtgärder finns.",
+  "clearSelection": "Rensa markering",
+  "selected": "{count, plural, =0 {Inga markerade} other {# markerade}}",
+  "selectedAll": "Alla markerade"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/tr-TR.json b/packages/@react-spectrum/actionbar/intl/tr-TR.json
new file mode 100644
index 00000000000..8243b768ee3
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/tr-TR.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Eylemler",
+  "actionsAvailable": "Eylemler mevcut.",
+  "clearSelection": "Seçimi temizle",
+  "selected": "{count, plural, =0 {Hiçbiri seçilmedi} other {# seçildi}}",
+  "selectedAll": "Tümü seçildi"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/uk-UA.json b/packages/@react-spectrum/actionbar/intl/uk-UA.json
new file mode 100644
index 00000000000..b2e0206ab9a
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/uk-UA.json
@@ -0,0 +1,7 @@
+{
+  "actions": "Дії",
+  "actionsAvailable": "Доступні дії.",
+  "clearSelection": "Очистити вибір",
+  "selected": "{count, plural, =0 {Нічого не вибрано} other {Вибрано: #}}",
+  "selectedAll": "Усе вибрано"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/zh-CN.json b/packages/@react-spectrum/actionbar/intl/zh-CN.json
new file mode 100644
index 00000000000..4d418ddb553
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/zh-CN.json
@@ -0,0 +1,7 @@
+{
+  "actions": "操作",
+  "actionsAvailable": "有可用操作。",
+  "clearSelection": "清除选择",
+  "selected": "{count, plural, =0 {无选择} other {已选择 # 个}}",
+  "selectedAll": "全选"
+}
diff --git a/packages/@react-spectrum/actionbar/intl/zh-TW.json b/packages/@react-spectrum/actionbar/intl/zh-TW.json
new file mode 100644
index 00000000000..625231005fa
--- /dev/null
+++ b/packages/@react-spectrum/actionbar/intl/zh-TW.json
@@ -0,0 +1,7 @@
+{
+  "actions": "動作",
+  "actionsAvailable": "可執行的動作。",
+  "clearSelection": "清除選取項目",
+  "selected": "{count, plural, =0 {未選取任何項目} other {已選取 # 個}}",
+  "selectedAll": "已選取所有項目"
+}
diff --git a/packages/@react-spectrum/list/intl/da-DK.json b/packages/@react-spectrum/list/intl/da-DK.json
index a3c71522444..ede7725509d 100644
--- a/packages/@react-spectrum/list/intl/da-DK.json
+++ b/packages/@react-spectrum/list/intl/da-DK.json
@@ -1,4 +1,4 @@
 {
-  "loading": "Indlæser ...",
-  "loadingMore": "Indlæser flere ..."
+  "loading": "Indlæser...",
+  "loadingMore": "Indlæser flere..."
 }
diff --git a/packages/@react-spectrum/list/intl/ko-KR.json b/packages/@react-spectrum/list/intl/ko-KR.json
index 73efea1a885..2237c6276c8 100644
--- a/packages/@react-spectrum/list/intl/ko-KR.json
+++ b/packages/@react-spectrum/list/intl/ko-KR.json
@@ -1,4 +1,4 @@
 {
-  "loading": "로드 중",
-  "loadingMore": "추가 로드 중"
+  "loading": "로드 중…",
+  "loadingMore": "추가 로드 중…"
 }
diff --git a/packages/@react-spectrum/list/intl/sl-SI.json b/packages/@react-spectrum/list/intl/sl-SI.json
index f8a1740bda0..62cd1a24718 100644
--- a/packages/@react-spectrum/list/intl/sl-SI.json
+++ b/packages/@react-spectrum/list/intl/sl-SI.json
@@ -1,4 +1,4 @@
 {
-  "loading": "Nalaganje...",
-  "loadingMore": "Nalaganje več vsebine..."
+  "loading": "Nalaganje ...",
+  "loadingMore": "Nalaganje več vsebine ..."
 }
diff --git a/packages/@react-spectrum/list/intl/zh-TW.json b/packages/@react-spectrum/list/intl/zh-TW.json
index 7e07f8b9651..85b3feea22b 100644
--- a/packages/@react-spectrum/list/intl/zh-TW.json
+++ b/packages/@react-spectrum/list/intl/zh-TW.json
@@ -1,4 +1,4 @@
 {
-  "loading": "正在載入",
+  "loading": "載入中…",
   "loadingMore": "正在載入更多…"
 }
diff --git a/packages/@react-spectrum/menu/intl/ar-AE.json b/packages/@react-spectrum/menu/intl/ar-AE.json
new file mode 100644
index 00000000000..daaacec9545
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/ar-AE.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "المزيد من الإجراءات"
+}
diff --git a/packages/@react-spectrum/menu/intl/bg-BG.json b/packages/@react-spectrum/menu/intl/bg-BG.json
new file mode 100644
index 00000000000..0a265951a69
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/bg-BG.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Повече действия"
+}
diff --git a/packages/@react-spectrum/menu/intl/cs-CZ.json b/packages/@react-spectrum/menu/intl/cs-CZ.json
new file mode 100644
index 00000000000..f0611807488
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/cs-CZ.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Další akce"
+}
diff --git a/packages/@react-spectrum/menu/intl/da-DK.json b/packages/@react-spectrum/menu/intl/da-DK.json
new file mode 100644
index 00000000000..6c69e085275
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/da-DK.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Flere handlinger"
+}
diff --git a/packages/@react-spectrum/menu/intl/de-DE.json b/packages/@react-spectrum/menu/intl/de-DE.json
index 7d296d21db5..3828513b48f 100644
--- a/packages/@react-spectrum/menu/intl/de-DE.json
+++ b/packages/@react-spectrum/menu/intl/de-DE.json
@@ -1,3 +1,3 @@
 {
-    "moreActions": "Weitere Aktionen"
-}
\ No newline at end of file
+  "moreActions": "Mehr Aktionen"
+}
diff --git a/packages/@react-spectrum/menu/intl/el-GR.json b/packages/@react-spectrum/menu/intl/el-GR.json
new file mode 100644
index 00000000000..6dc160466b4
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/el-GR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Περισσότερες ενέργειες"
+}
diff --git a/packages/@react-spectrum/menu/intl/es-ES.json b/packages/@react-spectrum/menu/intl/es-ES.json
new file mode 100644
index 00000000000..cb6091f8cf3
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/es-ES.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Más acciones"
+}
diff --git a/packages/@react-spectrum/menu/intl/et-EE.json b/packages/@react-spectrum/menu/intl/et-EE.json
new file mode 100644
index 00000000000..1119e5c8798
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/et-EE.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Veel toiminguid"
+}
diff --git a/packages/@react-spectrum/menu/intl/fi-FI.json b/packages/@react-spectrum/menu/intl/fi-FI.json
new file mode 100644
index 00000000000..4554286fbf3
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/fi-FI.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Lisää toimintoja"
+}
diff --git a/packages/@react-spectrum/menu/intl/fr-FR.json b/packages/@react-spectrum/menu/intl/fr-FR.json
new file mode 100644
index 00000000000..0ecd78344cf
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/fr-FR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Autres actions"
+}
diff --git a/packages/@react-spectrum/menu/intl/he-IL.json b/packages/@react-spectrum/menu/intl/he-IL.json
new file mode 100644
index 00000000000..d87379978a6
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/he-IL.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "פעולות נוספות"
+}
diff --git a/packages/@react-spectrum/menu/intl/hr-HR.json b/packages/@react-spectrum/menu/intl/hr-HR.json
new file mode 100644
index 00000000000..e6233832574
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/hr-HR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Dodatne radnje"
+}
diff --git a/packages/@react-spectrum/menu/intl/hu-HU.json b/packages/@react-spectrum/menu/intl/hu-HU.json
new file mode 100644
index 00000000000..294d13d5617
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/hu-HU.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "További lehetőségek"
+}
diff --git a/packages/@react-spectrum/menu/intl/it-IT.json b/packages/@react-spectrum/menu/intl/it-IT.json
new file mode 100644
index 00000000000..08415783631
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/it-IT.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Altre azioni"
+}
diff --git a/packages/@react-spectrum/menu/intl/ja-JP.json b/packages/@react-spectrum/menu/intl/ja-JP.json
new file mode 100644
index 00000000000..a471d0230c4
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/ja-JP.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "その他のアクション"
+}
diff --git a/packages/@react-spectrum/menu/intl/ko-KR.json b/packages/@react-spectrum/menu/intl/ko-KR.json
new file mode 100644
index 00000000000..6f51d6da600
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/ko-KR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "기타 작업"
+}
diff --git a/packages/@react-spectrum/menu/intl/lt-LT.json b/packages/@react-spectrum/menu/intl/lt-LT.json
new file mode 100644
index 00000000000..9ed679292ba
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/lt-LT.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Daugiau veiksmų"
+}
diff --git a/packages/@react-spectrum/menu/intl/lv-LV.json b/packages/@react-spectrum/menu/intl/lv-LV.json
new file mode 100644
index 00000000000..db4a18944c3
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/lv-LV.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Citas darbības"
+}
diff --git a/packages/@react-spectrum/menu/intl/nb-NO.json b/packages/@react-spectrum/menu/intl/nb-NO.json
new file mode 100644
index 00000000000..6c69e085275
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/nb-NO.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Flere handlinger"
+}
diff --git a/packages/@react-spectrum/menu/intl/nl-NL.json b/packages/@react-spectrum/menu/intl/nl-NL.json
new file mode 100644
index 00000000000..96ba0160a3b
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/nl-NL.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Meer handelingen"
+}
diff --git a/packages/@react-spectrum/menu/intl/pl-PL.json b/packages/@react-spectrum/menu/intl/pl-PL.json
new file mode 100644
index 00000000000..bc400ee8fa6
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/pl-PL.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Więcej akcji"
+}
diff --git a/packages/@react-spectrum/menu/intl/pt-BR.json b/packages/@react-spectrum/menu/intl/pt-BR.json
new file mode 100644
index 00000000000..1968263ec48
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/pt-BR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Mais ações"
+}
diff --git a/packages/@react-spectrum/menu/intl/pt-PT.json b/packages/@react-spectrum/menu/intl/pt-PT.json
new file mode 100644
index 00000000000..1968263ec48
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/pt-PT.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Mais ações"
+}
diff --git a/packages/@react-spectrum/menu/intl/ro-RO.json b/packages/@react-spectrum/menu/intl/ro-RO.json
new file mode 100644
index 00000000000..fa9ef9e3042
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/ro-RO.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Mai multe acțiuni"
+}
diff --git a/packages/@react-spectrum/menu/intl/ru-RU.json b/packages/@react-spectrum/menu/intl/ru-RU.json
new file mode 100644
index 00000000000..f7476e7f983
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/ru-RU.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Дополнительные действия"
+}
diff --git a/packages/@react-spectrum/menu/intl/sk-SK.json b/packages/@react-spectrum/menu/intl/sk-SK.json
new file mode 100644
index 00000000000..f13c59dc17c
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/sk-SK.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Ďalšie akcie"
+}
diff --git a/packages/@react-spectrum/menu/intl/sl-SI.json b/packages/@react-spectrum/menu/intl/sl-SI.json
new file mode 100644
index 00000000000..2124b558f31
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/sl-SI.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Več možnosti"
+}
diff --git a/packages/@react-spectrum/menu/intl/sr-SP.json b/packages/@react-spectrum/menu/intl/sr-SP.json
new file mode 100644
index 00000000000..e6233832574
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/sr-SP.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Dodatne radnje"
+}
diff --git a/packages/@react-spectrum/menu/intl/sv-SE.json b/packages/@react-spectrum/menu/intl/sv-SE.json
new file mode 100644
index 00000000000..588a6720b2f
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/sv-SE.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Fler åtgärder"
+}
diff --git a/packages/@react-spectrum/menu/intl/tr-TR.json b/packages/@react-spectrum/menu/intl/tr-TR.json
new file mode 100644
index 00000000000..1621f117140
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/tr-TR.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Daha fazla eylem"
+}
diff --git a/packages/@react-spectrum/menu/intl/uk-UA.json b/packages/@react-spectrum/menu/intl/uk-UA.json
new file mode 100644
index 00000000000..ef2637bf1fa
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/uk-UA.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "Більше дій"
+}
diff --git a/packages/@react-spectrum/menu/intl/zh-CN.json b/packages/@react-spectrum/menu/intl/zh-CN.json
new file mode 100644
index 00000000000..dfdecc8c489
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "更多操作"
+}
diff --git a/packages/@react-spectrum/menu/intl/zh-TW.json b/packages/@react-spectrum/menu/intl/zh-TW.json
new file mode 100644
index 00000000000..3a645a6b56d
--- /dev/null
+++ b/packages/@react-spectrum/menu/intl/zh-TW.json
@@ -0,0 +1,3 @@
+{
+  "moreActions": "更多動作"
+}