@wix/design-system/dist/types/DatePicker/index.d.ts

@wix/design-system

import * as React from 'react';
import { CalendarProps } from '../Calendar';
import { InputProps } from '../Input';
import { PopoverCommonProps, TooltipCommonProps } from '../common';
import type { SupportedWixLocales } from '@wix/design-systems-locale-utils';

export type DatePickerStatus = 'error' | 'warning' | 'loading';
export type DateStyle = 'short' | 'medium' | 'long';
export { LanguageType } from '../Calendar';

export interface DatePickerProps extends Omit<CalendarProps, 'size'> {
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Override a field with a custom input element. If you only need to pass custom props to the `<Input/>`, then use `inputProps` instead. */
  customInput?: React.ReactNode;
  /** Allows you to pass default Input component properties */
  inputProps?: Partial<InputProps>;
  /**
   * Ref to the underlying `<input>` DOM element. Accepts callback and object refs.
   * Use for input masking libraries. Memoize callback refs to avoid reattaching.
   */
  inputRef?: React.Ref<HTMLInputElement>;
  /** Specify date picker instance locale */
  locale?: SupportedWixLocales;
  /** Sets date format of locale
   * @default 'short'
   */
  dateStyle?: DateStyle;
  /** Specify whether a field should be disabled or not
   * @default false
   */
  disabled?: boolean;
  /** Applies a data-hook HTML attribute for date picker input */
  inputDataHook?: string;
  /** Applies a data-hook HTML attribute for date picker calendar view */
  calendarDataHook?: string;
  /** Defines a placeholder of the field */
  placeholderText?: string;
  /** Specify whether RTL mode is enabled or not. When true, the keyboard navigation will be changed, meaning pressing on the right arrow will navigate to the previous day, and pressing on the left arrow will navigate to the next day.
   * @default false
   */
  rtl?: boolean;
  /** Defines the selected date */
  value?: Date;
  /** Specify whether the calendar will be initially visible or not */
  initialOpen?: boolean;
  /** Controls the status of a field */
  status?: DatePickerStatus;
  /** Defines the status message to be displayed on status icon hover. If not given or empty, the tooltip won’t be shown. */
  statusMessage?: React.ReactNode;
  /** Sets the width of picker input in pixels or percentage
   * @default '150px'
   */
  width?: number | string;
  /** Set a desired z-index for date picker popover */
  zIndex?: number;
  /** Allows you to pass popover properties. The default placement value depends on the rtl prop - would be 'top-start' when rtl=false and 'top-end' in case of rtl=true. */
  popoverProps?: PopoverCommonProps;
  /** Specify the starting day of a week, allowing only from 0 to 6 (Sunday to Saturday). The default value is 1 which means Monday. */
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  /** Specifies the size of the input */
  size?: 'small' | 'medium' | 'large';
  /** Specify whether date picker input is readOnly or not */
  readOnly?: boolean;
  /** Display a clear button (x) on a non-empty field */
  clearButton?: boolean;
  /** Displays clear button (X) on a non-empty input and calls callback with no arguments */
  onClear?: React.MouseEventHandler<HTMLInputElement>;
  /** Disable typing the in the input. When true, choosing a date is possible only by picking from the calendar. Default: false.
   * @default false
   */
  disableKeyboardType?: boolean;
  /** Enables internal input validation */
  validate?: boolean;
  /** Defines a callback function which is called on cases when date is validated.
   * - {validationType: 'outOfBoundsError' | 'formatError' | 'valid', format: string, value: string }
   * - `validationType` - type 'formatError' is set when validated date is in the wrong date format
   *                    - type 'outOfBoundsError' is set when 'excludePastDates' is true and date input is before today
   *                    - type 'valid' is set when entered date is valid
   * - `format` - is set to valid date format
   * - `value` - is set to current input value
   */
  onValidate?({
    validationType,
    format,
    value,
  }: {
    format?: string;
    validationType: 'outOfBoundsError' | 'formatError' | 'valid';
    /** Defines the selected date */
    value: string;
  }): void;
  /** When provided, hover will display a tooltip */
  clearButtonTooltipContent?: React.ReactNode;
  /** Aria label for the clear button */
  clearButtonAriaLabel?: string;
  /** Tooltip props */
  clearButtonTooltipProps?: TooltipCommonProps;
  /** Defines a callback function which is called when date picker is opened. */
  onOpen?: () => void;
  /** Function which renders a provided node at the bottom of the Calendar. */
  renderFooter?(): React.ReactNode;
  /** Defines the size of calendar opened */
  calendarProps?: {
    /** Specifies the size of the input */
    size?: CalendarProps['size'];
  };
}

export default class DatePicker extends React.PureComponent<DatePickerProps> {
  openCalendar: () => void;
  closeCalendar: () => void;
}