react-fatless-form/dist/components/DateInput/index.d.ts

A lightweight React form package designed for simplicity that simplifies form handling and validation without unnecessary complexity or bloat.

import React, { JSX } from 'react';
export type DateInputType = {
    type: "date";
    name: string;
    value: Date | null;
    onChange: (value: Date | null) => void;
    disabled?: boolean;
    minDate?: Date;
    maxDate?: Date;
    timePicker?: boolean;
    className?: string;
    style?: React.CSSProperties;
    label?: string;
    placeholder?: string;
    rightIcon?: JSX.Element;
    error?: string;
};
/**
 * A customizable `DateInput` component for selecting or entering dates in a user-friendly manner.
 *
 * This component includes a text input field and an optional dropdown calendar for selecting dates.
 * It supports disabling specific dates through `minDate` and `maxDate` props, which allow developers
 * to control the range of selectable dates. Users can interact with the component via text input
 * (formatted as `DD/MM/YYYY`) or by selecting a date directly from the calendar.
 *
 * ## Features:
 * - **Customizable Styling**: Accepts an optional `className` prop for styling the input field.
 * - **Calendar Dropdown**: Provides an intuitive calendar interface for selecting dates.
 * - **Date Validation**: Ensures that only valid dates are accepted, with error messages for invalid inputs.
 * - **Disabled State**: Fully disables interactions when the `disabled` prop is `true`.
 * - **Date Restrictions**: Use `minDate` and `maxDate` to enforce a selectable date range.
 * - **Keyboard and Mouse Support**: Allows users to input dates manually or pick from the calendar dropdown.
 * - **Time Picker (Optional)**: Includes an optional time picker for selecting time along with the date.
 *
 * ## Example Usage:
 * ```tsx
 * <DateInput
 *   value={new Date()} // Pre-select today's date
 *   onChange={(date) => console.log('Selected Date:', date)} // Handle date selection
 *   minDate={new Date()} // Restrict to no past dates
 *   maxDate={new Date(2080, 11, 31)} // Allow dates only up to Dec 31, 2080
 *   className="custom-date-input" // Add custom styling to the input field
 * />
 * ```
 *
 * ## Props:
 * - `value?: Date`
 *   - The initial selected date for the input field. Defaults to `null`.
 *   - Example: `new Date(2023, 11, 25)` for December 25, 2023.
 *
 * - `onChange?: (value: Date) => void`
 *   - Callback function triggered when the selected date changes.
 *   - Receives the newly selected `Date` object as an argument.
 *   - Example: `(date) => console.log(date.toISOString())`.
 *
 * - `disabled?: boolean`
 *   - Whether the input and calendar dropdown should be disabled.
 *   - Defaults to `false`.
 *   - Example: `disabled={true}` disables all interactions.
 *
 * - `minDate?: Date`
 *   - The earliest date that can be selected.
 *   - Defaults to `undefined` (no restriction).
 *   - Example: `minDate={new Date()}` prevents selecting past dates.
 *
 * - `maxDate?: Date`
 *   - The latest date that can be selected.
 *   - Defaults to `undefined` (no restriction).
 *   - Example: `maxDate={new Date(2033, 11, 31)}` restricts selection to dates on or before December 31, 2033.
 *
 * - `timePicker?: boolean`
 *   - Whether to include a time picker along with the date input.
 *
 * - `rightIcon?: JSX.Element`
 *   - An optional icon or element to display on the right side of the input field.
 *
 * - `className?: string`
 *   - An optional CSS class to apply custom styles to the input field.
 *   - Example: `className="custom-date-input"`.
 *
 * ## Notes:
 * - Ensure the `minDate` and `maxDate` props are valid `Date` objects. Invalid dates may cause unexpected behavior.
 * - The component handles date parsing and validation for manual input but requires users to input dates in `DD/MM/YYYY` format.
 * - Custom styles applied via the `className` prop will merge with the component's default styles.
 */
export declare function DateInput({ value, onChange, disabled, minDate, maxDate, timePicker, className, style, placeholder, rightIcon, label, error, }: DateInputType): JSX.Element;