Function DateField

starters/hooks/src/DateField.tsx:30–56

(props: DateFieldProps)

}

export function DateField(props: DateFieldProps) {
  let {locale} = useLocale();
  let state = useDateFieldState({...props, locale, createCalendar});
  let ref = useRef<HTMLDivElement>(null);
  /*- begin highlight -*/
  let {labelProps, fieldProps} = useDateField(props, state, ref);
  /*- end highlight -*/
  let [isFocusWithin, setFocusWithin] = useState(false);
  let {focusWithinProps} = useFocusWithin({onFocusWithinChange: setFocusWithin});

  return (
    <div className="react-aria-DateField">
      <label className="react-aria-Label" {...labelProps}>
        {props.label}
      </label>
      <div
        {...mergeProps(fieldProps, focusWithinProps)}
        ref={ref}
        className="react-aria-DateInput inset"
        data-focus-within={isFocusWithin || undefined}>
        {state.segments.map((segment, i) => (
          <DateSegment key={i} segment={segment} state={state} />
        ))}
      </div>
    </div>
  );
}

export function DateSegment({segment, state}: DateSegmentProps) {
  let ref = useRef<HTMLSpanElement>(null);