Date: Fri, 10 Mar 2017 09:33:57 -0800
Subject: [PATCH 4/8] added working date filter
---
src/demo-app/datepicker/datepicker-demo.html | 3 ++-
src/demo-app/datepicker/datepicker-demo.ts | 2 ++
src/lib/datepicker/_datepicker-theme.scss | 19 ++++++++++++++++---
src/lib/datepicker/calendar-table.html | 3 ++-
src/lib/datepicker/calendar-table.ts | 9 ++++++---
src/lib/datepicker/calendar.ts | 8 +++++---
src/lib/datepicker/month-view.ts | 7 ++++---
src/lib/datepicker/year-view.html | 3 ++-
src/lib/datepicker/year-view.ts | 19 ++++++++++---------
9 files changed, 49 insertions(+), 24 deletions(-)
diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
index 5aba9dde25e0..faee6d1cb911 100644
--- a/src/demo-app/datepicker/datepicker-demo.html
+++ b/src/demo-app/datepicker/datepicker-demo.html
@@ -20,7 +20,8 @@ Work in progress, not ready for use.
-
+
diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts
index f0927ec1203c..5c681a100b8f 100644
--- a/src/demo-app/datepicker/datepicker-demo.ts
+++ b/src/demo-app/datepicker/datepicker-demo.ts
@@ -11,4 +11,6 @@ import {SimpleDate} from '@angular/material';
export class DatepickerDemo {
date: SimpleDate;
touch = false;
+ dateFilter = (date: SimpleDate) => !this._blacklistedMonths.has(date.month) && date.date % 2 == 0;
+ private _blacklistedMonths = new Set([2, 3]);
}
diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index 5cf64b335323..725cca5529a6 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -3,11 +3,12 @@
@mixin mat-datepicker-theme($theme) {
- $mat-datepicker-selected-today-box-shadow-width: 1px;
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
+ $mat-datepicker-selected-today-box-shadow-width: 1px;
+
.mat-calendar {
background-color: mat-color($background, card);
}
@@ -36,10 +37,14 @@
.mat-calendar-table-cell-content {
color: mat-color($foreground, text);
border-color: transparent;
+
+ .mat-calendar-table-disabled > &:not(.mat-calendar-table-selected) {
+ color: mat-color($foreground, disabled-text);
+ }
}
- .mat-calendar-table-cell:hover {
- .mat-calendar-table-cell-content:not(.mat-calendar-table-selected) {
+ :not(.mat-calendar-table-disabled):hover {
+ & > .mat-calendar-table-cell-content:not(.mat-calendar-table-selected) {
background-color: mat-color($background, hover);
}
}
@@ -47,6 +52,10 @@
.mat-calendar-table-selected {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
+
+ .mat-calendar-table-disabled > & {
+ background-color: fade-out(mat-color($primary), .6);
+ }
}
.mat-calendar-table-today {
@@ -54,6 +63,10 @@
// Note: though it's not text, the border is a hint about the fact that this is today's date,
// so we use the hint color.
border-color: mat-color($foreground, hint-text);
+
+ .mat-calendar-table-disabled > & {
+ border-color: fade-out(mat-color($foreground, hint-text), .2);
+ }
}
&.mat-calendar-table-selected {
diff --git a/src/lib/datepicker/calendar-table.html b/src/lib/datepicker/calendar-table.html
index 6df7a677b4e4..37b29b265d79 100644
--- a/src/lib/datepicker/calendar-table.html
+++ b/src/lib/datepicker/calendar-table.html
@@ -13,7 +13,8 @@
+ [class.mat-calendar-table-disabled]="!item.enabled"
+ (click)="_cellClicked(item)">
diff --git a/src/lib/datepicker/calendar-table.ts b/src/lib/datepicker/calendar-table.ts
index b6cd755fc2c1..aabe9c76fe70 100644
--- a/src/lib/datepicker/calendar-table.ts
+++ b/src/lib/datepicker/calendar-table.ts
@@ -48,14 +48,17 @@ export class MdCalendarTable {
/** The number of columns in the table. */
@Input() numCols = 7;
+ /** Whether to allow selection of disabled cells. */
+ @Input() allowDisabledSelection = false;
+
/** Emits when a new value is selected. */
@Output() selectedValueChange = new EventEmitter ();
- _cellClicked(value: number) {
- if (this.selectedValue && this.selectedValue === value) {
+ _cellClicked(cell: MdCalendarCell) {
+ if (!this.allowDisabledSelection && !cell.enabled) {
return;
}
- this.selectedValueChange.emit(value);
+ this.selectedValueChange.emit(cell.value);
}
/** The number of blank cells to put at the beginning for the first row. */
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
index 31f5f803e3ef..4cf496d49ba2 100644
--- a/src/lib/datepicker/calendar.ts
+++ b/src/lib/datepicker/calendar.ts
@@ -53,15 +53,17 @@ export class MdCalendar implements AfterContentInit {
private _maxDate: SimpleDate;
/** A function used to filter which dates are selectable. */
- @Input() dateFilter = (date: SimpleDate) => true;
+ @Input() dateFilter: (date: SimpleDate) => boolean;
/** Emits when the currently selected date changes. */
@Output() selectedChange = new EventEmitter();
/** Date filter for the month and year views. */
_dateFilterForViews = (date: SimpleDate) => {
- return !!date && date.compare(this.minDate) >= 0 && date.compare(this.maxDate) &&
- this.dateFilter(date);
+ return !!date &&
+ (!this.dateFilter || this.dateFilter(date)) &&
+ (!this.minDate || date.compare(this.minDate) >= 0) &&
+ (!this.maxDate || date.compare(this.maxDate) <= 0);
};
/**
diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts
index 0dfd3214b3b9..ced1014d9e00 100644
--- a/src/lib/datepicker/month-view.ts
+++ b/src/lib/datepicker/month-view.ts
@@ -48,7 +48,7 @@ export class MdMonthView implements AfterContentInit {
private _selected: SimpleDate;
/** A function used to filter which dates are selectable. */
- @Input() dateFilter = (date: SimpleDate) => true;
+ @Input() dateFilter: (date: SimpleDate) => boolean;
/** Emits when a new date is selected. */
@Output() selectedChange = new EventEmitter();
@@ -79,7 +79,7 @@ export class MdMonthView implements AfterContentInit {
/** Handles when a new date is selected. */
_dateSelected(date: number) {
- if (this.selected && this.selected.date == date) {
+ if (this._selectedDate == date) {
return;
}
this.selectedChange.emit(new SimpleDate(this.date.year, this.date.month, date));
@@ -107,7 +107,8 @@ export class MdMonthView implements AfterContentInit {
this._weeks.push([]);
cell = 0;
}
- let enabled = this.dateFilter(new SimpleDate(this.date.year, this.date.month, i + 1));
+ let enabled = !this.dateFilter ||
+ this.dateFilter(new SimpleDate(this.date.year, this.date.month, i + 1));
this._weeks[this._weeks.length - 1]
.push(new MdCalendarCell(i + 1, this._locale.dates[i + 1], enabled));
}
diff --git a/src/lib/datepicker/year-view.html b/src/lib/datepicker/year-view.html
index c2aa74d8e08c..2e70db4cf0a3 100644
--- a/src/lib/datepicker/year-view.html
+++ b/src/lib/datepicker/year-view.html
@@ -1,4 +1,5 @@
- true;
+ @Input() dateFilter: (date: SimpleDate) => boolean;
/** Emits when a new month is selected. */
@Output() selectedChange = new EventEmitter();
@@ -63,11 +63,7 @@ export class MdYearView implements AfterContentInit {
*/
_selectedMonth: number;
- constructor(private _locale: CalendarLocale) {
- // First row of months only contains 5 elements so we can fit the year label on the same row.
- this._months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(
- month => this._createCellForMonth(month)));
- }
+ constructor(private _locale: CalendarLocale) {}
ngAfterContentInit() {
this._init();
@@ -75,9 +71,6 @@ export class MdYearView implements AfterContentInit {
/** Handles when a new month is selected. */
_monthSelected(month: number) {
- if (this.selected && this.selected.month == month) {
- return;
- }
this.selectedChange.emit(new SimpleDate(this.date.year, month, 1));
}
@@ -86,6 +79,10 @@ export class MdYearView implements AfterContentInit {
this._selectedMonth = this._getMonthInCurrentYear(this.selected);
this._todayMonth = this._getMonthInCurrentYear(SimpleDate.today());
this._yearLabel = this._locale.getCalendarYearHeaderLabel(this._date);
+
+ // First row of months only contains 5 elements so we can fit the year label on the same row.
+ this._months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(
+ month => this._createCellForMonth(month)));
}
/**
@@ -104,6 +101,10 @@ export class MdYearView implements AfterContentInit {
/** Whether the given month is enabled. */
private _isMonthEnabled(month: number) {
+ if (!this.dateFilter) {
+ return true;
+ }
+
let enabled = false;
for (let date = new SimpleDate(this.date.year, month, 1); date.month === month;
date = date.add({days: 1})) {
From 40fbfce388a342bcdf958278541bfacbcc009619 Mon Sep 17 00:00:00 2001
From: Miles Malerba
Date: Fri, 10 Mar 2017 09:57:02 -0800
Subject: [PATCH 5/8] disabled style for prev/next buttons
---
src/lib/datepicker/calendar.html | 6 ++++--
src/lib/datepicker/calendar.scss | 5 +++++
src/lib/datepicker/calendar.ts | 20 ++++++++++++++++++++
3 files changed, 29 insertions(+), 2 deletions(-)
diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
index 39f16c66f998..e570acda369f 100644
--- a/src/lib/datepicker/calendar.html
+++ b/src/lib/datepicker/calendar.html
@@ -6,14 +6,16 @@
- |