@dnanpm/styleguide/build/cjs/components/DateTimePicker/DateTimePicker.d.ts

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

import type { ChangeEvent } from 'react';
import React from 'react';
import type { DatePickerProps } from 'react-datepicker';
import type { LocaleCode } from '../../types/locale.d';
interface Props {
    /**
     * Unique ID for the component
     */
    id: string;
    /**
     * Default selected date value
     */
    date?: Date;
    /**
     * Allows to enable range picker functionality.
     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
     */
    endDate?: DatePickerProps['endDate'];
    /**
     * Input label content
     */
    label?: string;
    /**
     * Input placeholder content
     */
    placeholder?: string;
    /**
     * Allows to change formatting of date value in input
     *
     * @param {LocaleCode} fi-FI Finnish (Finland)
     * @param {LocaleCode} en-GB English (United Kingdom)
     *
     * @default 'fi-FI'
     */
    locale?: LocaleCode;
    /**
     * On datetime picker change callback
     */
    onChange: DatePickerProps['onChange'];
    /**
     * On input change callback
     */
    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    /**
     * Minimum selectable date
     */
    minDate?: DatePickerProps['minDate'];
    /**
     * Maximum selectable date
     */
    maxDate?: DatePickerProps['maxDate'];
    /**
     * Allows to define time intervals in time picker
     *
     * @default 30
     */
    timeInterval?: DatePickerProps['timeIntervals'];
    /**
     * Text of the error message when input element is in error state
     */
    errorMessage?: string;
    /**
     * Allows to enable or disable date picker functionality
     *
     * @default true
     */
    isDatePicker?: boolean;
    /**
     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
     *
     * @default false
     */
    isTimePicker?: boolean;
    /**
     * Allows to set input element as editable
     *
     * @default false
     */
    isEditable?: boolean;
    /**
     * Allows to clear the selected date
     */
    isClearable?: boolean;
    /**
     * Allows to disable the component functionality
     *
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Allows to set input element as mandatory
     *
     * @default false
     */
    isRequired?: boolean;
    /**
     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
     *
     * @default false
     */
    isInError?: boolean;
    /**
     * Allows to pass testid string for testing purposes
     */
    'data-testid'?: string;
    /**
     * Allows to pass a custom className
     */
    className?: string;
    /**
     * Descriptive label for screen readers for the input element.
     */
    ariaLabelInput?: string;
    /**
     * Accessible label for "Previous month" button
     */
    ariaLabelPreviousMonth?: string;
    /**
     * Accessible label for "Next month" button
     */
    ariaLabelNextMonth?: string;
    /**
     * Accessible text for announcing date changes (e.g., for screen readers)
     */
    ariaLiveAnnouncement?: string;
}
/** @visibleName DateTime Picker */
declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
/** @component */
export default DateTimePicker;