feat: S2 DateField/DatePicker/Calendar #8428

snowystinger · 2025-06-20T05:19:50Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-06-20T05:28:16Z

Build successful! 🎉

rspbot · 2025-06-23T01:43:55Z

Build successful! 🎉

rspbot · 2025-06-23T01:49:57Z

Build successful! 🎉

rspbot · 2025-06-23T02:13:03Z

Build successful! 🎉

rspbot · 2025-06-23T23:09:56Z

Build successful! 🎉

# Conflicts: # yarn.lock

rspbot · 2025-06-24T02:44:39Z

Build successful! 🎉

rspbot · 2025-06-24T02:49:50Z

Build successful! 🎉

rspbot · 2025-06-24T02:53:21Z

Build successful! 🎉

snowystinger · 2025-06-24T04:16:28Z

packages/@react-aria/calendar/src/index.ts

@@ -14,6 +14,7 @@ export {useCalendar} from './useCalendar';
 export {useRangeCalendar} from './useRangeCalendar';
 export {useCalendarGrid} from './useCalendarGrid';
 export {useCalendarCell} from './useCalendarCell';
+export {getEraFormat} from './utils';


another way to do this? see RangeCalendar implementation for use

snowystinger · 2025-06-24T04:16:51Z

packages/@react-spectrum/s2/src/Content.tsx

@@ -27,7 +27,8 @@ interface ContentProps extends UnsafeStyles, SlotProps {
  id?: string
 }

-interface HeadingProps extends ContentProps {
+interface HeadingProps extends Omit<ContentProps, 'children'> {
+  children?: ReactNode,


Needed to replace children in RangeCalendar

snowystinger · 2025-06-24T04:17:54Z

packages/@react-spectrum/s2/src/Field.tsx

@@ -187,10 +188,11 @@ const fieldGroupStyles = style({
 });

 export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {shouldTurnOffFocusRing, ...otherProps} = props;


date picker's button is focusable, and it's also inside the group, so needed a way to turn off the focus ring when the button has focus and has its own ring

snowystinger · 2025-06-24T04:18:44Z

packages/react-aria-components/src/Calendar.tsx

+   * Whether the cell is today.
+   * @selector [data-today]
+   */
+  isToday: boolean


figured this was a nice thing to expose, i could do it in Calendar directly though if we don't like it

snowystinger · 2025-06-24T04:19:34Z

packages/react-aria-components/src/Calendar.tsx

@@ -448,7 +453,7 @@ export {CalendarHeaderCellForwardRef as CalendarHeaderCell};

 export interface CalendarGridBodyProps extends StyleProps {
  /** A function to render a `<CalendarCell>` for a given date. */
-  children: (date: CalendarDate) => ReactElement
+  children: (date: CalendarDate, weekIndex: number, dayIndex: number) => ReactElement


needed to be able to determine what column a day was in for styling purposes so we can have a dashed border around ranges
better way to pass it along?

hmm couldn't you calculate this from the date itself?

I could, but the information already exists, so it seemed to make more sense not to do that calculation
I'll see how bad it is to calculate though

Check commit aa7701d#diff-08206439985c4bfe014f71e8aa5df9fbe4cbcf4c478f4923e9f551cb2b4b2af7R473 to see if you like this better, or if you think of a better way to account for all the edge cases

snowystinger · 2025-06-24T04:21:40Z

packages/react-aria-components/src/Calendar.tsx

-  date: CalendarDate
+  date: CalendarDate,
+  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
+  cellClassName?: string | ((values: CalendarCellRenderProps & {defaultClassName: string | undefined}) => string),


this has been asked for before, i forget where. right now there is no way to get styles or classnames on the td element of the table with all the days in it, so this adds that

hmm this is weird. is there a way to avoid it?

rspbot · 2025-06-27T04:14:40Z

Build successful! 🎉

rspbot · 2025-06-27T06:13:06Z

Build successful! 🎉

rspbot · 2025-06-27T06:26:36Z

Build successful! 🎉

rspbot · 2025-06-27T06:34:35Z

Build successful! 🎉

packages/@react-spectrum/s2/src/DateField.tsx

packages/@react-spectrum/s2/stories/DateField.stories.tsx

packages/@react-spectrum/s2/src/DatePicker.tsx

packages/@react-spectrum/s2/src/DateRangePicker.tsx

devongovett · 2025-06-28T00:10:12Z

packages/react-aria-components/src/DatePicker.tsx

@@ -73,7 +73,7 @@ export const DatePickerStateContext = createContext<DatePickerState | null>(null
 export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);

 // Contexts to clear inside the popover.
-const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext, OverlayTriggerStateContext];


DateRangePicker too?

What was this needed for? Seems like it might be nice to be able to programmatically close from within the popover

The Next/Prev buttons were getting the hover state.
And this array is applied to both DatePicker and DateRangePicker

devongovett · 2025-06-28T00:11:11Z

packages/react-aria-components/src/Calendar.tsx

-  date: CalendarDate
+  date: CalendarDate,
+  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
+  cellClassName?: string | ((values: CalendarCellRenderProps & {defaultClassName: string | undefined}) => string),


hmm this is weird. is there a way to avoid it?

devongovett · 2025-06-28T00:12:19Z

packages/react-aria-components/src/Calendar.tsx

@@ -448,7 +453,7 @@ export {CalendarHeaderCellForwardRef as CalendarHeaderCell};

 export interface CalendarGridBodyProps extends StyleProps {
  /** A function to render a `<CalendarCell>` for a given date. */
-  children: (date: CalendarDate) => ReactElement
+  children: (date: CalendarDate, weekIndex: number, dayIndex: number) => ReactElement


hmm couldn't you calculate this from the date itself?

packages/@react-spectrum/s2/stories/DatePicker.stories.tsx

devongovett · 2025-06-28T00:13:51Z

Let's try to reduce the duplication between components if we can. Many of the inner parts are identical.

snowystinger · 2025-06-28T02:22:31Z

Let's try to reduce the duplication between components if we can. Many of the inner parts are identical.

Yep, I left it as separate while i determined what was needed and due to #8428 (comment) . Will join them together now.

rspbot · 2025-06-30T09:35:35Z

Build successful! 🎉

rspbot · 2025-06-30T09:41:43Z

Build successful! 🎉

rspbot · 2025-06-30T09:48:07Z

Build successful! 🎉

rspbot · 2025-07-01T01:28:16Z

Build successful! 🎉

…calendar systems

rspbot · 2025-07-01T05:22:16Z

Build successful! 🎉

rspbot · 2025-07-01T10:13:58Z

Build successful! 🎉

rspbot · 2025-07-01T10:24:53Z

Build successful! 🎉

rspbot · 2025-07-01T10:24:54Z

## API Changes

react-aria-components

/react-aria-components:CalendarGrid

-CalendarGrid {
+CalendarGrid extends AllHTMLAttributes {
   children?: ReactElement | Array<ReactElement> | (CalendarDate) => ReactElement
   className?: string
   offset?: DateDuration
   weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
 }

/react-aria-components:useContextProps

 useContextProps <E extends Element, T, U extends SlotProps> {
   props: (T & SlotProps)
-  ref: ForwardedRef<E> | undefined
+  ref: ForwardedRef<E>
   context: Context<ContextValue<U, E>>
   returnVal: undefined
 }

/react-aria-components:CalendarCellRenderProps

 CalendarCellRenderProps {
   date: CalendarDate
   formattedDate: string
   isDisabled: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isInvalid: boolean
   isOutsideMonth: boolean
   isOutsideVisibleRange: boolean
   isPressed: boolean
   isSelected: boolean
   isSelectionEnd: boolean
   isSelectionStart: boolean
+  isToday: boolean
   isUnavailable: boolean
 }

@react-aria/calendar

/@react-aria/calendar:getEraFormat

+getEraFormat {
+  date: CalendarDate | undefined
+  returnVal: undefined
+}

@react-spectrum/s2

/@react-spectrum/s2:Heading

 Heading {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  children: ReactNode
+  children?: ReactNode
   id?: string
   isHidden?: boolean
   level?: number
   slot?: string | null
 }

/@react-spectrum/s2:Calendar

+Calendar <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean = false
+  children?: ChildrenOrFunction<CalendarRenderProps>
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultFocusedValue?: DateValue | null
+  defaultValue?: DateValue | null
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  focusedValue?: DateValue | null
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean = false
+  isInvalid?: boolean
+  isReadOnly?: boolean = false
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  onChange?: (MappedDateValue<DateValue>) => void
+  onFocusChange?: (CalendarDate) => void
+  pageBehavior?: PageBehavior = visible
+  slot?: string | null
+  styles?: StylesProp
+  value?: DateValue | null
+  visibleMonths?: number = 1
+}

/@react-spectrum/s2:CalendarContext

+CalendarContext {
+  UNTYPED
+}

/@react-spectrum/s2:DateField

+DateField <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultValue?: DateValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedDateValue<DateValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholderValue?: DateValue | null
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: DateValue | null
+}

/@react-spectrum/s2:DateFieldContext

+DateFieldContext {
+  UNTYPED
+}

/@react-spectrum/s2:DatePicker

+DatePicker <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultOpen?: boolean
+  defaultValue?: DateValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isOpen?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedDateValue<DateValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  onOpenChange?: (boolean) => void
+  pageBehavior?: PageBehavior = visible
+  placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: DateValue | null
+  visibleMonths?: number = 1
+}

/@react-spectrum/s2:DatePickerContext

+DatePickerContext {
+  UNTYPED
+}

/@react-spectrum/s2:DateRangePicker

+DateRangePicker <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  allowsNonContiguousRanges?: boolean
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultOpen?: boolean
+  defaultValue?: RangeValue<DateValue> | null
+  description?: ReactNode
+  endName?: string
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isOpen?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  onOpenChange?: (boolean) => void
+  pageBehavior?: PageBehavior = visible
+  placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  startName?: string
+  styles?: StylesProp
+  validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: RangeValue<DateValue> | null
+  visibleMonths?: number
+}

/@react-spectrum/s2:DateRangePickerContext

+DateRangePickerContext {
+  UNTYPED
+}

/@react-spectrum/s2:RangeCalendar

+RangeCalendar <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  allowsNonContiguousRanges?: boolean
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean = false
+  children?: ChildrenOrFunction<RangeCalendarRenderProps>
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultFocusedValue?: DateValue | null
+  defaultValue?: RangeValue<DateValue> | null
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  focusedValue?: DateValue | null
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean = false
+  isInvalid?: boolean
+  isReadOnly?: boolean = false
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
+  onFocusChange?: (CalendarDate) => void
+  pageBehavior?: PageBehavior = visible
+  slot?: string | null
+  styles?: StylesProp
+  value?: RangeValue<DateValue> | null
+  visibleMonths?: number
+}

/@react-spectrum/s2:RangeCalendarContext

+RangeCalendarContext {
+  UNTYPED
+}

/@react-spectrum/s2:TimeField

+TimeField <T extends TimeValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultValue?: TimeValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  granularity?: 'hour' | 'minute' | 'second' = 'minute'
+  hideTimeZone?: boolean
+  hourCycle?: number | number
+  id?: string
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: TimeValue | null
+  minValue?: TimeValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedTimeValue<TimeValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholderValue?: TimeValue
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: TimeValue | null
+}

/@react-spectrum/s2:TimeFieldContext

+TimeFieldContext {
+  UNTYPED
+}

/@react-spectrum/s2:CalendarProps

+CalendarProps <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean = false
+  children?: ChildrenOrFunction<CalendarRenderProps>
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultFocusedValue?: DateValue | null
+  defaultValue?: DateValue | null
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  focusedValue?: DateValue | null
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean = false
+  isInvalid?: boolean
+  isReadOnly?: boolean = false
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  onChange?: (MappedDateValue<DateValue>) => void
+  onFocusChange?: (CalendarDate) => void
+  pageBehavior?: PageBehavior = visible
+  slot?: string | null
+  styles?: StylesProp
+  value?: DateValue | null
+  visibleMonths?: number = 1
+}

/@react-spectrum/s2:DateFieldProps

+DateFieldProps <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultValue?: DateValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedDateValue<DateValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholderValue?: DateValue | null
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: DateValue | null
+}

/@react-spectrum/s2:DatePickerProps

+DatePickerProps <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultOpen?: boolean
+  defaultValue?: DateValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isOpen?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedDateValue<DateValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  onOpenChange?: (boolean) => void
+  pageBehavior?: PageBehavior = visible
+  placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: DateValue | null
+  visibleMonths?: number = 1
+}

/@react-spectrum/s2:DateRangePickerProps

+DateRangePickerProps <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  allowsNonContiguousRanges?: boolean
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultOpen?: boolean
+  defaultValue?: RangeValue<DateValue> | null
+  description?: ReactNode
+  endName?: string
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isOpen?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  onOpenChange?: (boolean) => void
+  pageBehavior?: PageBehavior = visible
+  placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  startName?: string
+  styles?: StylesProp
+  validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: RangeValue<DateValue> | null
+  visibleMonths?: number
+}

/@react-spectrum/s2:RangeCalendarProps

+RangeCalendarProps <T extends DateValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  allowsNonContiguousRanges?: boolean
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean = false
+  children?: ChildrenOrFunction<RangeCalendarRenderProps>
+  createCalendar?: (CalendarIdentifier) => Calendar
+  defaultFocusedValue?: DateValue | null
+  defaultValue?: RangeValue<DateValue> | null
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  focusedValue?: DateValue | null
+  id?: string
+  isDateUnavailable?: (DateValue) => boolean
+  isDisabled?: boolean = false
+  isInvalid?: boolean
+  isReadOnly?: boolean = false
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
+  onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
+  onFocusChange?: (CalendarDate) => void
+  pageBehavior?: PageBehavior = visible
+  slot?: string | null
+  styles?: StylesProp
+  value?: RangeValue<DateValue> | null
+  visibleMonths?: number
+}

/@react-spectrum/s2:TimeFieldProps

+TimeFieldProps <T extends TimeValue> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  contextualHelp?: ReactNode
+  defaultValue?: TimeValue | null
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  granularity?: 'hour' | 'minute' | 'second' = 'minute'
+  hideTimeZone?: boolean
+  hourCycle?: number | number
+  id?: string
+  isDisabled?: boolean
+  isInvalid?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: ReactNode
+  labelAlign?: Alignment = 'start'
+  labelPosition?: LabelPosition = 'top'
+  maxValue?: TimeValue | null
+  minValue?: TimeValue | null
+  name?: string
+  necessityIndicator?: NecessityIndicator = 'icon'
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (MappedTimeValue<TimeValue> | null) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholderValue?: TimeValue
+  shouldForceLeadingZeros?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  slot?: string | null
+  styles?: StylesProp
+  validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
+  validationBehavior?: 'native' | 'aria' = 'native'
+  value?: TimeValue | null
+}

snowystinger added 4 commits June 19, 2025 15:51

feat: S2 DateField/DatePicker/Calendar

c143634

fix lint

3b4f669

start calendar

6401de3

Style calendar and fix some datepicker styles

7bbdd47

snowystinger added 2 commits June 23, 2025 11:35

changing ring size

0716d72

fix hover

b67342f

revert outline size change

beb5265

snowystinger added 2 commits June 23, 2025 17:08

add range calendar

fb693ab

fix yarn lock

1ab4699

fix cell styles for different size ring and gap

f51db9c

snowystinger marked this pull request as ready for review June 24, 2025 02:39

snowystinger added 2 commits June 24, 2025 12:40

Merge branch 'main' into s2-datepicker

b1d5752

# Conflicts: # yarn.lock

add spectrum context

c8e2ef2

snowystinger added 2 commits June 24, 2025 14:14

Add DateRangePicker

eb5c4ff

add comment

aa71a83

snowystinger commented Jun 24, 2025

View reviewed changes

fix test

8b864c3

Merge branch 'main' into s2-datepicker

3db69f6

Add time fields to date pickers

356148a

snowystinger added 3 commits June 27, 2025 16:16

fix buttons in date picker popover

b0f6cac

remove console log

eb9685a

fix storybook intermittent crash from implicit actions, scrolling

6da6c82

fix accessibility violation

5ee804b

devongovett reviewed Jun 28, 2025

View reviewed changes

snowystinger added 2 commits June 30, 2025 19:25

review changes and deduplicating code

f065877

make outline in range smaller

d17b7fd

Label instead of aria label the stories by default

be9560f

reduce duplication, fix styles

3450170

snowystinger added 2 commits July 1, 2025 13:15

remove added api for day/week index and add storybook decorators for …

aa7701d

…calendar systems

field widths, share more

27c4230

snowystinger added 2 commits July 1, 2025 17:30

Add hcm support

33628a0

add chromatic stories and fix bugs

fad7550

remove problematic story

6ee3dc6

feat: S2 DateField/DatePicker/Calendar #8428

Are you sure you want to change the base?

feat: S2 DateField/DatePicker/Calendar #8428

Uh oh!

Conversation

snowystinger commented Jun 20, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jun 20, 2025

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

rspbot commented Jun 23, 2025

Uh oh!

rspbot commented Jun 24, 2025

Uh oh!

rspbot commented Jun 24, 2025

Uh oh!

rspbot commented Jun 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 27, 2025

Uh oh!

rspbot commented Jun 27, 2025

Uh oh!

rspbot commented Jun 27, 2025

Uh oh!

rspbot commented Jun 27, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

devongovett commented Jun 28, 2025

Uh oh!

snowystinger commented Jun 28, 2025

Uh oh!

rspbot commented Jun 30, 2025

Uh oh!

rspbot commented Jun 30, 2025

Uh oh!

rspbot commented Jun 30, 2025

Uh oh!

rspbot commented Jul 1, 2025