Skip to content

Commit

Permalink
feat(datepicker): disable datepicker dates based on dateDisabled prop…
Browse files Browse the repository at this point in the history
…erty (#799) (#1130)

* Implemented dateDisabled property on date picker in day, month and year mode.
* Added Disable Tomorrow example to demo app
  • Loading branch information
sdolier authored and valorkin committed Nov 4, 2016
1 parent a1b805f commit 83452e1
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 8 deletions.
37 changes: 32 additions & 5 deletions components/datepicker/datepicker-inner.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<Date> = new EventEmitter<Date>(undefined);
Expand Down Expand Up @@ -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));
}
}
3 changes: 1 addition & 2 deletions components/datepicker/datepicker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<Date> = new EventEmitter<Date>(undefined);

Expand Down
3 changes: 2 additions & 1 deletion demo/components/datepicker/datepicker-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@
<pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
</div>

<hr />
<button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
<button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
<button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button>
</div>
7 changes: 7 additions & 0 deletions demo/components/datepicker/datepicker-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export class DatepickerDemoComponent {
public events:Array<any>;
public tomorrow:Date;
public afterTomorrow:Date;
public dateDisabled: Array<{date: Date, mode: string}>;
public formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
public format:string = this.formats[0];
public dateOptions:any = {
Expand All @@ -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'}
Expand All @@ -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') {
Expand Down Expand Up @@ -71,6 +77,7 @@ export class DatepickerDemoComponent {

public clear():void {
this.dt = void 0;
this.dateDisabled = undefined;
}

public toggleMin():void {
Expand Down

0 comments on commit 83452e1

Please sign in to comment.