Class IgcDatePickerComponent

igc-date-picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up.

igc-date-picker

prefix - Renders content before the input.

suffix - Renders content after the 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.

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

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

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

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.

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

container - The main wrapper that holds all main input elements.

input - The native input element.

prefix - The prefix wrapper.

suffix - The suffix wrapper.

calendar-icon - The calendar icon wrapper for closed state.

calendar-icon-open - The calendar icon wrapper for opened state.

clear-icon - The clear icon wrapper.

actions - The actions 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<
        IgcDatePickerComponentEventMap,
        this,
    > & IgcBaseComboBoxLikeComponent<this>
    • IgcDatePickerComponent

Properties

disabled: boolean

The disabled state of the component.

false
headerOrientation: CalendarHeaderOrientation = '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

keepOpenOnSelect: boolean = false

Whether the component dropdown should be kept open on selection.

keep-open-on-select

label: string

The label of the datepicker.

label

locale: string = 'en'

The locale settings used to display the value.

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 state of the datepicker dropdown.

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.

placeholder: string

The placeholder attribute of the control.

prompt: string = '_'

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

readOnly: boolean = false

Makes the control a readonly field.

readonly

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings of the calendar.

showWeekNumbers: boolean = false

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

show-week-numbers

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

visibleMonths: number = 1

The number of months displayed in the calendar.

visible-months

weekStart: WeekDays = 'sunday'

Sets the start day of the week for the calendar.

tagName: "igc-date-picker" = 'igc-date-picker'

Returns the HTML-uppercased qualified name.

MDN Reference

Accessors

  • set activeDate(value: undefined | null | string | Date): void

    Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.

    Parameters

    • value: undefined | null | string | Date

    Returns void

  • set defaultValue(value: unknown): void

    The initial value of the component.

    Parameters

    • value: unknown

    Returns void

  • set displayFormat(value: string): void

    Format to display the value in when not editing. Defaults to the input format if not set.

    display-format

    Parameters

    • value: string

    Returns void

  • get form(): null | HTMLFormElement

    Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

  • set inputFormat(value: string): void

    The date format to apply on the input. Defaults to the current locale Intl.DateTimeFormat

    input-format

    Parameters

    • value: string

    Returns void

  • set max(value: undefined | null | string | Date): void

    The maximum value required for the date picker to remain valid.

    Parameters

    • value: undefined | null | string | Date

    Returns void

  • set min(value: undefined | null | string | Date): void

    The minimum value required for the date picker to remain valid.

    Parameters

    • value: undefined | null | string | Date

    Returns void

  • 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

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

    Returns boolean

  • Hides the component.

    Returns Promise<boolean>

  • 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

  • Sets the text selection range in the input of the component

    Parameters

    • start: number
    • end: number
    • direction: SelectionRangeDirection

    Returns void

  • Shows the component.

    Returns Promise<boolean>

  • Toggles the open state of the component.

    Returns Promise<boolean>