@react-stately/datepicker 3.0.0-nightly.3180 → 3.0.0

package/src/placeholders.ts

@@ -0,0 +1,108 @@
+/*
+ * 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 {MessageDictionary} from '@internationalized/message';
+
+// These placeholders are based on the strings used by the <input type="date">
+// implementations in Chrome and Firefox. Additional languages are supported
+// here than React Spectrum's typical translations.
+const placeholders = new MessageDictionary({
+  ach: {year: 'mwaka', month: 'dwe', day: 'nino'},
+  af: {year: 'jjjj', month: 'mm', day: 'dd'},
+  am: {year: 'ዓዓዓዓ', month: 'ሚሜ', day: 'ቀቀ'},
+  an: {year: 'aaaa', month: 'mm', day: 'dd'},
+  ar: {year: 'سنة', month: 'شهر', day: 'يوم'},
+  ast: {year: 'aaaa', month: 'mm', day: 'dd'},
+  az: {year: 'iiii', month: 'aa', day: 'gg'},
+  be: {year: 'гггг', month: 'мм', day: 'дд'},
+  bg: {year: 'гггг', month: 'мм', day: 'дд'},
+  bn: {year: 'yyyy', month: 'মিমি', day: 'dd'},
+  br: {year: 'bbbb', month: 'mm', day: 'dd'},
+  bs: {year: 'gggg', month: 'mm', day: 'dd'},
+  ca: {year: 'aaaa', month: 'mm', day: 'dd'},
+  cak: {year: 'jjjj', month: 'ii', day: "q'q'"},
+  ckb: {year: 'ساڵ', month: 'مانگ', day: 'ڕۆژ'},
+  cs: {year: 'rrrr', month: 'mm', day: 'dd'},
+  cy: {year: 'bbbb', month: 'mm', day: 'dd'},
+  da: {year: 'åååå', month: 'mm', day: 'dd'},
+  de: {year: 'jjjj', month: 'mm', day: 'tt'},
+  dsb: {year: 'llll', month: 'mm', day: 'źź'},
+  el: {year: 'εεεε', month: 'μμ', day: 'ηη'},
+  en: {year: 'yyyy', month: 'mm', day: 'dd'},
+  eo: {year: 'jjjj', month: 'mm', day: 'tt'},
+  es: {year: 'aaaa', month: 'mm', day: 'dd'},
+  et: {year: 'aaaa', month: 'kk', day: 'pp'},
+  eu: {year: 'uuuu', month: 'hh', day: 'ee'},
+  fa: {year: 'سال', month: 'ماه', day: 'روز'},
+  ff: {year: 'hhhh', month: 'll', day: 'ññ'},
+  fi: {year: 'vvvv', month: 'kk', day: 'pp'},
+  fr: {year: 'aaaa', month: 'mm', day: 'jj'},
+  fy: {year: 'jjjj', month: 'mm', day: 'dd'},
+  ga: {year: 'bbbb', month: 'mm', day: 'll'},
+  gd: {year: 'bbbb', month: 'mm', day: 'll'},
+  gl: {year: 'aaaa', month: 'mm', day: 'dd'},
+  he: {year: 'שנה', month: 'חודש', day: 'יום'},
+  hr: {year: 'gggg', month: 'mm', day: 'dd'},
+  hsb: {year: 'llll', month: 'mm', day: 'dd'},
+  hu: {year: 'éééé', month: 'hh', day: 'nn'},
+  ia: {year: 'aaaa', month: 'mm', day: 'dd'},
+  id: {year: 'tttt', month: 'bb', day: 'hh'},
+  it: {year: 'aaaa', month: 'mm', day: 'gg'},
+  ja: {year: ' 年 ', month: '月', day: '日'},
+  ka: {year: 'წწწწ', month: 'თთ', day: 'რრ'},
+  kk: {year: 'жжжж', month: 'аа', day: 'кк'},
+  kn: {year: 'ವವವವ', month: 'ಮಿಮೀ', day: 'ದಿದಿ'},
+  ko: {year: '연도', month: '월', day: '일'},
+  lb: {year: 'jjjj', month: 'mm', day: 'dd'},
+  lo: {year: 'ປປປປ', month: 'ດດ', day: 'ວວ'},
+  lt: {year: 'mmmm', month: 'mm', day: 'dd'},
+  lv: {year: 'gggg', month: 'mm', day: 'dd'},
+  meh: {year: 'aaaa', month: 'mm', day: 'dd'},
+  ml: {year: 'വർഷം', month: 'മാസം', day: 'തീയതി'},
+  ms: {year: 'tttt', month: 'mm', day: 'hh'},
+  nl: {year: 'jjjj', month: 'mm', day: 'dd'},
+  nn: {year: 'åååå', month: 'mm', day: 'dd'},
+  no: {year: 'åååå', month: 'mm', day: 'dd'},
+  oc: {year: 'aaaa', month: 'mm', day: 'jj'},
+  pl: {year: 'rrrr', month: 'mm', day: 'dd'},
+  pt: {year: 'aaaa', month: 'mm', day: 'dd'},
+  rm: {year: 'oooo', month: 'mm', day: 'dd'},
+  ro: {year: 'aaaa', month: 'll', day: 'zz'},
+  ru: {year: 'гггг', month: 'мм', day: 'дд'},
+  sc: {year: 'aaaa', month: 'mm', day: 'dd'},
+  scn: {year: 'aaaa', month: 'mm', day: 'jj'},
+  sk: {year: 'rrrr', month: 'mm', day: 'dd'},
+  sl: {year: 'llll', month: 'mm', day: 'dd'},
+  sr: {year: 'гггг', month: 'мм', day: 'дд'},
+  sv: {year: 'åååå', month: 'mm', day: 'dd'},
+  szl: {year: 'rrrr', month: 'mm', day: 'dd'},
+  tg: {year: 'сссс', month: 'мм', day: 'рр'},
+  th: {year: 'ปปปป', month: 'ดด', day: 'วว'},
+  tr: {year: 'yyyy', month: 'aa', day: 'gg'},
+  uk: {year: 'рррр', month: 'мм', day: 'дд'},
+  'zh-CN': {year: '年', month: '月', day: '日'},
+  'zh-TW': {year: '年', month: '月', day: '日'}
+}, 'en');
+
+export function getPlaceholder(field: string, value: string, locale: string) {
+  // Use the actual placeholder value for the era and day period fields.
+  if (field === 'era' || field === 'dayPeriod') {
+    return value;
+  }
+
+  if (field === 'year' || field === 'month' || field === 'day') {
+    return placeholders.getStringForLocale(field, locale);
+  }
+
+  // For time fields (e.g. hour, minute, etc.), use two dashes as the placeholder.
+  return '––';
+}

package/src/useDateFieldState.ts

@@ -13,6 +13,7 @@
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
 import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
@@ -31,6 +32,8 @@ export interface DateSegment {
   maxValue?: number,
   /** Whether the value is a placeholder. */
   isPlaceholder: boolean,
+  /** A placeholder string for the segment. */
+  placeholder: string,
   /** Whether the segment is editable. */
   isEditable: boolean
 }
@@ -40,6 +43,8 @@ export interface DateFieldState {
   value: DateValue,
   /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
+  /** The calendar system currently in use. */
+  calendar: Calendar,
   /** Sets the field's value. */
   setValue(value: DateValue): void,
   /** A list of segments for the current value. */
@@ -50,6 +55,8 @@ export interface DateFieldState {
   validationState: ValidationState,
   /** The granularity for the field, based on the `granularity` prop and current value. */
   granularity: Granularity,
+  /** The maximum date or time unit that is displayed in the field. */
+  maxGranularity: 'year' | 'month' | Granularity,
   /** Whether the field is disabled. */
   isDisabled: boolean,
   /** Whether the field is read only. */
@@ -73,12 +80,10 @@ export interface DateFieldState {
    */
   decrementPage(type: SegmentType): void,
   /** Sets the value of the given segment. */
+  setSegment(type: 'era', value: string): void,
   setSegment(type: SegmentType, value: number): void,
-  /**
-   * Replaces the value of the date field with the placeholder value.
-   * If a segment type is provided, only that segment is confirmed. Otherwise, all segments that have not been entered yet are confirmed.
-   */
-  confirmPlaceholder(type?: SegmentType): void,
+  /** Updates the remaining unfilled segments with the placeholder value. */
+  confirmPlaceholder(): void,
   /** Clears the value of the given segment, reverting it to the placeholder. */
   clearSegment(type: SegmentType): void,
   /** Formats the current date value using the given options. */
@@ -110,7 +115,7 @@ const TYPE_MAPPING = {
   dayperiod: 'dayPeriod'
 };
 
-interface DatePickerFieldProps extends DatePickerProps<DateValue> {
+export interface DateFieldStateOptions extends DatePickerProps<DateValue> {
   /**
    * The maximum unit to display in the date field.
    * @default 'year'
@@ -132,7 +137,7 @@ interface DatePickerFieldProps extends DatePickerProps<DateValue> {
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
+export function useDateFieldState(props: DateFieldStateOptions): DateFieldState {
   let {
     locale,
     createCalendar,
@@ -151,22 +156,43 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]);
+  let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]);
+
+  let [value, setDate] = useControlledState<DateValue>(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+
+  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+
+  // We keep track of the placeholder date separately in state so that onChange is not called
+  // until all segments are set. If the value === null (not undefined), then assume the component
+  // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
+  // change from uncontrolled to controlled and emit a warning.
+  let [placeholderDate, setPlaceholderDate] = useState(
+    () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)
+  );
+
+  let val = calendarValue || placeholderDate;
+  let showEra = calendar.identifier === 'gregory' && val.era === 'BC';
   let formatOpts = useMemo(() => ({
     granularity,
     maxGranularity: props.maxGranularity ?? 'year',
     timeZone: defaultTimeZone,
     hideTimeZone,
-    hourCycle: props.hourCycle
-  }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]);
+    hourCycle: props.hourCycle,
+    showEra
+  }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone, showEra]);
   let opts = useMemo(() => getFormatOptions({}, formatOpts), [formatOpts]);
 
   let dateFormatter = useMemo(() => new DateFormatter(locale, opts), [locale, opts]);
   let resolvedOptions = useMemo(() => dateFormatter.resolvedOptions(), [dateFormatter]);
-  let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
   // Determine how many editable segments there are for validation purposes.
   // The result is cached for performance.
-  let allSegments = useMemo(() =>
+  let allSegments: Partial<typeof EDITABLE_SEGMENTS> = useMemo(() =>
     dateFormatter.formatToParts(new Date())
       .filter(seg => EDITABLE_SEGMENTS[seg.type])
       .reduce((p, seg) => (p[seg.type] = true, p), {})
@@ -176,14 +202,6 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
     () => props.value || props.defaultValue ? {...allSegments} : {}
   );
 
-  // We keep track of the placeholder date separately in state so that onChange is not called
-  // until all segments are set. If the value === null (not undefined), then assume the component
-  // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
-  // change from uncontrolled to controlled and emit a warning.
-  let [placeholderDate, setPlaceholderDate] = useState(
-    () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)
-  );
-
   // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
   useEffect(() => {
@@ -197,14 +215,6 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
     }
   }, [calendar, granularity, validSegments, defaultTimeZone, props.placeholderValue]);
 
-  let [value, setDate] = useControlledState<DateValue>(
-    props.value,
-    props.defaultValue,
-    props.onChange
-  );
-
-  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
-
   // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
   if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
     validSegments = {...allSegments};
@@ -244,29 +254,46 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
           isEditable = false;
         }
 
+        let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
+        let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
         return {
           type: TYPE_MAPPING[segment.type] || segment.type,
-          text: segment.value,
+          text: isPlaceholder ? placeholder : segment.value,
           ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
-          isPlaceholder: EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+          isPlaceholder,
+          placeholder,
           isEditable
         } as DateSegment;
       })
-  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar]);
+  , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale]);
 
-  let hasEra = useMemo(() => segments.some(s => s.type === 'era'), [segments]);
+  // When the era field appears, mark it valid if the year field is already valid.
+  // If the era field disappears, remove it from the valid segments.
+  if (allSegments.era && validSegments.year && !validSegments.era) {
+    validSegments.era = true;
+    setValidSegments({...validSegments});
+  } else if (!allSegments.era && validSegments.era) {
+    delete validSegments.era;
+    setValidSegments({...validSegments});
+  }
 
   let markValid = (part: Intl.DateTimeFormatPartTypes) => {
     validSegments[part] = true;
-    if (part === 'year' && hasEra) {
+    if (part === 'year' && allSegments.era) {
       validSegments.era = true;
     }
     setValidSegments({...validSegments});
   };
 
   let adjustSegment = (type: Intl.DateTimeFormatPartTypes, amount: number) => {
-    markValid(type);
-    setValue(addSegment(displayValue, type, amount, resolvedOptions));
+    if (!validSegments[type]) {
+      markValid(type);
+      if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        setValue(displayValue);
+      }
+    } else {
+      setValue(addSegment(displayValue, type, amount, resolvedOptions));
+    }
   };
 
   let validationState: ValidationState = props.validationState ||
@@ -275,11 +302,13 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
   return {
     value: calendarValue,
     dateValue,
+    calendar,
     setValue,
     segments,
     dateFormatter,
     validationState,
     granularity,
+    maxGranularity: props.maxGranularity ?? 'year',
     isDisabled,
     isReadOnly,
     isRequired,
@@ -299,21 +328,17 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
       markValid(part);
       setValue(setSegment(displayValue, part, v, resolvedOptions));
     },
-    confirmPlaceholder(part) {
+    confirmPlaceholder() {
       if (props.isDisabled || props.isReadOnly) {
         return;
       }
 
-      if (!part) {
-        // Confirm the rest of the placeholder if any of the segments are valid.
-        let numValid = Object.keys(validSegments).length;
-        if (numValid > 0 && numValid < Object.keys(allSegments).length) {
-          validSegments = {...allSegments};
-          setValidSegments(validSegments);
-          setValue(displayValue.copy());
-        }
-      } else if (!validSegments[part]) {
-        markValid(part);
+      // Confirm the placeholder if only the day period is not filled in.
+      let validKeys = Object.keys(validSegments);
+      let allKeys = Object.keys(allSegments);
+      if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) {
+        validSegments = {...allSegments};
+        setValidSegments(validSegments);
         setValue(displayValue.copy());
       }
     },
@@ -455,6 +480,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number, option
     case 'day':
     case 'month':
     case 'year':
+    case 'era':
       return value.set({[part]: segmentValue});
   }
 

package/src/useDatePickerState.ts

@@ -15,10 +15,11 @@ import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/d
 import {FieldOptions, getFormatOptions, getPlaceholderTime, useDefaultProps} from './utils';
 import {isInvalid} from './utils';
 import {useControlledState} from '@react-stately/utils';
+import {useOverlayTriggerState} from '@react-stately/overlays';
 import {useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
-export interface DatePickerOptions extends DatePickerProps<DateValue> {
+export interface DatePickerStateOptions extends DatePickerProps<DateValue> {
   /**
    * Determines whether the date picker popover should close automatically when a date is selected.
    * @default true
@@ -63,8 +64,8 @@ export interface DatePickerState {
  * Provides state management for a date picker component.
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
-export function useDatePickerState(props: DatePickerOptions): DatePickerState {
-  let [isOpen, setOpen] = useState(false);
+export function useDatePickerState(props: DatePickerStateOptions): DatePickerState {
+  let overlayState = useOverlayTriggerState(props);
   let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
 
   let v = (value || props.placeholderValue);
@@ -106,7 +107,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
     }
 
     if (shouldClose) {
-      setOpen(false);
+      overlayState.setOpen(false);
     }
   };
 
@@ -131,7 +132,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
     setTimeValue: selectTime,
     granularity,
     hasTime,
-    isOpen,
+    isOpen: overlayState.isOpen,
     setOpen(isOpen) {
       // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.
       // If only the time was set and not the date, don't commit. The state will be preserved until
@@ -140,7 +141,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
         commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue));
       }
 
-      setOpen(isOpen);
+      overlayState.setOpen(isOpen);
     },
     validationState,
     formatValue(locale, fieldOptions) {
@@ -152,7 +153,8 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
         granularity,
         timeZone: defaultTimeZone,
         hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
+        hourCycle: props.hourCycle,
+        showEra: value.calendar.identifier === 'gregory' && value.era === 'BC'
       });
 
       let formatter = new DateFormatter(locale, formatOptions);

package/src/useDateRangePickerState.ts

@@ -10,14 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {createPlaceholderDate, FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
-import {useRef, useState} from 'react';
+import {useOverlayTriggerState} from '@react-stately/overlays';
+import {useState} from 'react';
 
-export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> {
+export interface DateRangePickerStateOptions extends DateRangePickerProps<DateValue> {
   /**
    * Determines whether the date picker popover should close automatically when a date is selected.
    * @default true
@@ -62,9 +63,7 @@ export interface DateRangePickerState {
   /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */
   validationState: ValidationState,
   /** Formats the selected range using the given options. */
-  formatValue(locale: string, fieldOptions: FieldOptions): string,
-  /** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */
-  confirmPlaceholder(): void
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string}
 }
 
 /**
@@ -72,8 +71,8 @@ export interface DateRangePickerState {
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState {
-  let [isOpen, setOpen] = useState(false);
+export function useDateRangePickerState(props: DateRangePickerStateOptions): DateRangePickerState {
+  let overlayState = useOverlayTriggerState(props);
   let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
   let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
 
@@ -84,11 +83,8 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
   }
 
   let value = controlledValue || placeholderValue;
-  let valueRef = useRef(value);
-  valueRef.current = value;
 
   let setValue = (value: DateRange) => {
-    valueRef.current = value;
     setPlaceholderValue(value);
     if (value?.start && value.end) {
       setControlledValue(value);
@@ -98,7 +94,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
   };
 
   let v = (value?.start || value?.end || props.placeholderValue);
-  let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
+  let [granularity] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -138,7 +134,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
     }
 
     if (shouldClose) {
-      setOpen(false);
+      overlayState.setOpen(false);
     }
   };
 
@@ -177,7 +173,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
     },
     setDateRange,
     setTimeRange,
-    isOpen,
+    isOpen: overlayState.isOpen,
     setOpen(isOpen) {
       // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
       // If only the time range was set and not the date range, don't commit. The state will be preserved until
@@ -189,12 +185,12 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         });
       }
 
-      setOpen(isOpen);
+      overlayState.setOpen(isOpen);
     },
     validationState,
     formatValue(locale, fieldOptions) {
       if (!value || !value.start || !value.end) {
-        return '';
+        return null;
       }
 
       let startTimeZone = 'timeZone' in value.start ? value.start.timeZone : undefined;
@@ -206,17 +202,47 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         granularity: startGranularity,
         timeZone: startTimeZone,
         hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
+        hourCycle: props.hourCycle,
+        showEra: (value.start.calendar.identifier === 'gregory' && value.start.era === 'BC') ||
+          (value.end.calendar.identifier === 'gregory' && value.end.era === 'BC')
       });
 
+      let startDate = value.start.toDate(startTimeZone || 'UTC');
+      let endDate = value.end.toDate(endTimeZone || 'UTC');
+
       let startFormatter = new DateFormatter(locale, startOptions);
       let endFormatter: Intl.DateTimeFormat;
-      if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
+      if (startTimeZone === endTimeZone && startGranularity === endGranularity && value.start.compare(value.end) !== 0) {
         // 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).
         // 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));
+          let parts = startFormatter.formatRangeToParts(startDate, endDate);
+
+          // Find the separator between the start and end date. This is determined
+          // by finding the last shared literal before the end range.
+          let separatorIndex = -1;
+          for (let i = 0; i < parts.length; i++) {
+            let part = parts[i];
+            if (part.source === 'shared' && part.type === 'literal') {
+              separatorIndex = i;
+            } else if (part.source === 'endRange') {
+              break;
+            }
+          }
+
+          // Now we can combine the parts into start and end strings.
+          let start = '';
+          let end = '';
+          for (let i = 0; i < parts.length; i++) {
+            if (i < separatorIndex) {
+              start += parts[i].value;
+            } else if (i > separatorIndex) {
+              end += parts[i].value;
+            }
+          }
+
+          return {start, end};
         } catch (e) {
           // ignore
         }
@@ -233,20 +259,10 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         endFormatter = new DateFormatter(locale, endOptions);
       }
 
-      return `${startFormatter.format(value.start.toDate(startTimeZone))} – ${endFormatter.format(value.end.toDate(endTimeZone))}`;
-    },
-    confirmPlaceholder() {
-      // Need to use ref value here because the value can be set in the same tick as
-      // a blur, which means the component won't have re-rendered yet.
-      let value = valueRef.current;
-      if (value && Boolean(value.start) !== Boolean(value.end)) {
-        let calendar = (value.start || value.end).calendar;
-        let placeholder = createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
-        setValue({
-          start: value.start || placeholder,
-          end: value.end || placeholder
-        });
-      }
+      return {
+        start: startFormatter.format(startDate),
+        end: endFormatter.format(endDate)
+      };
     }
   };
 }

package/src/useTimeFieldState.ts

@@ -16,7 +16,7 @@ import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, to
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
-interface TimeFieldProps extends TimePickerProps<TimeValue> {
+export interface TimeFieldStateOptions extends TimePickerProps<TimeValue> {
   /** The locale to display and edit the value according to. */
   locale: string
 }
@@ -26,7 +26,7 @@ interface TimeFieldProps extends TimePickerProps<TimeValue> {
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeFieldState(props: TimeFieldProps): DateFieldState {
+export function useTimeFieldState(props: TimeFieldStateOptions): DateFieldState {
   let {
     placeholderValue = new Time(),
     minValue,

package/src/utils.ts

@@ -27,7 +27,8 @@ interface FormatterOptions {
   hideTimeZone?: boolean,
   granularity?: DatePickerProps<any>['granularity'],
   maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
-  hourCycle?: 12 | 24
+  hourCycle?: 12 | 24,
+  showEra?: boolean
 }
 
 const DEFAULT_FIELD_OPTIONS: FieldOptions = {
@@ -76,6 +77,10 @@ export function getFormatOptions(
     opts.timeZoneName = 'short';
   }
 
+  if (options.showEra && startIdx === 0) {
+    opts.era = 'short';
+  }
+
   return opts;
 }