Gets/Sets the format options of the IgxDatePickerComponent.
this.datePicker.calendarFormat = {day: "numeric", month: "long", weekday: "long", year: "numeric"};
Gets/Sets the cancel button's label.
<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker>
Emitted after the calendar has closed.
<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
Emitted when the calendar has started closing, cancelable.
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
Enables or disables the picker.
<igx-date-picker [disabled]="'true'"></igx-date-picker>
The format used to display the picker's value when it's not being edited.
Uses Angular's DatePipe.
<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
Gets/Sets the number of month views displayed.
Default value is 1.
<igx-date-picker [displayMonthsCount]="2"></igx-date-picker>
let monthViewsDisplayed = this.datePicker.displayMonthsCount;
Gets/Sets the format views of the IgxDatePickerComponent.
let formatViews = this.datePicker.formatViews;
this.datePicker.formatViews = {day:false, month: false, year:false};
Gets/Sets a custom formatter function on the selected or passed date.
<igx-date-picker [value]="date" [formatter]="formatter"></igx-date-picker>
Gets/Sets the orientation of the IgxDatePickerComponent header.
<igx-date-picker headerOrientation="vertical"></igx-date-picker>
Gets/Sets whether the inactive dates will be hidden.
Applies to dates that are out of the current month.
Default value is false.
<igx-date-picker [hideOutsideDays]="true"></igx-date-picker>
let hideOutsideDays = this.datePicker.hideOutsideDays;
Gets/Sets the value of id attribute.
If not provided it will be automatically generated.
<igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
The editor's input mask.
Also used as a placeholder when none is provided.
Default is "'MM/dd/yyyy'"
<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>
Can be dropdown with editable input field or dialog with readonly input field.
Default mode is dropdown
<igx-date-picker mode="dialog"></igx-date-picker>
Emitted after the calendar has opened.
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
Emitted when the calendar has started opening, cancelable.
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
Gets/Sets the container used for the popup element.
outlet is an instance of IgxOverlayOutletDirective or an ElementRef.
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-date-picker [outlet]="outlet"></igx-date-picker>
//..
Overlay settings used to display the pop-up element.
<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
Sets the placeholder of the picker's input.
<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
Gets/Sets the resource strings for the picker's default toggle icon. By default it uses EN resources.
Show/hide week numbers
```html <igx-date-picker [showWeekNumbers]="true"> ``
Delta values used to increment or decrement each editor date part on spin actions.
All values default to 1.
<igx-date-picker [spinDelta]="{ date: 5, month: 2 }"></igx-date-picker>
Specify if the currently spun date segment should loop over.
<igx-date-picker [spinLoop]="false"></igx-date-picker>
Gets/Sets the default template editor's tabindex.
<igx-date-picker [tabIndex]="1"></igx-date-picker>
Gets/Sets the today button's label.
<igx-date-picker todayButtonLabel="Today"></igx-date-picker>
Emitted when the user types/spins invalid date in the date-picker editor.
<igx-date-picker (validationFailed)="onValidationFailed($event)"></igx-date-picker>
Emitted when the picker's value changes.
Used for two-way bindings.
<igx-date-picker [(value)]="date"></igx-date-picker>
Gets the picker's pop-up state.
const state = this.picker.collapsed;
Gets/Sets the disabled dates descriptors.
let disabledDates = this.datepicker.disabledDates;
this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Gets the locale of the date-picker.
If not set, defaults to applciation's locale..
Sets the locale of the date-picker.
Expects a valid BCP 47 language tag.
The maximum value the picker will accept.
<igx-date-picker [maxValue]="maxDate"></igx-date-picker>
The minimum value the picker will accept.
<igx-date-picker [minValue]="minDate"></igx-date-picker>
Gets/Sets the special dates descriptors.
let specialDates = this.datepicker.specialDates;
this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
Determines how the picker's input will be styled.
Default is box.
<igx-date-picker [type]="'line'"></igx-date-picker>
Gets/Sets the selected date.
<igx-date-picker [value]="date"></igx-date-picker>
Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.
Sets the start day of the week.
Can be assigned to a numeric value or to WEEKDAYS enum value.
Decrement a specified DatePart
this.datePicker.decrement(DatePart.Date);
The optional DatePart to decrement. Defaults to Date.
The optional delta to decrement by. Overrides spinDelta.
Increment a specified DatePart.
this.datePicker.increment(DatePart.Date);
The optional DatePart to increment. Defaults to Date.
The optional delta to increment by. Overrides spinDelta.
Opens the picker's dropdown or dialog.
<igx-date-picker #picker></igx-date-picker>
<button (click)="picker.open()">Open Dialog</button>
Toggles the picker's dropdown or dialog
<igx-date-picker #picker></igx-date-picker>
<button (click)="picker.toggle()">Toggle Dialog</button>
Date Picker displays a popup calendar that lets users select a single date.
Igx Module
IgxDatePickerModule
Igx Theme
igx-calendar-theme, igx-icon-theme
Igx Group
Scheduling
Igx Keywords
datepicker, calendar, schedule, date
Example