Web Components Date Picker Overview

    The Date Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI.

    Web Components Date Picker Example

    This sample demonstrates how to create IgcDatePickerComponent with option to select a single date.

    Dependencies

    When installing the Date Picker component, the core and inputs packages must also be installed.

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

    Component Modules

    The Date Picker component requires the following modules to be registered:

    import { IgcDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcDatePickerModule);

    Usage

    The Web Components Date Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below:

    • Text Area: This displays the selected date, stored in the value property of the editor.

    • Calendar: Clicking the calendar button will open the calendar drop-down of the Date Picker. The calendar will open to show the month of the currently selected value, if there is one. If a value is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically.

    • Clear Button: The 'x' icon will clear the current value.

    Property Type Description
    iconColor string Changes the color of the calendar button.
    allowTextInput bool The date picker's value can be typed-in and modified by toggling this property to true.
    dateFormat enum Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021.
    firstDayOfWeek enum Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday.
    formatString string When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the dateFormat's DateLong and formatString are set then the dateFormat is ignored.
    label string Displays custom text above the date in the top-left corner of the Date Picker.
    minDate DateTime Restricts earlier dates from being selected or viewed.
    maxDate DateTime Restricts later dates from being selected or viewed.
    placeholder string A custom string to be displayed when the value within the edit portion of the calendar is cleared.
    showClearButton bool Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the value of the Date Picker. The clear button's visibility can be toggled on and off.
    showTodayButton bool The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off.
    showWeekNumbers bool Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the date picker. The week number's visibility can be toggled on and off.
    firstWeekOfYear enum Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek.
    openOnFocus bool By default, the dropdown portion of the Date Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar.
    value date Sets the value of the Date Picker and selects it in the dropdown calendar.

    Users can also customize the Date Picker's font by using the various text properties of the control. They are: textColor, TextFontFamily, TextFontSize, TextFontStyle, and TextFontWeight.

    Editing

    The following example demonstrates how to enable editing in the IgcDatePickerComponent.

    Date Limits

    The following example demonstrates how to restrict selected dates in the IgcDatePickerComponent.

    Date Formats

    The following example demonstrates how apply a long date in the IgcDatePickerComponent.

    Date Ranges

    The following example demonstrates how combine multiple IgcDatePickerComponent controls.

    API References

    The following is a list of API members mentioned in the above sections: