@tiller-ds/date
Version:
Date module of Tiller Design System
116 lines (115 loc) • 4.35 kB
TypeScript
import * as React from "react";
import { InputProps } from "@tiller-ds/form-elements";
import { ComponentTokens } from "@tiller-ds/theme";
export declare type DateInputProps = {
/**
* 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;
/**
* Enables or disables the component's functionality.
*/
disabled?: boolean;
/**
* The format of the date mask. E.g. 'yyyy-MM-dd' or 'dd/MM/yyyy'.
*/
dateFormat?: string;
/**
* When enabled, the date 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;
/**
* 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 (370px),
* 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;
/**
* 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: (value: 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 value when no value is present in the field.
*/
showMaskOnEmpty?: boolean;
/**
* The value of the field sent on submit and/or retrieved on component render (Date type).
*/
value: Date | null;
} & Omit<InputProps, "onBlur" | "onChange" | "value"> & Omit<Intl.DateTimeFormatOptions, "localeMatcher" | "weekday" | "year" | "month" | "day"> & DateInputTokensProps;
declare type DateInputTokensProps = {
tokens?: ComponentTokens<"DateInput">;
};
export default function DateInput({ allowClear, className, value, minDate, maxDate, onBlur, fixedPopoverWidth, popoverPosition, closeAfterEntry, dateFormat, highlightToday, ...props }: DateInputProps): JSX.Element;
export {};