Skip to content

Commit

Permalink
Fixed #1690
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Mar 27, 2017
1 parent 05dcb06 commit c6b9ac2
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 12 deletions.
39 changes: 37 additions & 2 deletions components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export interface LocaleSettings {
<td *ngFor="let date of week" [ngClass]="{'ui-datepicker-other-month ui-state-disabled':date.otherMonth,
'ui-datepicker-current-day':isSelected(date),'ui-datepicker-today':date.today}">
<a class="ui-state-default" href="#" *ngIf="date.otherMonth ? showOtherMonths : true"
[ngClass]="{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today,'ui-state-disabled':!date.selectable}"
[ngClass]="{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today, 'ui-state-disabled':!date.selectable}"
(click)="onDateSelect($event,date)">{{date.day}}</a>
</td>
</tr>
Expand Down Expand Up @@ -216,6 +216,10 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce

@Input() dataType: string = 'date';

@Input() disabledDates: Array<Date>;

@Input() disabledDays: Array<number>;

@Output() onFocus: EventEmitter<any> = new EventEmitter();

@Output() onBlur: EventEmitter<any> = new EventEmitter();
Expand Down Expand Up @@ -599,6 +603,8 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
isSelectable(day, month, year): boolean {
let validMin = true;
let validMax = true;
let validDate = true;
let validDay = true;

if(this.minDate) {
if(this.minDate.getFullYear() > year) {
Expand Down Expand Up @@ -632,7 +638,36 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
}
}

return validMin && validMax;
if(this.disabledDates) {
validDate = !this.isDateDisabled(day,month,year);
}

if(this.disabledDays) {
validDay = !this.isDayDisabled(day,month,year)
}

return validMin && validMax && validDate && validDay;
}

isDateDisabled(day:number, month:number, year:number):boolean {
if(this.disabledDates) {
for(let disabledDate of this.disabledDates) {
if(disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
return true;
}
}
}

return false;
}

isDayDisabled(day:number, month:number, year:number):boolean {
if(this.disabledDays) {
let weekday = new Date(year, month, day);
let weekdayNumber = weekday.getDay();
return this.disabledDays.indexOf(weekdayNumber) !== -1;
}
return false;
}

onInputFocus(inputfield, event) {
Expand Down
58 changes: 48 additions & 10 deletions showcase/demo/calendar/calendardemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,33 @@ <h3>Icon</h3>
</div>

<div class="ui-g-12 ui-md-4">
<h3>Restrict</h3>
<h3>Min-Max</h3>
<p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
</div>

<div class="ui-g-12 ui-md-4">
<h3>Disable Days</h3>
<p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"></p-calendar> {{date5|date}}
</div>

<div class="ui-g-12 ui-md-4">
<h3>Navigators</h3>
<p-calendar [(ngModel)]="date5" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date5|date}}
<p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
</div>

<div class="ui-g-12 ui-md-4">
<h3>Time</h3>
<p-calendar [(ngModel)]="date6" [showTime]="true"></p-calendar> {{date6}}
<p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar> {{date7}}
</div>

<div class="ui-g-12 ui-md-4">
<h3>Time Only</h3>
<p-calendar [(ngModel)]="date7" [timeOnly]="true"></p-calendar>
<p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
</div>
</div>

<h3>Inline {{date8|date}}</h3>
<p-calendar [(ngModel)]="date8" [inline]="true"></p-calendar>
<p-calendar [(ngModel)]="date9" [inline]="true"></p-calendar>
</div>

<div class="content-section source">
Expand Down Expand Up @@ -137,6 +142,14 @@ <h3>Date Restriction</h3>
<code class="language-markup" pCode>
&lt;p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="maxDateValue" readonlyInput="readonlyInput">&gt;&lt;/p-calendar&gt;
</code>
</pre>

<h3>Disable specific dates and/or days</h3>
<p>To disable specific dates or days, set readonlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options.</p>
<pre>
<code class="language-markup" pCode>
&lt;p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6}" readonlyInput="readonlyInput">&gt;&lt;/p-calendar&gt;
</code>
</pre>

<h3>Localization</h3>
Expand Down Expand Up @@ -305,6 +318,18 @@ <h3>Attributes</h3>
<td>null</td>
<td>The maximum selectable date.</td>
</tr>
<tr>
<td>disabledDates</td>
<td>Array&lt;Date&gt;</td>
<td>null</td>
<td>Array with dates that should be disabled (not selectable).</td>
</tr>
<tr>
<td>disabledDays</td>
<td>Array&lt;number&gt;</td>
<td>null</td>
<td>Array with weekday numbers that should be disabled (not selectable).</td>
</tr>
<tr>
<td>monthNavigator</td>
<td>boolean</td>
Expand Down Expand Up @@ -473,28 +498,33 @@ <h3>Dependencies</h3>
&lt;/div&gt;

&lt;div class="ui-g-12 ui-md-4"&gt;
&lt;h3&gt;Restrict&lt;/h3&gt;
&lt;h3&gt;Min-Max&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"&gt;&lt;/p-calendar&gt; &#123;&#123;date4|date&#125;&#125;
&lt;/div&gt;

&lt;div class="ui-g-12 ui-md-4"&gt;
&lt;h3&gt;Disable Days&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"&gt;&lt;/p-calendar&gt; &#123;&#123;date5|date&#125;&#125;
&lt;/div&gt;

&lt;div class="ui-g-12 ui-md-4"&gt;
&lt;h3&gt;Navigators&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date5" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"&gt;&lt;/p-calendar&gt; &#123;&#123;date5|date&#125;&#125;
&lt;p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"&gt;&lt;/p-calendar&gt; &#123;&#123;date6|date&#125;&#125;
&lt;/div&gt;

&lt;div class="ui-g-12 ui-md-4"&gt;
&lt;h3&gt;Time&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date6" [showTime]="true"&gt;&lt;/p-calendar&gt; &#123;&#123;date6&#125;&#125;
&lt;p-calendar [(ngModel)]="date7" [showTime]="true"&gt;&lt;/p-calendar&gt; &#123;&#123;date7&#125;&#125;
&lt;/div&gt;

&lt;div class="ui-g-12 ui-md-4"&gt;
&lt;h3&gt;Time Only &lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date7" [timeOnly]="true"&gt;&lt;/p-calendar&gt;
&lt;p-calendar [(ngModel)]="date8" [timeOnly]="true"&gt;&lt;/p-calendar&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Inline &#123;&#123;date8|date&#125;&#125;&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date8" [inline]="true"&gt;&lt;/p-calendar&gt;
&lt;p-calendar [(ngModel)]="date9" [inline]="true"&gt;&lt;/p-calendar&gt;
</code>
</pre>

Expand All @@ -518,11 +548,15 @@ <h3>Dependencies</h3>

date8: Date;

date9: Date;

minDate: Date;

maxDate: Date;

es: any;

invalidDates: Array&lt;Date&gt;

ngOnInit() &#123;
this.es = &#123;
Expand Down Expand Up @@ -551,6 +585,10 @@ <h3>Dependencies</h3>
this.maxDate = new Date();
this.maxDate.setMonth(nextMonth);
this.maxDate.setFullYear(nextYear);

let invalidDate = new Date();
invalidDate.setDate(today.getDate() - 1);
this.invalidDates = [today,invalidDate];
&#125;
&#125;
</code>
Expand Down
8 changes: 8 additions & 0 deletions showcase/demo/calendar/calendardemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,14 @@ export class CalendarDemo {

date8: Date;

date9: Date;

minDate: Date;

maxDate: Date;

invalidDates: Array<Date>;

es: any;

ngOnInit() {
Expand All @@ -50,5 +54,9 @@ export class CalendarDemo {
this.maxDate = new Date();
this.maxDate.setMonth(nextMonth);
this.maxDate.setFullYear(nextYear);

let invalidDate = new Date();
invalidDate.setDate(today.getDate() - 1);
this.invalidDates = [today,invalidDate];
}
}

0 comments on commit c6b9ac2

Please sign in to comment.