feat(datepicker): allow min and max limits

MaximBalaganskiy · Jun 17, 2019 · 31d5593 · 31d5593
1 parent 9f2c0ee
commit 31d5593
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/elements/datepicker/datepicker.html b/src/elements/datepicker/datepicker.html
@@ -6,5 +6,7 @@
 		<label for="${controlId}" ref="labelElement">${label}</label>
 		<i ref="icon" class="material-icons opener" click.delegate="open()">today</i>
 	</div>
-	<md-datepicker view-model.ref="mdDatepicker" container="body" year-range.bind="yearRange" type="date" hidden disabled readonly tabindex="-1" value.bind="value" change.delegate="suppressMaterializeChange($event)"></md-datepicker>
+	<md-datepicker view-model.ref="mdDatepicker" container="body" year-range.bind="yearRange" type="date" hidden disabled 
+		readonly tabindex="-1" value.bind="value" change.delegate="suppressMaterializeChange($event)"
+		min-date.bind="minDate" max-date.bind="maxDate"></md-datepicker>
 </template>
diff --git a/src/elements/datepicker/datepicker.ts b/src/elements/datepicker/datepicker.ts
@@ -21,13 +21,25 @@ export class Datepicker {
 	@au.bindable({ defaultBindingMode: au.bindingMode.oneTime })
 	yearRange: number | number[];
 
+	@au.bindable({ defaultBindingMode: au.bindingMode.oneTime })
+	minDate: Date;
+
+	@au.bindable({ defaultBindingMode: au.bindingMode.oneTime })
+	maxDate: Date;
+
 	labelElement: HTMLLabelElement;
 
 	@au.bindable({ defaultBindingMode: au.bindingMode.twoWay })
 	value: Date;
 	valueChanged() {
 		au.fireEvent(this.element, "change");
 		au.fireEvent(this.element, "blur");
+		if (this.minDate && this.value < this.minDate) {
+			this.value = this.minDate;
+		}
+		if (this.maxDate && this.value > this.maxDate) {
+			this.value = this.maxDate;
+		}
 		this.taskQueue.queueTask(() => au.updateLabel(this.input, this.labelElement));
 	}