diff --git a/components/datepicker/datepicker-inner.component.ts b/components/datepicker/datepicker-inner.component.ts index 2d71a1f7bf..7ffcb44a22 100644 --- a/components/datepicker/datepicker-inner.component.ts +++ b/components/datepicker/datepicker-inner.component.ts @@ -67,8 +67,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges { @Input() public customClass: Array<{date: Date, mode: string, clazz: string}>; @Input() public monthColLimit: number; @Input() public yearColLimit: number; - // todo: change type during implementation - @Input() public dateDisabled: any; + @Input() public dateDisabled: Array<{date:Date, mode:string}>; @Input() public initDate: Date; @Output() public selectionDone: EventEmitter = new EventEmitter(undefined); @@ -316,9 +315,37 @@ export class DatePickerInnerComponent implements OnInit, OnChanges { return customClassObject === undefined ? '' : customClassObject.clazz; } - protected isDisabled(date: Date): boolean { - // todo: implement dateDisabled attribute - return ((this.minDate && this.compare(date, this.minDate) < 0) || + protected compareDateDisabled(date1Disabled: {date: Date, mode: string}, date2: Date): number { + if (date1Disabled === undefined || date2 === undefined) { + return undefined; + } + + if (date1Disabled.mode === 'day' && this.compareHandlerDay) { + return this.compareHandlerDay(date1Disabled.date, date2); + } + + if (date1Disabled.mode === 'month' && this.compareHandlerMonth) { + return this.compareHandlerMonth(date1Disabled.date, date2); + } + + if (date1Disabled.mode === 'year' && this.compareHandlerYear) { + return this.compareHandlerYear(date1Disabled.date, date2); + } + + return undefined; + } + + protected isDisabled(date: Date): boolean { + let isDateDisabled: boolean = false; + if (this.dateDisabled) { + this.dateDisabled.forEach((disabledDate: {date: Date, mode: string}) => { + if (this.compareDateDisabled(disabledDate, date) === 0) { + isDateDisabled = true; + } + }); + } + + return (isDateDisabled || (this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0)); } } diff --git a/components/datepicker/datepicker.component.ts b/components/datepicker/datepicker.component.ts index 77a7166960..db3c71cdaf 100644 --- a/components/datepicker/datepicker.component.ts +++ b/components/datepicker/datepicker.component.ts @@ -59,8 +59,7 @@ export class DatePickerComponent implements ControlValueAccessor { @Input() public customClass:Array<{date:Date, mode:string, clazz:string}>; @Input() public monthColLimit: number; @Input() public yearColLimit: number; -// todo: change type during implementation - @Input() public dateDisabled:any; + @Input() public dateDisabled:Array<{date:Date, mode:string}>; @Output() public selectionDone:EventEmitter = new EventEmitter(undefined); diff --git a/demo/components/datepicker/datepicker-demo.html b/demo/components/datepicker/datepicker-demo.html index 21dbae5fa1..b13ae22cfb 100644 --- a/demo/components/datepicker/datepicker-demo.html +++ b/demo/components/datepicker/datepicker-demo.html @@ -15,7 +15,7 @@
Selected date is: {{ getDate() | date:'fullDate'}}

Inline

- +

@@ -23,4 +23,5 @@

Inline

+ diff --git a/demo/components/datepicker/datepicker-demo.ts b/demo/components/datepicker/datepicker-demo.ts index f843dbb09a..b0bbe6d8cd 100644 --- a/demo/components/datepicker/datepicker-demo.ts +++ b/demo/components/datepicker/datepicker-demo.ts @@ -14,6 +14,7 @@ export class DatepickerDemoComponent { public events:Array; public tomorrow:Date; public afterTomorrow:Date; + public dateDisabled: Array<{date: Date, mode: string}>; public formats:Array = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; public format:string = this.formats[0]; public dateOptions:any = { @@ -26,6 +27,7 @@ export class DatepickerDemoComponent { (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1); (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2); (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000); + (this.dateDisabled = []); this.events = [ {date: this.tomorrow, status: 'full'}, {date: this.afterTomorrow, status: 'partially'} @@ -44,6 +46,10 @@ export class DatepickerDemoComponent { this.dt = moment('2009-08-24', 'YYYY-MM-DD').toDate(); } + public disableTomorrow(): void { + this.dateDisabled = [{date: this.tomorrow, mode: 'day'}]; + } + // todo: implement custom class cases public getDayClass(date:any, mode:string):string { if (mode === 'day') { @@ -71,6 +77,7 @@ export class DatepickerDemoComponent { public clear():void { this.dt = void 0; + this.dateDisabled = undefined; } public toggleMin():void {