Skip to content

Latest commit

 

History

History
176 lines (143 loc) · 17.4 KB

datefield.md

File metadata and controls

176 lines (143 loc) · 17.4 KB
Raw

DateField

DateField component is an input that provides a way to select a date and time using keyboard. It follows the Native Input Date for the keyboard navigation & accessibility features. Supports all the features of React Aria's useDateField.

Table of Contents

Usage

import React from "react";
import { createCalendar } from "@internationalized/date";
import { useLocale } from "@react-aria/i18n";

import {
  DateField,
  DateFieldLabel,
  DateSegment,
  useDateFieldBaseState,
  useDateFieldState,
} from "@adaptui/react";

export const DateFieldBasic = props => {
  let { locale } = useLocale();

  const state = useDateFieldBaseState({ locale, createCalendar, ...props });
  const datefield = useDateFieldState({ ...props, state });

  return (
    <div className="datefield">
      <DateFieldLabel state={datefield} className="datefield__label">
        {props.label}
      </DateFieldLabel>
      <DateField state={datefield} className="datefield__field">
        {state.segments.map((segment, i) => (
          <DateSegment
            key={i}
            segment={segment}
            state={state}
            className={`datefield__field--item ${
              segment.isPlaceholder ? "placeholder" : ""
            }`}
          >
            {segment.text}
          </DateSegment>
        ))}
        {state.validationState === "invalid" && (
          <span aria-hidden="true">🚫</span>
        )}
      </DateField>
    </div>
  );
};

export default DateFieldBasic;

Edit CodeSandbox Edit CodeSandbox

Other Examples

Edit CodeSandbox Edit CodeSandbox

Composition

  • DateSegment uses Role
  • DateField uses Role
  • useDateFieldBaseState uses useDateFieldState
  • DateFieldDescription uses Role
  • DateFieldErrorMessage uses Role
  • DateFieldLabel uses Role
  • useDateFieldState uses its own state

Props

DateSegmentOptions

Name Type Description
segment DateSegment Current segment state return from state.segments.
state DateFieldState Object returned by the useDateFieldBaseState hook.

DateFieldOptions

Name Type Description
state DateFieldState Object returned by the useDateFieldState hook.

DateFieldBaseStateProps

Name Type Description
locale string The locale to display and edit the value according to.
createCalendar (name: string) => Calendar A function that creates a Calendarobject for a given calendar identifier. Such a function may be imported from the@internationalized/date package, or manually implemented to include support foronly certain calendars.
DateFieldStateProps props > These props are returned by the other props You can also provide these props.
Name Type Description
maxGranularity "year" | "month" | Granularity | undefined The maximum unit to display in the date field.
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.

DateFieldDescriptionOptions

Name Type Description
state DateFieldState Object returned by the useDateFieldState hook.

DateFieldErrorMessageOptions

Name Type Description
state DateFieldState Object returned by the useDateFieldState hook.

DateFieldLabelOptions

Name Type Description
state DateFieldState Object returned by the useDateFieldState hook.

DateFieldStateProps

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 DateFieldState Object returned by the useDateFieldBaseState hook.