@esri/calcite-components/dist/types/components/date-picker/date-picker.d.ts

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { LoadableComponent } from "../../utils/loadable";
import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { HeadingLevel } from "../functional/Heading";
import { DatePickerMessages } from "./assets/date-picker/t9n";
export declare class DatePicker implements LocalizedComponent, LoadableComponent, T9nComponent {
  el: HTMLCalciteDatePickerElement;
  /** Specifies the component's active date. */
  activeDate: Date;
  activeDateWatcher(newActiveDate: Date): void;
  /**
   * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date.
   */
  activeRange: "start" | "end";
  /**
   * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`).
   */
  value: string | string[];
  /**
   * Specifies the number at which section headings should start.
   */
  headingLevel: HeadingLevel;
  /** Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). */
  valueAsDate: Date | Date[];
  valueAsDateWatcher(newValueAsDate: Date | Date[]): void;
  /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
  minAsDate: Date;
  /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
  maxAsDate: Date;
  /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
  min: string;
  onMinChanged(min: string): void;
  /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
  max: string;
  onMaxChanged(max: string): void;
  /**
   * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
   *
   */
  numberingSystem: NumberingSystem;
  /** Specifies the size of the component. */
  scale: "s" | "m" | "l";
  /** When `true`, activates the component's range mode to allow a start and end date. */
  range: boolean;
  /** When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. */
  proximitySelectionDisabled: boolean;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<DatePickerMessages>;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: DatePickerMessages;
  onMessagesChange(): void;
  /**
   * Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.
   */
  calciteDatePickerChange: EventEmitter<void>;
  /**
   * Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.
   */
  calciteDatePickerRangeChange: EventEmitter<void>;
  /** Sets focus on the component's first focusable element. */
  setFocus(): Promise<void>;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  render(): VNode;
  /**
   * Active end date.
   */
  activeEndDate: Date;
  /**
   * Active start date.
   */
  activeStartDate: Date;
  /**
   * The DateTimeFormat used to provide screen reader labels.
   *
   * @internal
   */
  dateTimeFormat: Intl.DateTimeFormat;
  defaultMessages: DatePickerMessages;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  endAsDate: Date;
  private hoverRange;
  private localeData;
  private mostRecentRangeValue?;
  startAsDate: Date;
  keyDownHandler: (event: KeyboardEvent) => void;
  valueHandler(value: string | string[]): void;
  private loadLocaleData;
  monthHeaderSelectChange: (event: CustomEvent<Date>) => void;
  monthActiveDateChange: (event: CustomEvent<Date>) => void;
  monthHoverChange: (event: CustomEvent<Date>) => void;
  monthMouseOutChange: () => void;
  /**
   * Render calcite-date-picker-month-header and calcite-date-picker-month
   *
   * @param activeDate
   * @param maxDate
   * @param minDate
   * @param date
   * @param endDate
   */
  private renderCalendar;
  /**
   * Reset active date and close
   */
  reset: () => void;
  private getEndDate;
  private setEndDate;
  private getStartDate;
  private setStartDate;
  /**
   * Event handler for when the selected date changes
   *
   * @param event
   */
  private monthDateChange;
  /**
   * Get an active date using the value, or current date as default
   *
   * @param value
   * @param min
   * @param max
   */
  private getActiveDate;
  private getActiveEndDate;
}