From ae8e381b203b9e783f8c3de3cb081787827edeb4 Mon Sep 17 00:00:00 2001 From: evdongen Date: Mon, 16 Jan 2017 08:46:54 +0100 Subject: [PATCH 1/3] Work on datepicker fork --- src/datepicker.component.ts | 76 ++++++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 17 deletions(-) diff --git a/src/datepicker.component.ts b/src/datepicker.component.ts index d23ae3c..8c47433 100644 --- a/src/datepicker.component.ts +++ b/src/datepicker.component.ts @@ -1,9 +1,20 @@ import { - animate, Component, ElementRef, EventEmitter, Input, keyframes, OnChanges, - OnInit, Output, Renderer, SimpleChange, state, style, transition, trigger + animate, + Component, + ElementRef, + EventEmitter, + Input, + keyframes, + OnChanges, + OnInit, + Output, + Renderer, + SimpleChange, + style, + transition, + trigger } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; - import { Calendar } from './calendar'; interface DateFormatFunction { @@ -39,7 +50,7 @@ interface ValidationResult { position: relative; display: inline-block; color: #2b2b2b; - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Calibri', 'Roboto'; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Calibri', 'Roboto', sans-serif; } .datepicker__calendar { @@ -286,9 +297,9 @@ interface ValidationResult {
= this.rangeStart.getTime(); + newDateValid = !this.rangeStart || newDate.getTime() >= this.getMonthRangeAsTime(this.rangeStart); } else if (direction === 'right') { - newDateValid = !this.rangeEnd || newDate.getTime() <= this.rangeEnd.getTime(); + newDateValid = !this.rangeEnd || newDate.getTime() <= this.getMonthRangeAsTime(this.rangeEnd); } if (newDateValid) { @@ -563,9 +576,11 @@ export class DatepickerComponent implements OnInit, OnChanges { * Returns the font color for a day */ onSelectDay(day: Date): void { - this.date = day; - this.onSelect.emit(day); - this.showCalendar = !this.showCalendar; + if (this.isInsideRange(day)) { + this.date = day; + this.onSelect.emit(day); + this.showCalendar = !this.showCalendar; + } } /** @@ -692,4 +707,31 @@ export class DatepickerComponent implements OnInit, OnChanges { } return { 'invalidYear': true }; } + + + /** + * Shorthand to validate paging between months + * + * @param rangeDate + * @returns {number} + */ + private getMonthRangeAsTime(rangeDate: Date) { + return new Date(rangeDate.getFullYear(), rangeDate.getMonth()).getTime(); + } + + isInsideRange(day: Date) { + let afterStart = !this.rangeStart || day.getTime() >= this.rangeStart.getTime(); + let beforeEnd = !this.rangeEnd || day.getTime() <= this.rangeEnd.getTime(); + + return afterStart && beforeEnd; + } + + getDayColor(day: Date) { + + if (day && this.isInsideRange(day)) { + return this.isHoveredDay(day) ? this.accentColor : this.getDayFontColor(day); + + } + return this.colors['lightGrey']; + } } From 12898b949191d5f1c5e5b901f89e70c980331909 Mon Sep 17 00:00:00 2001 From: evdongen Date: Mon, 16 Jan 2017 11:57:50 +0100 Subject: [PATCH 2/3] Changes in material-datepicker to fit my needs: * isInsideRange check for dates * Provide a seperator character for the date formatting (- is used in some countries instead of /) * Toggle year input based on @Input parameter * Added purple color --- src/datepicker.component.ts | 55 ++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/src/datepicker.component.ts b/src/datepicker.component.ts index 8c47433..d3c4b51 100644 --- a/src/datepicker.component.ts +++ b/src/datepicker.component.ts @@ -1,18 +1,19 @@ import { - animate, - Component, - ElementRef, - EventEmitter, - Input, - keyframes, - OnChanges, - OnInit, - Output, - Renderer, - SimpleChange, - style, - transition, - trigger + animate, + Component, + ElementRef, + EventEmitter, + Input, + keyframes, + OnChanges, + OnInit, + OnDestroy, + Output, + Renderer, + SimpleChange, + style, + transition, + trigger } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { Calendar } from './calendar'; @@ -175,6 +176,7 @@ interface ValidationResult { width: 11em; margin: 0 1em; text-align: center; + margin-top: 5px; } .datepicker__calendar__nav__header__form { @@ -251,8 +253,8 @@ interface ValidationResult {
- {{ currentMonth }} - {{ currentMonth }} + ` }) -export class DatepickerComponent implements OnInit, OnChanges { +export class DatepickerComponent implements OnInit, OnDestroy, OnChanges { private dateVal: Date; // two way bindings @Output() dateChange = new EventEmitter(); @@ -337,7 +339,8 @@ export class DatepickerComponent implements OnInit, OnChanges { @Input() accentColor: string; @Input() altInputStyle: boolean; @Input() dateFormat: string | DateFormatFunction; - @Input() dateformatSeperator: string = "/"; + // Make sure to pass this as a string: [dateFormatSeperator]="'-'" for instance + @Input() dateformatSeperator: string = '/'; @Input() fontFamily: string; @Input() rangeStart: Date; @Input() rangeEnd: Date; @@ -346,6 +349,7 @@ export class DatepickerComponent implements OnInit, OnChanges { @Input() inputText: string; // view logic @Input() showCalendar: boolean; + @Input() renderYearInput: boolean = true; // events @Output() onSelect = new EventEmitter(); // time @@ -491,6 +495,7 @@ export class DatepickerComponent implements OnInit, OnChanges { // transforms input text into appropriate date format let inputText: string = ''; const dateFormat: string | DateFormatFunction = this.dateFormat; + if (typeof dateFormat === 'string') { switch (dateFormat.toUpperCase()) { case 'YYYY-MM-DD': @@ -708,7 +713,6 @@ export class DatepickerComponent implements OnInit, OnChanges { return { 'invalidYear': true }; } - /** * Shorthand to validate paging between months * @@ -719,6 +723,12 @@ export class DatepickerComponent implements OnInit, OnChanges { return new Date(rangeDate.getFullYear(), rangeDate.getMonth()).getTime(); } + /** + * Check whether the day of the given date is within the configured rangeStart en rangeEnd + * + * @param day + * @returns {boolean} + */ isInsideRange(day: Date) { let afterStart = !this.rangeStart || day.getTime() >= this.rangeStart.getTime(); let beforeEnd = !this.rangeEnd || day.getTime() <= this.rangeEnd.getTime(); @@ -726,6 +736,13 @@ export class DatepickerComponent implements OnInit, OnChanges { return afterStart && beforeEnd; } + /** + * Shorthand to get the day color, using isInsideRange as well to display unavailable dates + * as lightGrey. + * + * @param day + * @returns {string} + */ getDayColor(day: Date) { if (day && this.isInsideRange(day)) { From c1596ef69c7274b89cb7cf47db75429975e696ed Mon Sep 17 00:00:00 2001 From: evdongen Date: Mon, 16 Jan 2017 11:58:36 +0100 Subject: [PATCH 3/3] Changes in material-datepicker to fit my needs - optimize imports was enabled .. --- src/datepicker.component.ts | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/datepicker.component.ts b/src/datepicker.component.ts index d3c4b51..0e3dcb7 100644 --- a/src/datepicker.component.ts +++ b/src/datepicker.component.ts @@ -1,21 +1,9 @@ import { - animate, - Component, - ElementRef, - EventEmitter, - Input, - keyframes, - OnChanges, - OnInit, - OnDestroy, - Output, - Renderer, - SimpleChange, - style, - transition, - trigger + animate, Component, ElementRef, EventEmitter, Input, keyframes, OnChanges, + OnInit, OnDestroy, Output, Renderer, SimpleChange, state, style, transition, trigger } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; + import { Calendar } from './calendar'; interface DateFormatFunction {