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?

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

rspbot · 2025-06-24T05:54:42Z

Build successful! 🎉

rspbot · 2025-06-24T07:01:47Z

Build successful! 🎉

rspbot · 2025-06-24T07:01:48Z

## API Changes

react-aria-components

/react-aria-components:CalendarGridBody

 CalendarGridBody {
-  children: (CalendarDate) => ReactElement
+  children: (CalendarDate, number, number) => ReactElement
   className?: string
   style?: CSSProperties
 }

/react-aria-components:CalendarCell

 CalendarCell {
+  cellClassName?: string | ((CalendarCellRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  cellStyle?: CSSProperties | ((CalendarCellRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
   children?: ChildrenOrFunction<CalendarCellRenderProps>
   className?: ClassNameOrFunction<CalendarCellRenderProps>
   date: CalendarDate
   onHoverChange?: (boolean) => void
   onHoverStart?: (HoverEvent) => void
   style?: StyleOrFunction<CalendarCellRenderProps>
 }

/react-aria-components:CalendarCellProps

 CalendarCellProps {
+  cellClassName?: string | ((CalendarCellRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  cellStyle?: CSSProperties | ((CalendarCellRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
   children?: ChildrenOrFunction<CalendarCellRenderProps>
   className?: ClassNameOrFunction<CalendarCellRenderProps>
   date: CalendarDate
   onHoverChange?: (boolean) => void
   onHoverStart?: (HoverEvent) => void
   style?: StyleOrFunction<CalendarCellRenderProps>
 }

/react-aria-components:CalendarGridBodyProps

 CalendarGridBodyProps {
-  children: (CalendarDate) => ReactElement
+  children: (CalendarDate, number, number) => ReactElement
   className?: string
   style?: CSSProperties
 }

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

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

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

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

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

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

/@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?: string
+  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 · 2025-06-24T08:00:18Z

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

+  Context<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>> =
+  createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);
+
+const calendarStyles = style({


haven't shared styles between any of the components yet, waiting for development to settle a little bit more and anticipating the style macro issue with module boundaries we have right now

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

Add TimeField and aria labels

0cbd107

snowystinger commented Jun 24, 2025

View reviewed changes

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!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Jun 24, 2025

Uh oh!

rspbot commented Jun 24, 2025

Uh oh!

rspbot commented Jun 24, 2025

react-aria-components

/react-aria-components:CalendarGridBody

/react-aria-components:CalendarCell

/react-aria-components:CalendarCellProps

/react-aria-components:CalendarGridBodyProps

/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

/@react-spectrum/s2:DatePickerContext

/@react-spectrum/s2:DateRangePicker

/@react-spectrum/s2:DateRangePickerContext

/@react-spectrum/s2:RangeCalendar

/@react-spectrum/s2:RangeCalendarContext

/@react-spectrum/s2:TimeField

/@react-spectrum/s2:TimeFieldContext

/@react-spectrum/s2:CalendarProps

/@react-spectrum/s2:DateFieldProps

/@react-spectrum/s2:DatePickerProps

/@react-spectrum/s2:DateRangePickerProps

/@react-spectrum/s2:RangeCalendarProps

/@react-spectrum/s2:TimeFieldProps

Uh oh!

snowystinger Jun 24, 2025

Choose a reason for hiding this comment