Function useDateField

packages/react-aria/src/datepicker/useDateField.ts:90–238

(
  props: AriaDateFieldOptions<T>,
  state: DateFieldState,
  ref: RefObject<Element | null>
)

 * Each part of a date value is displayed in an individually editable segment.
 */
export function useDateField<T extends DateValue>(
  props: AriaDateFieldOptions<T>,
  state: DateFieldState,
  ref: RefObject<Element | null>
): DateFieldAria {
  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
    ...props,
    labelElementType: 'span',
    isInvalid,
    errorMessage: props.errorMessage || validationErrors
  });

  let valueOnFocus = useRef<DateValue | null>(null);
  let {focusWithinProps} = useFocusWithin({
    ...props,
    onFocusWithin(e) {
      valueOnFocus.current = state.value;
      props.onFocus?.(e);
    },
    onBlurWithin: e => {
      state.confirmPlaceholder();
      if (state.value !== valueOnFocus.current) {
        state.commitValidation();
      }
      props.onBlur?.(e);
    },
    onFocusWithinChange: props.onFocusChange
  });

  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
  let message =
    state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
  let field = state.maxGranularity === 'hour' ? 'time' : 'date';
  let description = state.value
    ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})})
    : '';
  let descProps = useDescription(description);

  // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
  let describedBy =
    props[roleSymbol] === 'presentation'
      ? fieldProps['aria-describedby']
      : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') ||
        undefined;
  let propsFocusManager = props[focusManagerSymbol];
  let focusManager = useMemo(
    () => propsFocusManager || createFocusManager(ref),
    [propsFocusManager, ref]
  );
  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');

  // Pass labels and other information to segments.
  hookData.set(state, {
    ariaLabel: props['aria-label'],
    ariaLabelledBy:
      [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,