Web Components Date Picker Component Overview

The Ignite UI for Web Components 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. Lightweight and simple to use, the Date Picker lets users navigate to a desired date with several view options – month, year, and decade. It also supports common validation properties such as minimum and maximum date constraints and required fields.

The Ignite UI for Web Components Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Web Components Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration.

The IgcDatePickerComponent is a brand new component from Ignite UI for Web Components version 5.0.0. The old IgcDatePickerComponent prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

Web Components Date Picker Example

Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it.

import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

export class DatePickerOverview {
    constructor() {
        let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
        const date = new Date();
        datePicker.value = date;
    }
}

new DatePickerOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Date Picker Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-date-picker id="date-picker">
          <p slot="helper-text">Date</p>
        </igc-date-picker>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Getting Started with Web Components Date Picker

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

You will then need to import the IgcDatePickerComponent, its necessary CSS, and register its module, like so:

import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Using the Web Components Date Picker Component

Display Date Picker

To instantiate a IgcDatePickerComponent in its default dropdown state, use the following code:

<igc-date-picker>
    <p slot="helper-text">Date</p>
</igc-date-picker>
html

Options

The IgcDatePickerComponent can be bound to a date or a string.

const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();

DatePicker.value = date;
typescript

If a string is bound to the picker, it needs to be in the ISO 8601 format:

<igc-date-picker value="2000-01-01"></igc-date-picker>
html

Projecting components

With prefix and suffix slots we can add different content before and after the main content of the Input.

<igc-date-picker id="DatePicker">
    <igc-icon slot="suffix" name="arrow_upward" collection="material" class="small" onclick="DatePicker.stepUp()"></igc-icon>
</igc-date-picker>
html

The above snippet will add an additional icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other.

Customizing the toggle and clear icons

The calendar and clear icon could be templated by using the calendar and clear slots:

<igc-date-picker id="DatePicker">
    <igc-icon slot="calendar" name="calendar" collection="material" class="small"></igc-icon>
    <igc-icon slot="clear" name="delete" collection="material" class="small"></igc-icon>
</igc-date-picker>
html

Custom action buttons

The picker's action buttons can be templated using the actions slot:

<igc-date-picker id="DatePicker">
    <igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>
html

The IgcDatePickerComponent has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse.

Keys	Description
`←`	Move one character to the beginning
`→`	Move one character to the end
`Home`	Move to the beginning
`End`	Move to the end
`Ctrl` / `Command` + `←`	Move to the beginning of the date/time section - current one or left one
`Ctrl` / `Command` + `→`	Move to the end of the date/time section - current on or right one
Focus on a date/time part + `↓`	Decrements a date/time part
Focus on a date/time part + `↑`	Increments a date/time part
`Ctrl` / `Command` + `;`	Sets the current date/time as the value of the editor
`Esc`	Closes the calendar pop-up and focuses the input field

Examples

Dialog Mode

The IgcDatePickerComponent also supports a dialog mode:

<igc-date-picker id="DatePicker" mode="dialog">
</igc-date-picker>
html

import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

export class DatePickerDialogMode {
    constructor() {
        let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
        const date = new Date();
        datePicker.value = date;
    }
}

new DatePickerDialogMode();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Date Picker Dialog Mode</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-date-picker id="date-picker" mode="dialog">
          <p slot="helper-text">Date</p>
        </igc-date-picker>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Display and input format

inputFormat and displayFormat are properties which can be set to make the picker's editor follow a specified format. The inputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

displayFormat is used to format the picker's input when it is not focused. If no displayFormat is provided, the picker will use the inputFormat as its displayFormat.

More information about these can be found in the IgcDateTimeInputComponent format section.

import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

export class DatePickerFormat {
    constructor() {
        let datePicker = document.getElementById('date-picker') as IgcDatePickerComponent;
        const date = new Date();
        datePicker.value = date;
    }
}

new DatePickerFormat();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Date Picker Display Format</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-date-picker id="date-picker" display-format="shortDate" input-format="dd/MM/yy"></igc-date-picker>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Increment and decrement

The IgcDatePickerComponent exposes stepUp and stepDown methods. Both of which come from the IgcDateTimeInputComponent and can be used for incrementing and decrementing a specific DatePart of the currently set date.

<igc-date-picker id="DatePicker">
    <igc-icon slot="prefix" name="arrow_upward" collection="material" onclick="DatePicker.stepUp()"></igc-icon>
    <igc-icon slot="suffix" name="arrow_downward" collection="material" onclick="DatePicker.stepDown()"></igc-icon>
</igc-date-picker>
html

In Forms

The IgcDatePickerComponent could be used in a form element, the component's min and max properties act as form validators.

In forms, we can handle the igcChange event of the component and update the value of the label.

import { defineComponents, IgcButtonComponent, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent, IgcButtonComponent);
export class DatePickerOverview {
    constructor() {
        let form = document.getElementById('form') as HTMLFormElement;
        let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
        let formStatus = document.getElementById('formStatus') as HTMLElement;
        let datePicker = document.getElementById('datePicker') as IgcDatePickerComponent;
        let resetButton = document.getElementById('resetButton') as IgcButtonComponent;

        const date = new Date(2024, 4, 15);
        const minDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 10);
        const maxDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 15);
        datePicker.value = date;
        datePicker.max = maxDate;
        datePicker.min = minDate;

        datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
        formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
        resetButton.addEventListener('click', this.reset);
        datePicker.addEventListener("igcChange", () => {
            datePickerValue.innerHTML = `Date picker value: ${datePicker.value ? datePicker.value.toLocaleString() : null}`;
            formStatus.innerHTML = `Form valid: ${form.checkValidity()}`;
        });
    }

    public reset(){
        let form = document.getElementById('form') as HTMLFormElement;
        let datePickerValue = document.getElementById('datePickerValue') as HTMLElement;
        let formStatus = document.getElementById('formStatus') as HTMLElement;

        datePickerValue.innerHTML = "Date picker value: ";
        formStatus.innerHTML = "Form valid: ";
        form.reset();
    }
}

new DatePickerOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Date Picker Inside A Form</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <form id="form">
        <igc-date-picker id="datePicker" required>
          <p slot="helper-text">Date</p>
        </igc-date-picker>
        <div>
          <igc-button id="submitButton" onclick="form.requestSubmit()">Submit</igc-button>
          <igc-button id="resetButton">Reset</igc-button>
        </div>
      </form>
      <p id="datePickerValue"></p>
      <p id="formStatus"></p>
    </div>
  </div>
  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Calendar Specific settings

The IgcDatePickerComponent can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include visibleMonths which allows more than one calendar to be displayed when the picker expands, weekStart which determines the starting day of the week, showWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgcDatePickerComponent can be controlled through its locale input.

Here is how a IgcDatePickerComponent with Japanese locale definition would look like:

<igc-date-picker locale="ja-JP">
</igc-date-picker>
html

Styling

The IgcDatePickerComponent component derives from the IgcInputComponent and IgcCalendarComponent component, so it exposes all available CSS parts. See Input Styling and Calendar Styling for reference.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}
css

import { defineComponents, IgcDatePickerComponent, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DatePickerStyling.css';

defineComponents(IgcDatePickerComponent, IgcInputComponent);

export class DatePickerDialogMode {
    constructor() {
    }
}

new DatePickerDialogMode();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Date Picker Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-date-picker mode="dialog">
          <p slot="helper-text">Date</p>
        </igc-date-picker>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-date-picker::part(header) {
    background-color: #345779;
    color: #ffffff;
}
igc-date-picker::part(calendar-content) {
    background-color: #fdfdfd;
}
igc-date-picker::part(date-inner current) {
    color: #2dabe8;
    background-color: #fdfdfd;
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
    color: #345779;
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
    color: #2dabe8;
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
    color: #fdfdfd;
    background-color: #345779;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css