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

hmm yeah it is a bit complicated. maybe it is useful info to add to RAC. we should just consider the API. Probably should have passed an object to that function to make it extensible but would be a breaking change. I guess we could add a second options argument at least.

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?

# Conflicts: # packages/react-aria-components/src/Calendar.tsx

rspbot · 2025-07-09T01:24:52Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/stories/utils.tsx

rspbot · 2025-07-09T02:37:28Z

Build successful! 🎉

rspbot · 2025-07-09T02:39:42Z

Build successful! 🎉

rspbot · 2025-07-09T23:40:03Z

Build successful! 🎉

reidbarber

The stories now freeze/crash for me when interacting (past 35ba8078c6a45223f7c11e49b0f30570858bbfe7) on Chrome Mac.

EDIT: Looks like this issue came from main, via #8327

rspbot · 2025-07-10T20:50:53Z

Build successful! 🎉

rspbot · 2025-07-11T01:44:46Z

Build successful! 🎉

rspbot · 2025-07-11T01:53:47Z

Build successful! 🎉

rspbot · 2025-07-11T02:13:33Z

Build successful! 🎉

rspbot · 2025-07-11T05:21:54Z

Build successful! 🎉

rspbot · 2025-07-11T05:21:56Z

## API Changes

react-aria-components

/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
+  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
+  form?: string
+  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'
+  form?: string
+  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> extends RangeCalendarProps {
+  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'
+  form?: string
+  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
+}

/@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
+  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 = 1
+}

/@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
+  form?: string
+  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
+  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
+  form?: string
+  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'
+  form?: string
+  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'
+  form?: string
+  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
+}

/@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
+  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 = 1
+}

/@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
+  form?: string
+  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
+}

devongovett

So now there's one extra px of padding around the cells in S2?

Ok if you want to get it merged but let's make sure to resolve the API questions before release.

devongovett · 2025-07-11T18:42:40Z

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

@@ -502,6 +507,8 @@ export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
  let state = calendarState ?? rangeCalendarState!;
  let {startDate: currentMonth} = useContext(InternalCalendarGridContext) ?? {startDate: state.visibleRange.start};
  let isOutsideMonth = !isSameMonth(currentMonth, date);
+  // TODO: check api with team, this seemed useful though


these kinds of comments are better on the PR itself, that way you don't need to update the code to remove it 😉

devongovett · 2025-07-11T18:44:09Z

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];


how is OverlayTriggerStateContext related to the hover state?

snowystinger · 2025-07-14T00:01:20Z

@devongovett
Haha, that OverlayState one was very not obvious. We consume overlay context in s2's actionbutton

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

Line 291 in 7639e56

isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,

I figured it was pretty safe to stop the context, however, i could see an argument that s2 should be the one to stop it, or that we should use something else to set that hovered state in s2

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

533dbef

# Conflicts: # packages/react-aria-components/src/Calendar.tsx

snowystinger added 2 commits July 9, 2025 12:27

share helptext styles

35ba807

Merge branch 'main' into s2-datepicker

2aa4a65

# Conflicts: # packages/@react-spectrum/s2/stories/utils.tsx

add translations for everything and add default error messages

5dc9d54

reidbarber reviewed Jul 10, 2025

View reviewed changes

Merge branch 'main' into s2-datepicker

a85aac7

snowystinger added 2 commits July 11, 2025 11:34

adjust props from all dom attributes

78a69da

remove cellPadding from calendar grid

9353a75

Merge branch 'main' into s2-datepicker

fb2c3f0

reidbarber approved these changes Jul 11, 2025

View reviewed changes

Merge branch 'main' into s2-datepicker

dede36b

devongovett reviewed Jul 11, 2025

View reviewed changes

devongovett approved these changes Jul 11, 2025

View reviewed changes

devongovett added the release label Jul 11, 2025

devongovett added this pull request to the merge queue Jul 11, 2025

Merged via the queue into main with commit 4b07bd0 Jul 11, 2025
31 checks passed

devongovett deleted the s2-datepicker branch July 11, 2025 22:11

snowystinger mentioned this pull request Jul 14, 2025

chore: s2 date followup #8537

Open

5 tasks

feat: S2 DateField/DatePicker/Calendar #8428

feat: S2 DateField/DatePicker/Calendar #8428

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!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jul 9, 2025

Uh oh!

rspbot commented Jul 9, 2025

Uh oh!

rspbot commented Jul 9, 2025

Uh oh!

rspbot commented Jul 9, 2025

Uh oh!

reidbarber left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jul 10, 2025

Uh oh!

rspbot commented Jul 11, 2025

Uh oh!

rspbot commented Jul 11, 2025

Uh oh!

rspbot commented Jul 11, 2025

Uh oh!

rspbot commented Jul 11, 2025

Uh oh!

rspbot commented Jul 11, 2025

react-aria-components

/react-aria-components:CalendarCellRenderProps

@react-aria/calendar

/@react-aria/calendar:getEraFormat

@react-spectrum/s2

/@react-spectrum/s2:Heading

/@react-spectrum/s2:Calendar

/@react-spectrum/s2:CalendarContext

/@react-spectrum/s2:DateField

/@react-spectrum/s2:DateFieldContext

/@react-spectrum/s2:DatePicker

reidbarber left a comment •

edited

Loading