Function DatePicker

starters/hooks/src/DatePicker.tsx:21–55

(props: AriaDatePickerProps<DateValue>)

import './Popover.css';

export function DatePicker(props: AriaDatePickerProps<DateValue>) {
  let state = useDatePickerState(props);
  let groupRef = useRef<HTMLDivElement>(null);
  let {groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps} = useDatePicker(
    props,
    state,
    groupRef
  );

  return (
    <Provider
      values={[
        [GroupContext, {...groupProps, ref: groupRef}],
        [DateFieldContext, fieldProps],
        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
        [LabelContext, {...labelProps, elementType: 'span'}],
        [DialogContext, dialogProps],
        [OverlayTriggerStateContext, state],
        [PopoverContext, {trigger: 'DatePicker', triggerRef: groupRef, placement: 'bottom start'}]
      ]}>
      <div className="react-aria-DatePicker">
        <Label>{props.label}</Label>
        <Group className="react-aria-Group inset">
          <DateInput>{segment => <DateSegment segment={segment} />}</DateInput>
          <Button className="field-Button">
            <ChevronDown />
          </Button>
        </Group>
        <Popover className="react-aria-Popover">
          <Calendar {...calendarProps} />
        </Popover>
      </div>
    </Provider>
  );
}