Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

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.

Element

igc-date-picker

Slot

prefix - Renders content before the input.

Slot

suffix - Renders content after the input.

Slot

helper-text - Renders content below the input.

Slot

title - Renders content in the calendar title.

Slot

clear-icon - Renders a clear icon template.

Slot

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

Slot

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

Slot

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

Fires

igcOpening - Emitted just before the calendar dropdown is shown.

Fires

igcOpened - Emitted after the calendar dropdown is shown.

Fires

igcClosing - Emitted just before the calendar dropdown is hidden.

Fires

igcClosed - Emitted after the calendar dropdown is hidden.

Fires

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

Fires

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

Csspart

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

Csspart

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

Csspart

input - The native input element.

Csspart

prefix - The prefix wrapper.

Csspart

suffix - The suffix wrapper.

Csspart

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

Csspart

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

Csspart

clear-icon - The clear icon wrapper.

Csspart

actions - The actions wrapper.

Csspart

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

Csspart

header - The calendar header element.

Csspart

header-title - The calendar header title element.

Csspart

header-date - The calendar header date element.

Csspart

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

Csspart

navigation - The calendar navigation container element.

Csspart

months-navigation - The calendar months navigation button element.

Csspart

years-navigation - The calendar years navigation button element.

Csspart

years-range - The calendar years range element.

Csspart

navigation-buttons - The calendar navigation buttons container.

Csspart

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

Csspart

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

Csspart

days-view - The calendar days view element.

Csspart

months-view - The calendar months view element.

Csspart

years-view - The calendar years view element.

Csspart

days-row - The calendar days row element.

Csspart

calendar-label - The calendar week header label element.

Csspart

week-number - The calendar week number element.

Csspart

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

Csspart

date - The calendar date element.

Csspart

date-inner - The calendar date inner element.

Csspart

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

Csspart

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

Csspart

inactive - The calendar inactive date element.

Csspart

hidden - The calendar hidden date element.

Csspart

weekend - The calendar weekend date element.

Csspart

range - The calendar range selected element.

Csspart

special - The calendar special date element.

Csspart

disabled - The calendar disabled date element.

Csspart

single - The calendar single selected date element.

Csspart

preview - The calendar range selection preview date element.

Csspart

month - The calendar month element.

Csspart

month-inner - The calendar month inner element.

Csspart

year - The calendar year element.

Csspart

year-inner - The calendar year inner element.

Csspart

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

Csspart

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

Hierarchy

Hierarchy

  • FormRequiredInterface<this> & FormAssociatedElementInterface<this> & EventEmitterInterface<IgcDatepickerEventMap, this> & IgcBaseComboBoxLikeComponent<this>
    • IgcDatePickerComponent

Other

lifecycle

Other

disabled

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

headerOrientation

headerOrientation: "horizontal" | "vertical" = 'horizontal'

The orientation of the calendar header.

Attr

header-orientation

hideHeader

hideHeader: boolean = false

Determines whether the calendar hides its header.

Attr

hide-header

hideOutsideDays

hideOutsideDays: boolean = false

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

Attr

hide-outside-days

invalid

invalid: boolean

Control the validity of the control.

Attr

keepOpenOnOutsideClick

keepOpenOnOutsideClick: boolean = false

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

Attr

keep-open-on-outside-click

keepOpenOnSelect

keepOpenOnSelect: boolean = false

Whether the component dropdown should be kept open on selection.

Attr

keep-open-on-select

label

label: string

The label of the datepicker.

Attr

label

locale

locale: string = 'en'

The locale settings used to display the value.

Attr

mode

mode: "dialog" | "dropdown" = 'dropdown'

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

Attr

mode

name

name: string

The name attribute of the control.

Attr

nonEditable

nonEditable: boolean = false

Whether to allow typing in the input.

Attr

non-editable

open

open: boolean = false

Sets the state of the datepicker dropdown.

Attr

orientation

orientation: "horizontal" | "vertical" = 'horizontal'

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

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

prompt

prompt: string = '_'

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

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

required

required: boolean

Makes the control a required field in a form context.

Attr

resourceStrings

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings of the calendar.

showWeekNumbers

showWeekNumbers: boolean = false

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

Attr

show-week-numbers

specialDates

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

visibleMonths

visibleMonths: number = 1

The number of months displayed in the calendar.

Attr

visible-months

weekStart

weekStart: WeekDays = 'sunday'

Sets the start day of the week for the calendar.

Static ReadonlytagName

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

Returns the HTML-uppercased qualified name.

MDN Reference

activeDate

  • set activeDate(value): void

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

    Parameters

    • value: Date

    Returns void

disabledDates

displayFormat

  • set displayFormat(value): void

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

    Attr

    display-format

    Parameters

    • value: string

    Returns void

form

  • get form(): null | HTMLFormElement

  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

inputFormat

  • set inputFormat(value): void

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

    Attr

    input-format

    Parameters

    • value: string

    Returns void

max

min

validationMessage

  • get validationMessage(): string

  • A string containing the validation message of this element.

    Returns string

validity

  • 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

value

willValidate

  • 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

checkValidity

  • checkValidity(): boolean

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

    Returns boolean

clear

hide

  • hide(): Promise<boolean>

  • Hides the component.

    Returns Promise<boolean>

reportValidity

  • reportValidity(): boolean

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

    Returns boolean

select

setCustomValidity

  • setCustomValidity(message): void

  • 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

setSelectionRange

  • setSelectionRange(start, end, direction?): void

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

    Parameters

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

    Returns void

show

  • show(): Promise<boolean>

  • Shows the component.

    Returns Promise<boolean>

stepDown

stepUp

toggle

  • toggle(): Promise<boolean>

  • Toggles the open state of the component.

    Returns Promise<boolean>

lifecycle

connectedCallback

  • connectedCallback(): void

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
      super.connectedCallback();
      addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void