An @Input property that renders cancel button with custom label.
<igx-date-picker cancelButtonLabel="Close" todayButtonLabel="Today"></igx-date-picker>An @Input property that disables the IgxDatePickerComponent.
<igx-date-picker [disabled]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>An @Input property that applies a custom formatter function on the selected or passed date.
public date: Date = new Date();
private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });
public formatter = (date: Date) => { return `You selected
${this.dayFormatter.format(date)},
${date.getDate()} ${this.monthFormatter.format(date)},
${date.getFullYear()}`;
}<igx-date-picker [value]="date" [formatter]="formatter"></igx-date-picker>An @Input property that 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>An @Input property that sets whether the IgxDatePickerComponent date parts would spin continuously or stop when min/max is reached.
<igx-date-picker [isSpinLoop]="false"></igx-date-picker>An @Input property that sets the IgxDatePickerComponent label.
The default label is 'Date'.
<igx-date-picker [label]="Calendar"></igx-date-picker>An @Input property that sets the IgxDatePickerComponent label visibility.
By default the visibility is set to true.
<igx-date-picker [labelVisibility]="false">
An @Input property that sets locales. Default locale is en.
<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>Returns the date mask of the IgxDatePickerComponent when in editable dropdown mode.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
let mask = this.datePicker.mask;
}An @Input property that sets whether IgxDatePickerComponent is in dialog or drop down mode.
<igx-date-picker mode="dropdown"></igx-date-picker>An event that is emitted after the IgxDatePickerComponent is closed.
An event that is emitted when the IgxDatePickerComponent is being closed.
An @Output property that fires when the user types/spins to a disabled date in the date-picker editor.
public onDisabledDate(event){
alert("This date is disabled!");
}<igx-date-picker (onDisabledDate)="onDisabledDate($event)"></igx-date-picker>An event that is emitted when the IgxDatePickerComponent calendar is opened.
An @Output property that is fired when selection is made in the calendar.
public selection(event){
alert("A date has been selected!");
}<igx-date-picker (onSelection)="selection($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>An @Output property that fires when the user types/spins invalid date in the date-picker editor.
public onValidationFailed(event){
alert("This date is not valid!");
}<igx-date-picker (onValidationFailed)="onValidationFailed($event)"></igx-date-picker>Determines the container the popup element should be attached to.
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-date-picker [outlet]="outlet"></igx-date-picker>
//..Where outlet is an instance of IgxOverlayOutletDirective or an ElementRef.
An @Input property that renders today button with custom label.
<igx-date-picker cancelButtonLabel="cancel" todayButtonLabel="Tomorrow"></igx-date-picker>An @Output property that is fired when date picker value is changed.
public valueChanged(event){
alert("Date picker value is changed");
}<igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>An @Input property that sets the orientation of the IgxDatePickerComponent header.
<igx-date-picker [vertical]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>An @Input property that sets on which day the week starts.
<igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>Gets the context passed to the input group template.
Gets the disabled dates descriptors.
let disabledDates = this.datepicker.disabledDates;Sets the disabled dates' descriptors.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.disabledDates = [
{type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
{type: DateRangeType.Weekends}];
}Returns the formatted date when IgxDatePickerComponent is in dialog mode.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
public selection(event){
let selectedDate = this.datePicker.displayData;
alert(selectedDate);
}<igx-date-picker #MyDatePicker (onSelection)="selection()" todayButtonLabel="today"></igx-date-picker>Returns the date display format of the IgxDatePickerComponent in dropdown mode.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
let format = this.datePicker.format;
}Sets the date format of the IgxDatePickerComponent when in editable dropdown mode.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
this.datePicker.format = 'yyyy-M-d';
}Returns the format options of the IgxDatePickerComponent.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
let formatOptions = this.datePicker.formatOptions;
}Sets the format options of the IgxDatePickerComponent.
public Options;
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.Options = {
day: "numeric",
month: "long",
weekday: "long",
year: "numeric"
}
this.datePicker.formatOptions = this.Options;
}Returns the format views of the IgxDatePickerComponent.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
let formatViews = this.datePicker.formatViews;
}Sets the format views of the IgxDatePickerComponent.
public Views;
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.Views = {day:false, month: false, year:false};
this.datePicker.formatViews = this.Views;
}Gets the special dates descriptors.
let specialDates = this.datepicker.specialDates;Sets the special dates' descriptors.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.specialDates = [
{type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
{type: DateRangeType.Weekends}];
}Gets the input group template.
let template = this.template();hidden
hidden
An @Input property that gets/sets the selected date.
public date: Date = new Date();<igx-date-picker [value]="date"></igx-date-picker>An @Input property that gets/sets the selected date.
public date: Date = new Date();<igx-date-picker [value]="date"></igx-date-picker>Deselects the calendar date.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.deselectDate();
}Change the calendar selection and calling this method will emit the @calendar.onSelection event, which will fire @handleSelection method.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.selectDate(this.date);
}passed date that has to be set to the calendar.
Selects today's date from calendar and change the input field value, @calendar.viewDate and @calendar.value.
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.triggerTodaySelection();
}Method that sets the selected date.
public date = new Date();
@ViewChild("MyDatePicker")
public datePicker: IgxDatePickerComponent;
ngAfterViewInit(){
this.datePicker.writeValue(this.date);
}The date you want to select.
Ignite UI for Angular Date Picker - Documentation
The Ignite UI Date Picker displays a popup calendar that lets users select a single date.
Example:
<igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker>