@enact/sandstone/DatePicker/DatePicker.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/DatePicker

import * as React from "react";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface DatePickerBaseProps {
  /**
   * The  `day`  component of the Date.
   *
   * The value should be a number between 1 and  `maxDays` .
   */
  day: number;
  /**
   * The number of days in the month.
   */
  maxDays: number;
  /**
   * The number of months in the year.
   */
  maxMonths: number;
  /**
   * The  `month`  component of the Date.
   *
   * The value should be a number between 1 and  `maxMonths` .
   */
  month: number;
  /**
   * The order in which the component pickers are displayed.
   *
   * The value should be an array of 3 strings containing one of  `'m'` ,  `'d'` , and  `'y'` .
   */
  order: string[];
  /**
   * The  `year`  component of the Date.
   */
  year: number;
  /**
   * Disables voice control.
   */
  "data-webos-voice-disabled"?: boolean;
  /**
 * The "aria-label" for the day picker.
 * 
 * If not specified, the "aria-label" for the day picker will be
a combination of the current value and 'day change a value with up down button'.
 */
  dayAriaLabel?: string;
  /**
   * Disables the  `DatePicker` .
   */
  disabled?: boolean;
  /**
   * The primary text of the  `DatePicker` .
   */
  label?: string;
  /**
   * The maximum selectable  `year`  value.
   */
  maxYear?: number;
  /**
   * The minimum selectable  `year`  value.
   */
  minYear?: number;
  /**
 * The "aria-label" for the month picker.
 * 
 * If not specified, the "aria-label" for the month picker will be
a combination of the current value and 'month change a value with up down button'.
 */
  monthAriaLabel?: string;
  /**
   * Hides the label that displays the date.
   */
  noLabel?: boolean;
  /**
   * Called when the  `date`  component of the Date changes.
   */
  onChangeDate?: Function;
  /**
   * Called when the  `month`  component of the Date changes.
   */
  onChangeMonth?: Function;
  /**
   * Called when the  `year`  component of the Date changes.
   */
  onChangeYear?: Function;
  /**
   * Called when the component is removed when it had focus.
   */
  onSpotlightDisappear?: Function;
  /**
   * Called prior to focus leaving the picker when the 5-way left key is pressed.
   */
  onSpotlightLeft?: Function;
  /**
   * Called prior to focus leaving the picker when the 5-way right key is pressed.
   */
  onSpotlightRight?: Function;
  /**
   * Disables 5-way spotlight from navigating into the component.
   */
  spotlightDisabled?: boolean;
  /**
 * The "aria-label" for the year picker.
 * 
 * If not specified, the "aria-label" for the year picker will be
a combination of the current value and 'year change a value with up down button'.
 */
  yearAriaLabel?: string;
  /**
   * Called when  `Enter`  key down on the last picker
   */
  onComplete?: Function;
}
/**
 * A date selection component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within   .
 */

export class DatePickerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DatePickerBaseProps>
> {}

export interface DatePickerProps
  extends Omit<
    Merge<DatePickerBaseProps, ui_Changeable_ChangeableProps>,
    "day" | "maxDays" | "maxMonths" | "month" | "order" | "year"
  > {
  /**
   * The initial value used when  `value`  is not set.
   */
  defaultValue?: Date;
  /**
   * The selected date
   */
  value?: Date;
}
/**
 * A date selection component, ready to use in Sandstone applications.
 * 
 * `DatePicker`  may be used to select the year, month, and day. It uses a standard  `Date`  object for
its  `value`  which can be shared as the  `value`  for a
   to select both a date and time.
 * 
 * By default,  `DatePicker`  maintains the state of its  `value`  property. Supply the
 `defaultValue`  property to control its initial value. If you wish to directly control updates
to the component, supply a value to  `value`  at creation time and update it in response to
 `onChange`  events.
 * 
 * Usage:
 * ```
<DatePicker
 defaultValue={selectedDate}
 onChange={handleChange}
/>
```
 */

export class DatePicker extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DatePickerProps>
> {}

/**
 * Converts a standard  `Date`  object into a locale-specific string.
 */
export function dateToLocaleString(date: Date): any;

export default DatePicker;