Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcDateRangePickerComponent

The igc-date-range-picker allows the user to select a range of dates.

igc-date-range-picker

prefix - Renders content before the input (single input).

prefix-start - Renders content before the start input (two inputs).

prefix-end - Renders content before the end input (two inputs).

suffix - Renders content after the input (single input).

suffix-start - Renders content after the start input (single input).

suffix-end - Renders content after the end input (single input).

helper-text - Renders content below the input.

bad-input - Renders content when the value is in the disabledDates ranges.

value-missing - Renders content when the required validation fails.

range-overflow - Renders content when the max validation fails.

range-underflow - Renders content when the min validation fails.

custom-error - Renders content when setCustomValidity(message) is set.

invalid - Renders content when the component is in invalid state (validity.valid = false).

title - Renders content in the calendar title.

header-date - Renders content instead of the current date/range in the calendar header.

clear-icon - Renders a clear icon template.

clear-icon-start - Renders a clear icon template for the start input (two inputs).

clear-icon-end - Renders a clear icon template for the end input (two inputs).

calendar-icon - Renders the icon/content for the calendar picker.

calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs).

calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs).

calendar-icon-open - Renders the icon/content for the picker in open state.

calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs).

calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs).

actions - Renders content in the action part of the picker in open state.

separator - Renders the separator element between the two inputs.

igcOpening - Emitted just before the calendar dropdown is shown.

igcOpened - Emitted after the calendar dropdown is shown.

igcClosing - Emitted just before the calendar dropdown is hidden.

igcClosed - Emitted after the calendar dropdown is hidden.

igcChange - Emitted when the user modifies and commits the elements's value.

igcInput - Emitted when when the user types in the element.

separator - The separator element between the two inputs.

ranges - The wrapper that renders the custom and predefined ranges.

label - The label wrapper that renders content above the target input.

calendar-icon - The calendar icon wrapper for closed state (single input).

calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs).

calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs).

calendar-icon-open - The calendar icon wrapper for opened state (single input).

calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs).

calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs).

clear-icon - The clear icon wrapper (single input).

clear-icon-start - The clear icon wrapper for the start input (two inputs).

clear-icon-end - The clear icon wrapper for the end input (two inputs).

actions - The wrapper for the custom actions area.

clear-icon - The clear icon wrapper.

input - The native input element.

prefix - The prefix wrapper.

suffix - The suffix wrapper.

helper-text - The helper-text wrapper that renders content below the target input.

header - The calendar header element.

header-title - The calendar header title element.

header-date - The calendar header date element.

calendar-content - The calendar content element which contains the views and navigation elements.

navigation - The calendar navigation container element.

months-navigation - The calendar months navigation button element.

years-navigation - The calendar years navigation button element.

years-range - The calendar years range element.

navigation-buttons - The calendar navigation buttons container.

navigation-button - The calendar previous/next navigation button.

days-view-container - The calendar days view container element.

days-view - The calendar days view element.

months-view - The calendar months view element.

years-view - The calendar years view element.

days-row - The calendar days row element.

calendar-label - The calendar week header label element.

week-number - The calendar week number element.

week-number-inner - The calendar week number inner element.

date - The calendar date element.

date-inner - The calendar date inner element.

first - The calendar first selected date element in range selection.

last - The calendar last selected date element in range selection.

inactive - The calendar inactive date element.

hidden - The calendar hidden date element.

weekend - The calendar weekend date element.

range - The calendar range selected element.

special - The calendar special date element.

disabled - The calendar disabled date element.

single - The calendar single selected date element.

preview - The calendar range selection preview date element.

month - The calendar month element.

month-inner - The calendar month inner element.

year - The calendar year element.

year-inner - The calendar year inner element.

selected - The calendar selected state for element(s). Applies to date, month and year elements.

current - The calendar current state for element(s). Applies to date, month and year elements.

Hierarchy

Hierarchy

  • FormRequiredInterface<this> & FormAssociatedElementInterface<this> & EventEmitterInterface<
        IgcDateRangePickerComponentEventMap,
        this,
    > & IgcComboBoxBaseLikeComponent<this>
    • IgcDateRangePickerComponent

Constructors

Properties

Accessors

Methods

Constructors

Properties

customRanges: CustomDateRange[] = []

Renders chips with custom ranges based on the elements of the array.

disabled: boolean

The disabled state of the component.

false
emitEvent: <
    K extends keyof IgcDateRangePickerComponentEventMap,
    D extends void | DateRangeValue | null,
>(
    type: K,
    eventInitDict?: CustomEventInit<D>,
) => boolean & <K extends keyof IgcBaseComboBoxEventMap, D extends void>(
    event: K,
    eventInitDict?: CustomEventInit<D>,
) => boolean
headerOrientation: ContentOrientation = 'horizontal'

The orientation of the calendar header.

header-orientation

hideHeader: boolean = false

Determines whether the calendar hides its header.

hide-header

hideOutsideDays: boolean = false

Controls the visibility of the dates that do not belong to the current month.

hide-outside-days

invalid: boolean

Sets the control into invalid state (visual state only).

false
keepOpenOnOutsideClick: boolean = false

Whether the component dropdown should be kept open on clicking outside of it.

keep-open-on-outside-click

false
keepOpenOnSelect: boolean = false

Whether the component dropdown should be kept open on selection.

keep-open-on-select

false
label: string

The label of the control (single input).

label

labelEnd: string = ''

The label attribute of the end input.

label-end

labelStart: string = ''

The label attribute of the start input.

label-start

mode: PickerMode = 'dropdown'

Determines whether the calendar is opened in a dropdown or a modal dialog

mode

name: string

The name attribute of the control.

nonEditable: boolean = false

Whether to allow typing in the input.

non-editable

open: boolean = false

Sets the open state of the component.

open

false
orientation: ContentOrientation = 'horizontal'

The orientation of the multiple months displayed in the calendar's days view.

outlined: boolean = false

Whether the control will have outlined appearance.

placeholderEnd: string = ''

The placeholder attribute of the end input.

placeholder-end

placeholderStart: string = ''

The placeholder attribute of the start input.

placeholder-start

prompt: string = '_'

The prompt symbol to use for unfilled parts of the mask.

readOnly: boolean = false

Makes the control a readonly field.

readonly

showWeekNumbers: boolean = false

Whether to show the number of the week in the calendar.

show-week-numbers

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

usePredefinedRanges: boolean = false

Whether the control will show chips with predefined ranges.

useTwoInputs: boolean = false

Use two inputs to display the date range values. Makes the input editable in dropdown mode.

use-two-inputs

weekStart: WeekDays = 'sunday'

Sets the start day of the week for the calendar.

styles: CSSResult[] = ...
tagName: "igc-date-range-picker" = 'igc-date-range-picker'

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

Accessors

  • get defaultValue(): unknown

    Returns unknown

  • set defaultValue(value: unknown): void

    The initial value of the component.

    Parameters

    • value: unknown

    Returns void

  • get form(): HTMLFormElement | null

    Returns the HTMLFormElement associated with this element.

    Returns HTMLFormElement | null

  • get required(): boolean

    Returns boolean

  • set required(value: boolean): void

    When set, makes the component a required field for validation.

    false

    Parameters

    • value: boolean

    Returns void

  • get validationMessage(): string

    A string containing the validation message of this element.

    Returns string

  • get validity(): ValidityState

    Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

    Returns ValidityState

  • get willValidate(): boolean

    A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

    Returns boolean

Methods

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | AddEventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Checks for validity of the control and emits the invalid event if it invalid.

    Returns boolean

  • Hides the component.

    Returns Promise<boolean>

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | EventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | EventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | EventListenerOptions

    Returns void

  • Checks for validity of the control and shows the browser message if it invalid.

    Returns boolean

  • Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns void

  • Shows the component.

    Returns Promise<boolean>

  • Toggles the open state of the component.

    Returns Promise<boolean>