@tiller-ds/date/DateRangeInput.d.ts

Date module of Tiller Design System

import * as React from "react";
import { InputProps } from "@tiller-ds/form-elements";
import { ComponentTokens } from "@tiller-ds/theme";
declare type DateTimeFormatOptionsOnly = "localeMatcher" | "weekday" | "year" | "month" | "day";
export declare type DateRangeInputProps = {
    /**
     * Allows the clear button (x) to be shown when a value is present in the field.
     * On by default.
     */
    allowClear?: boolean;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Enables automatic closing of the popover once a date is manually typed in.
     * Off by default.
     */
    closeAfterEntry?: boolean;
    /**
     * The format of the date mask. E.g. 'yyyy-MM-dd' or 'dd/MM/yyyy'.
     */
    dateFormat?: string;
    /**
     * Enables or disables the component's functionality.
     */
    disabled?: boolean;
    /**
     * When enabled, the date range mask changes on (un)focusing of the input element.
     *
     * When the input element is focused, the date mask is shown.
     *
     * When the input element is unfocused, the mask is shortened to exclude the placeholder characters.
     *
     * **ON** by default.
     */
    dynamicMask?: boolean;
    /**
     * Forces a set end date for the component.
     */
    end?: Date | null;
    /**
     * Value passed through from validation indicating to display the error on the component.
     */
    error?: React.ReactNode;
    /**
     * If true, the popover for choosing a date is set to always have the same optimal width (500px),
     * meaning it won't stretch with the field component. Only applies to desktop displays.
     *
     * On by default.
     */
    fixedPopoverWidth?: boolean;
    /**
     * The help text displayed below the date input field.
     */
    help?: React.ReactNode;
    /**
     * If true, the current date is highlighted in the date picker for easier navigation.
     *
     * Off by default.
     */
    highlightToday?: boolean;
    /**
     * Represents the label above the date input field.
     */
    label?: React.ReactNode;
    /**
     * The desired mask shown in the field component (string or Regex expressions).
     */
    mask?: (string | RegExp)[];
    /**
     * Maximum possible date enabled for selection.
     */
    maxDate?: Date;
    /**
     * Minimum possible date enabled for selection.
     */
    minDate?: Date;
    /**
     * The accessor value for the input field component (for validation, fetching, etc.).
     */
    name: string;
    /**
     * Defines the behaviour of the component once the focus shifts away from the component.
     */
    onBlur?: () => void;
    /**
     * Function that handles the behaviour of the component once its state changes.
     */
    onChange: (start: Date | null, end: Date | null) => void;
    /**
     * The placeholder displayed inside the date input field.
     */
    placeholder?: string;
    /**
     * Position of the popover for choosing the date range. Convenient for situations where the
     * popover would pass through the end of the screen on a certain position.
     * If set to 'left', the popover starts from the left side of the components and stretches to the right.
     * If set to 'right', the popover starts from the right side of the components and stretches to the left.
     * Defaults to 'left'.
     */
    popoverPosition?: "left" | "right";
    /**
     * Turns this field into a required field in the form. Only applies visual representation (* next to label),
     * still requires validation on frontend or backend to accompany this value if set to true.
     */
    required?: boolean;
    /**
     * Show or hide the desired mask for date range value when no value is present in the field.
     */
    showMaskOnEmpty?: boolean;
    /**
     * Forces a set start date for the component.
     */
    start?: Date | null;
} & Omit<InputProps, "onChange" | "onBlur" | "value"> & Omit<Intl.DateTimeFormatOptions, DateTimeFormatOptionsOnly> & DateInputTokensProps;
declare type DateInputTokensProps = {
    tokens?: ComponentTokens<"DateInput">;
};
export default function DateRangeInput({ className, name, start, end, minDate, maxDate, fixedPopoverWidth, popoverPosition, allowClear, closeAfterEntry, onBlur, dateFormat, highlightToday, ...props }: DateRangeInputProps): JSX.Element;
export {};