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;
    minTime?: string;
    maxTime?: string;
    dateFormat?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd' | 'MMMM dd, yyyy' | 'LLL dd, yyyy';
    noWeekends?: 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 based on dateFormat prop) 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.
 * - **Date Formatting**: Supports multiple date formats via the `dateFormat` prop.
 * - **Minimum Time**: Restricts time selection when `timePicker` is enabled via `minTime` prop.
 *
 * ## 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
 *   dateFormat="MMMM dd, yyyy" // Use long month name format
 *   timePicker={true} // Enable time selection
 *   minTime="09:00" // Restrict times to 9AM or later
 *   maxTime="16:00" // Restrict times to 4PM or earlier
 *   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.
 *
 * - `minTime?: string`
 *   - The earliest time that can be selected (format: "HH:MM").
 *   - Only applicable when `timePicker` is true.
 *   - Example: "09:00" restricts selection to 9AM or later.
 *
 * - `maxTime?: string`
 *   - The latest time that can be selected (format: "HH:MM").
 *   - Only applicable when `timePicker` is true.
 *   - Example: "16:00" restricts selection to 4PM or earlier.
 *
 * - `dateFormat?: string`
 *   - The format to display dates in the input field.
 *   - Options: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd' | 'MMMM dd, yyyy' | 'LLL dd, yyyy'
 *   - Defaults to 'dd/MM/yyyy'.
 *
 * - `noWeekends?: boolean`
 *   - When true, disables selection of weekend dates (Saturday and Sunday)
 *   - Defaults to false
 *   - Example: `noWeekends={true}`
 *
 * - `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"`.
 */
export declare function DateInput({ value, onChange, disabled, minDate, maxDate, timePicker, minTime, maxTime, dateFormat, noWeekends, className, style, placeholder, rightIcon, label, error, }: DateInputType): JSX.Element;