@react-stately/datepicker 3.0.0-nightly.3113 → 3.0.0-nightly.3114

package/src/{useDatePickerFieldState.ts → useDateFieldState.ts}

@@ -10,39 +10,92 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, CalendarDateTime, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
-import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils';
+import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
+import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
+import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
+export type SegmentType = 'era' | 'year' | 'month' | 'day' |  'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName';
 export interface DateSegment {
-  type: Intl.DateTimeFormatPartTypes,
+  /** The type of segment. */
+  type: SegmentType,
+  /** The formatted text for the segment. */
   text: string,
+  /** The numeric value for the segment, if applicable. */
   value?: number,
+  /** The minimum numeric value for the segment, if applicable. */
   minValue?: number,
+  /** The maximum numeric value for the segment, if applicable. */
   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
 }
 
-export interface DatePickerFieldState {
+export interface DateFieldState extends FormValidationState {
+  /** The current field value. */
   value: DateValue,
+  /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
-  setValue: (value: CalendarDateTime) => void,
+  /** 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. */
   segments: DateSegment[],
+  /** A date formatter configured for the current locale and format. */
   dateFormatter: DateFormatter,
+  /**
+   * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props.
+   * @deprecated Use `isInvalid` instead.
+   */
   validationState: ValidationState,
+  /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean,
+  /** The granularity for the field, based on the `granularity` prop and current value. */
   granularity: Granularity,
-  increment: (type: Intl.DateTimeFormatPartTypes) => void,
-  decrement: (type: Intl.DateTimeFormatPartTypes) => void,
-  incrementPage: (type: Intl.DateTimeFormatPartTypes) => void,
-  decrementPage: (type: Intl.DateTimeFormatPartTypes) => void,
-  setSegment: (type: Intl.DateTimeFormatPartTypes, value: number) => void,
-  confirmPlaceholder: (type?: Intl.DateTimeFormatPartTypes) => void,
-  clearSegment: (type?: Intl.DateTimeFormatPartTypes) => void,
-  getFormatOptions(fieldOptions: FieldOptions): Intl.DateTimeFormatOptions
+  /** 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. */
+  isReadOnly: boolean,
+  /** Whether the field is required. */
+  isRequired: boolean,
+  /** Increments the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
+  increment(type: SegmentType): void,
+  /** Decrements the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
+  decrement(type: SegmentType): void,
+  /**
+   * Increments the given segment by a larger amount, rounding it to the nearest increment.
+   * The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years.
+   * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
+   */
+  incrementPage(type: SegmentType): void,
+  /**
+   * Decrements the given segment by a larger amount, rounding it to the nearest increment.
+   * The amount to decrement by depends on the field, for example 15 minutes, 7 days, and 5 years.
+   * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
+   */
+  decrementPage(type: SegmentType): void,
+  /** Sets the value of the given segment. */
+  setSegment(type: 'era', value: string): void,
+  setSegment(type: SegmentType, value: number): 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. */
+  formatValue(fieldOptions: FieldOptions): string,
+  /** Gets a formatter based on state's props. */
+  getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
 }
 
 const EDITABLE_SEGMENTS = {
@@ -70,17 +123,39 @@ const TYPE_MAPPING = {
   dayperiod: 'dayPeriod'
 };
 
-interface DatePickerFieldProps<T extends DateValue> extends DatePickerProps<T> {
-  maxGranularity?: 'year' | 'month' | DatePickerProps<T>['granularity'],
+export interface DateFieldStateOptions<T extends DateValue = DateValue> extends DatePickerProps<T> {
+  /**
+   * The maximum unit to display in the date field.
+   * @default 'year'
+   */
+  maxGranularity?: 'year' | 'month' | Granularity,
+  /** The locale to display and edit the value according to. */
   locale: string,
+  /**
+   * A function that creates a [Calendar](../internationalized/date/Calendar.html)
+   * object for a given calendar identifier. Such a function may be imported from the
+   * `@internationalized/date` package, or manually implemented to include support for
+   * only certain calendars.
+   */
   createCalendar: (name: string) => Calendar
 }
 
-export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFieldProps<T>): DatePickerFieldState {
+/**
+ * Provides state management for a date field component.
+ * 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<T extends DateValue = DateValue>(props: DateFieldStateOptions<T>): DateFieldState {
   let {
     locale,
     createCalendar,
-    hideTimeZone
+    hideTimeZone,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    minValue,
+    maxValue,
+    isDateUnavailable
   } = props;
 
   let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
@@ -92,22 +167,44 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
     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,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros
+  }), [props.maxGranularity, granularity, props.hourCycle, props.shouldForceLeadingZeros, 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), {})
@@ -117,13 +214,7 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
     () => 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)
-  );
+  let clearedSegment = useRef<string>(undefined);
 
   // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
@@ -138,14 +229,6 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
     }
   }, [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};
@@ -165,8 +248,15 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
     if (props.isDisabled || props.isReadOnly) {
       return;
     }
+    let validKeys = Object.keys(validSegments);
+    let allKeys = Object.keys(allSegments);
 
-    if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+    // if all the segments are completed or a timefield with everything but am/pm set the time, also ignore when am/pm cleared
+    if (newValue == null) {
+      setDate(null);
+      setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
+      setValidSegments({});
+    } else if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')) {
       // 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());
@@ -174,6 +264,7 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
     } else {
       setPlaceholderDate(newValue);
     }
+    clearedSegment.current = null;
   };
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
@@ -185,42 +276,82 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
           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);
+      let validKeys = Object.keys(validSegments);
+      let allKeys = Object.keys(allSegments);
+      if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) {
+        setValue(displayValue);
+      }
+    } else {
+      setValue(addSegment(displayValue, type, amount, resolvedOptions));
+    }
   };
 
-  let validationState: ValidationState = props.validationState ||
-    (isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+  let builtinValidation = useMemo(() => getValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
+    ...validation,
     value: calendarValue,
     dateValue,
+    calendar,
     setValue,
     segments,
     dateFormatter,
     validationState,
+    isInvalid: isValueInvalid,
     granularity,
+    maxGranularity: props.maxGranularity ?? 'year',
+    isDisabled,
+    isReadOnly,
+    isRequired,
     increment(part) {
       adjustSegment(part, 1);
     },
@@ -237,26 +368,23 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
       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());
       }
     },
     clearSegment(part) {
       delete validSegments[part];
+      clearedSegment.current = part;
       setValidSegments({...validSegments});
 
       let placeholder = createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
@@ -278,8 +406,19 @@ export function useDatePickerFieldState<T extends DateValue>(props: DatePickerFi
       setDate(null);
       setValue(value);
     },
-    getFormatOptions(fieldOptions: FieldOptions) {
-      return getFormatOptions(fieldOptions, formatOpts);
+    formatValue(fieldOptions: FieldOptions) {
+      if (!calendarValue) {
+        return '';
+      }
+
+      let formatOptions = getFormatOptions(fieldOptions, formatOpts);
+      let formatter = new DateFormatter(locale, formatOptions);
+      return formatter.format(dateValue);
+    },
+    getDateFormatter(locale, formatOptions: FormatterOptions) {
+      let newOptions = {...formatOpts, ...formatOptions};
+      let newFormatOptions = getFormatOptions({}, newOptions);
+      return new DateFormatter(locale, newFormatOptions);
     }
   };
 }
@@ -387,6 +526,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

@@ -10,36 +10,76 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, DateFormatter, toCalendarDateTime, toDateFields} from '@internationalized/date';
+import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, useDefaultProps} from './utils';
-import {isInvalid} from './utils';
+import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
+import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
-export interface DatePickerState {
-  value: DateValue,
-  setValue: (value: DateValue) => void,
+export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> {
+  /**
+   * Determines whether the date picker popover should close automatically when a date is selected.
+   * @default true
+   */
+  shouldCloseOnSelect?: boolean | (() => boolean)
+}
+
+export interface DatePickerState extends OverlayTriggerState, FormValidationState {
+  /** The currently selected date. */
+  value: DateValue | null,
+  /** Sets the selected date. */
+  setValue(value: DateValue | null): void,
+  /**
+   * The date portion of the value. This may be set prior to `value` if the user has
+   * selected a date but has not yet selected a time.
+   */
   dateValue: DateValue,
-  setDateValue: (value: CalendarDate) => void,
+  /** Sets the date portion of the value. */
+  setDateValue(value: CalendarDate): void,
+  /**
+   * The time portion of the value. This may be set prior to `value` if the user has
+   * selected a time but has not yet selected a date.
+   */
   timeValue: TimeValue,
-  setTimeValue: (value: TimeValue) => void,
+  /** Sets the time portion of the value. */
+  setTimeValue(value: TimeValue): void,
+  /** The granularity for the field, based on the `granularity` prop and current value. */
+  granularity: Granularity,
+  /** Whether the date picker supports selecting a time, according to the `granularity` prop and current value. */
+  hasTime: boolean,
+  /** Whether the calendar popover is currently open. */
   isOpen: boolean,
-  setOpen: (isOpen: boolean) => void,
+  /** Sets whether the calendar popover is open. */
+  setOpen(isOpen: boolean): void,
+  /**
+   * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.
+   * @deprecated Use `isInvalid` instead.
+   */
   validationState: ValidationState,
+  /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean,
+  /** Formats the selected value using the given options. */
   formatValue(locale: string, fieldOptions: FieldOptions): string,
-  granularity: Granularity
+  /** Gets a formatter based on state's props. */
+  getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
 }
 
-export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T>): DatePickerState {
-  let [isOpen, setOpen] = useState(false);
+/**
+ * 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<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState {
+  let overlayState = useOverlayTriggerState(props);
   let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
 
   let v = (value || props.placeholderValue);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
-  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
+  let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
   let [selectedDate, setSelectedDate] = useState<DateValue>(null);
   let [selectedTime, setSelectedTime] = useState<TimeValue>(null);
@@ -56,39 +96,70 @@ export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let showEra = value?.calendar.identifier === 'gregory' && value.era === 'BC';
+  let formatOpts = useMemo(() => ({
+    granularity,
+    timeZone: defaultTimeZone,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    showEra
+  }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]);
+
+  let {minValue, maxValue, isDateUnavailable} = props;
+  let builtinValidation = useMemo(() => getValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+
   let commitValue = (date: DateValue, time: TimeValue) => {
-    setValue('timeZone' in time ? time.set(toDateFields(date)) : toCalendarDateTime(date, time));
+    setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
   let selectDate = (newValue: CalendarDate) => {
+    let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (selectedTime) {
-        commitValue(newValue, selectedTime);
+      if (selectedTime || shouldClose) {
+        commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue));
       } else {
         setSelectedDate(newValue);
       }
     } else {
       setValue(newValue);
+      validation.commitValidation();
     }
 
-    if (!hasTime) {
-      setOpen(false);
+    if (shouldClose) {
+      overlayState.setOpen(false);
     }
   };
 
   let selectTime = (newValue: TimeValue) => {
-    if (selectedDate) {
+    if (selectedDate && newValue) {
       commitValue(selectedDate, newValue);
     } else {
       setSelectedTime(newValue);
     }
   };
 
-  let validationState: ValidationState = props.validationState ||
-    (isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : null);
-
   return {
+    ...validation,
     value,
     setValue,
     dateValue: selectedDate,
@@ -96,7 +167,8 @@ export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T
     setDateValue: selectDate,
     setTimeValue: selectTime,
     granularity,
-    isOpen,
+    hasTime,
+    ...overlayState,
     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
@@ -105,23 +177,23 @@ export function useDatePickerState<T extends DateValue>(props: DatePickerProps<T
         commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue));
       }
 
-      setOpen(isOpen);
+      overlayState.setOpen(isOpen);
     },
     validationState,
+    isInvalid: isValueInvalid,
     formatValue(locale, fieldOptions) {
       if (!dateValue) {
         return '';
       }
 
-      let formatOptions = getFormatOptions(fieldOptions, {
-        granularity,
-        timeZone: defaultTimeZone,
-        hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
-      });
-
+      let formatOptions = getFormatOptions(fieldOptions, formatOpts);
       let formatter = new DateFormatter(locale, formatOptions);
       return formatter.format(dateValue);
+    },
+    getDateFormatter(locale, formatOptions: FormatterOptions) {
+      let newOptions = {...formatOpts, ...formatOptions};
+      let newFormatOptions = getFormatOptions({}, newOptions);
+      return new DateFormatter(locale, newFormatOptions);
     }
   };
 }