Skip to content

Latest commit

 

History

History
156 lines (131 loc) · 27.1 KB

daterange-picker.md

File metadata and controls

156 lines (131 loc) · 27.1 KB
Raw

DateRangePicker

DateRangePicker component provides a way to select a a range of dates using DateField & Calendar component. It follows the Native Input Date for the keyboard navigation & accessibility features. Supports all the features as React Aria's useDateRangePicker.

Table of Contents

Usage

import React from "react";

import DateFieldBasic from "./DateFieldBasic.component";
import {
  DatePickerDisclosure,
  DatePickerGroup,
  DatePickerLabel,
  DatePickerPopover,
  useDateRangePickerBaseState,
  useDateRangePickerState,
} from "@adaptui/react";
import CalendarRange from "./RangeCalendarBasic.component";

import { CalendarIcon } from "./Utils.component";

export const DateRangePickerBasic = props => {
  const state = useDateRangePickerBaseState({ ...props, gutter: 10 });
  const daterangepicker = useDateRangePickerState({ ...props, state });

  return (
    <div className="datepicker">
      <DatePickerLabel state={daterangepicker} className="datepicker__label">
        {props.label}
      </DatePickerLabel>
      <DatePickerGroup state={daterangepicker} className="datepicker__group">
        <DateFieldBasic {...daterangepicker.startFieldProps} />
        <DateFieldBasic {...daterangepicker.endFieldProps} />
        <DatePickerDisclosure
          state={daterangepicker}
          className="datepicker__trigger"
        >
          <CalendarIcon />
        </DatePickerDisclosure>
      </DatePickerGroup>
      {state.popover.open && (
        <DatePickerPopover state={daterangepicker} className="popover">
          <CalendarRange {...daterangepicker.calendarProps} />
        </DatePickerPopover>
      )}
    </div>
  );
};

export default DateRangePickerBasic;

Edit CodeSandbox Edit CodeSandbox

Other Examples

Edit CodeSandbox Edit CodeSandbox

Composition

  • useDateRangePickerBaseState uses useDateRangePickerState and usePopoverState
  • useDateRangePickerState uses its own state

Props

DateRangePickerBaseStateProps

DateRangePickerStateProps props > These props are returned by the other props You can also provide these props.
Name Type Description
shouldCloseOnSelect boolean | (() => boolean) | undefined Determines whether the date picker popover should close automatically when a date is selected.
allowsNonContiguousRanges boolean | undefined When combined with isDateUnavailable, determines whether non-contiguous ranges,i.e. ranges containing unavailable dates, may be selected.
minValue DateValue | undefined The minimum allowed date that a user may select.
maxValue DateValue | undefined The maximum allowed date that a user may select.
isDateUnavailable ((date: DateValue) => boolean) | undefined Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
placeholderValue T | undefined A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
hourCycle 12 | 24 | undefined Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
granularity Granularity | undefined Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideTimeZone boolean | undefined Whether to hide the time zone abbreviation.
isDisabled boolean | undefined Whether the input is disabled.
isReadOnly boolean | undefined Whether the input can be selected but not changed by the user.
validationState ValidationState | undefined Whether the input should display its "valid" or "invalid" visual styling.
isRequired boolean | undefined Whether user input is required on the input before form submission.Often paired with the necessityIndicator prop to add a visual indicator to the input.
autoFocus boolean | undefined Whether the element should receive focus on render.
onFocus ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element receives focus.
onBlur ((e: FocusEvent<Element, Element>) => void) | u... Handler that is called when the element loses focus.
onFocusChange ((isFocused: boolean) => void) | undefined Handler that is called when the element's focus status changes.
onKeyDown ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is pressed.
onKeyUp ((e: KeyboardEvent) => void) | undefined Handler that is called when a key is released.
label ReactNode The content to display as the label.
description ReactNode A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage ReactNode An error message for the field.
isOpen boolean | undefined Whether the overlay is open by default (controlled).
defaultOpen boolean | undefined Whether the overlay is open by default (uncontrolled).
onOpenChange ((isOpen: boolean) => void) | undefined Handler that is called when the overlay's open state changes.
value T | undefined The current value (controlled).
defaultValue T | undefined The default value (uncontrolled).
onChange ((value: C) => void) | undefined Handler that is called when the value changes.
PopoverStateProps props > These props are returned by the other props You can also provide these props.
Name Type Description
defaultOpen boolean | undefined Whether the overlay is open by default (uncontrolled).
open boolean The visibility state of the content.
animated number | boolean Determines whether the content should animate when it is shown or hidden. - If true, the animating state will be true when the content is shown or hidden and it will wait for stopAnimation to be called or a CSS animation/transition to end before becoming false. - If it's set to a number, the animating state will be true when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming false.
setOpen ((open: boolean) => void) | undefined Function that will be called when setting the disclosure open state.
getAnchorRect (anchor: HTMLElement | null) => AnchorRect | null Function that returns the anchor element's DOMRect. If this is explicitlypassed, it will override the anchor getBoundingClientRect method.
placement Placement The placement of the popover.
fixed boolean Whether the popover has position: fixed or not.
gutter number | undefined The distance between the popover and the anchor element. By default, it's 0plus half of the arrow offset, if it exists.
shift number The skidding of the popover along the anchor element.
flip string | boolean Controls the behavior of the popover when it overflows the viewport: - If a boolean, specifies whether the popover should flip to the opposite side when it overflows. - If a string, indicates the preferred fallback placements when it overflows. The placements must be spaced-delimited, e.g. "top left".
slide boolean Whether the popover should slide when it overflows.
overlap boolean Whether the popover can overlap the anchor element when it overflows.
sameWidth boolean Whether the popover should have the same width as the anchor element. Thiswill be exposed to CSS as --popover-anchor-width.
fitViewport boolean Whether the popover should fit the viewport. If this is set to true, thepopover wrapper will have maxWidth and maxHeight set to the viewportsize. This will be exposed to CSS as --popover-available-width and--popover-available-height.
arrowPadding number The minimum padding between the arrow and the popover corner.
overflowPadding number The minimum padding between the popover and the viewport edge. This will beexposed to CSS as --popover-overflow-padding.
renderCallback ((props: PopoverStateRenderCallbackProps) => vo... A function that will be called when the popover needs to calculate itsstyles. It will override the internal behavior.

DateRangePickerStateProps

Name Type Description
aria-label string | undefined Defines a string value that labels the current element.
aria-labelledby string | undefined Identifies the element (or elements) that labels the current element.
aria-describedby string | undefined Identifies the element (or elements) that describes the object.
aria-details string | undefined Identifies the element (or elements) that provide a detailed, extended description for the object.
id string | undefined The element's unique identifier. See MDN.
state DateRangePickerBaseState Object returned by the useDateRangePickerBaseState hook.