DatePicker

DatePicker

• __@dirtyStateSymbol@5488

  boolean

• __@internals$1@5487

  ElementInternals

• adoptedCallback

  () => void

• allow

  Dates that can be selected. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` allows all dates. - Dates in `YYYY-MM-DD` format allow a single date. - Dates in `YYYY-MM` format allow a whole month. - Dates in `YYYY` format allow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`.

  string

• allowDays

  Days of the week that can be selected. These intersect with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on the result of `allow` and `disallow`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.

  string

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• defaultValue

  Default selected value. The default means no date is selected. If the provided value is invalid, no date is selected. - If `type="single"`, this is a date in `YYYY-MM-DD` format. - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format. - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.

  string

• defaultView

  Default month to display in `YYYY-MM` format. This value is used until `view` is set, either directly or as a result of user interaction. Defaults to the current month in the user's locale.

  string

• disallow

  Dates that cannot be selected. These subtract from `allow`. A comma-separated list of dates, date ranges. Whitespace is allowed after commas. The default `''` has no effect on `allow`. - Dates in `YYYY-MM-DD` format disallow a single date. - Dates in `YYYY-MM` format disallow a whole month. - Dates in `YYYY` format disallow a whole year. - Ranges are expressed as `start--end`. - Ranges are inclusive. - If either `start` or `end` is omitted, the range is unbounded in that direction. - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value. So `2024--` is equivalent to `2024-01-01--`. - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value. So `--2024` is equivalent to `--2024-12-31`. - Whitespace is allowed either side of `--`.

  string

• disallowDays

  Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`. A comma-separated list of days. Whitespace is allowed after commas. The default `''` has no effect on `allowDays`. Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.

  string

• disconnectedCallback

  () => void

• formResetCallback

  () => void

• name

  An identifier for the field that is unique within the nearest containing form.

  string

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

• type

  "single" | "range"

• value

  Current selected value. The default means no date is selected. If the provided value is invalid, no date is selected. Otherwise: - If `type="single"`, this is a date in `YYYY-MM-DD` format. - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format. - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive. Events: - `onInput` - Invoked when any date is selected. Will fire before `onChange`. - `onChange` - Invoked when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`. For `type="range"`, this is only called when the range is completed by selecting the end date of the range.

  string

• view

  Displayed month in `YYYY-MM` format. `onViewChange` is called when this value changes. Defaults to `defaultView`.

  string

declare class DatePicker extends BaseClass$1 implements DatePickerProps {
  accessor defaultView: string;
  set view(view: string);
  get view(): string;
  accessor allow: DatePickerProps['allow'];
  accessor disallow: DatePickerProps['disallow'];
  accessor allowDays: DatePickerProps['allowDays'];
  accessor disallowDays: DatePickerProps['disallowDays'];
  accessor type: DatePickerProps['type'];
  accessor defaultValue: DatePickerProps['defaultValue'];
  accessor name: DatePickerProps['name'];
  set value(value: string);
  get value(): string;
  /** @private */
  [dirtyStateSymbol]: boolean;
  /** @private */
  formResetCallback(): void;
  constructor();
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

DatePickerEvents

• blur

  CallbackEventListener<typeof tagName> | null

• change

  CallbackEventListener<typeof tagName> | null

• focus

  CallbackEventListener<typeof tagName> | null

• input

  CallbackEventListener<typeof tagName> | null

• viewchange

  CallbackEventListener<typeof tagName> | null

export interface DatePickerEvents {
  viewchange: CallbackEventListener<typeof tagName> | null = null;
  focus: CallbackEventListener<typeof tagName> | null = null;
  blur: CallbackEventListener<typeof tagName> | null = null;
  input: CallbackEventListener<typeof tagName> | null = null;
  change: CallbackEventListener<typeof tagName> | null = null;
}

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}