Some changes for limiting date range and date seperator

src/datepicker.component.ts

@@ -1,6 +1,6 @@
 import {
   animate, Component, ElementRef, EventEmitter, Input, keyframes, OnChanges,
-  OnInit, Output, Renderer, SimpleChange, state, style, transition, trigger
+  OnInit, OnDestroy, Output, Renderer, SimpleChange, state, style, transition, trigger
 } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
@@ -39,7 +39,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 {
@@ -164,6 +164,7 @@ interface ValidationResult {
         width: 11em;
         margin: 0 1em;
         text-align: center;
+        margin-top: 5px;
       }
 
       .datepicker__calendar__nav__header__form {
@@ -240,8 +241,8 @@ interface ValidationResult {
           </svg>
           </div>
           <div class="datepicker__calendar__nav__header">
-            <span>{{ currentMonth }}</span>
-            <input
+            <span>{{ currentMonth }} <template [ngIf]="!renderYearInput">{{currentYear}}</template></span>
+            <input *ngIf="renderYearInput"
               #yearInput
               class="datepicker__calendar__nav__header__year"
               placeholder="Year"
@@ -286,9 +287,9 @@ interface ValidationResult {
             <div
               *ngFor="let day of calendarDays"
               class="datepicker__calendar__month__day"
-              [ngStyle]="{'cursor': day == 0 ? 'initial' : 'pointer',
+              [ngStyle]="{'cursor': day == 0 || !isInsideRange(day) ? 'initial' : 'pointer',
                           'background-color': getDayBackgroundColor(day),
-                          'color': isHoveredDay(day) ? accentColor : getDayFontColor(day),
+                          'color': getDayColor(day),
                           'pointer-events': day == 0 ? 'none' : ''
                           }"
               (click)="onSelectDay(day)"
@@ -311,7 +312,7 @@ interface ValidationResult {
     </div>
     `
 })
-export class DatepickerComponent implements OnInit, OnChanges {
+export class DatepickerComponent implements OnInit, OnDestroy, OnChanges {
   private dateVal: Date;
   // two way bindings
   @Output() dateChange = new EventEmitter<Date>();
@@ -326,6 +327,8 @@ export class DatepickerComponent implements OnInit, OnChanges {
   @Input() accentColor: string;
   @Input() altInputStyle: boolean;
   @Input() dateFormat: string | DateFormatFunction;
+  // Make sure to pass this as a string: [dateFormatSeperator]="'-'" for instance
+  @Input() dateformatSeperator: string = '/';
   @Input() fontFamily: string;
   @Input() rangeStart: Date;
   @Input() rangeEnd: Date;
@@ -334,6 +337,7 @@ export class DatepickerComponent implements OnInit, OnChanges {
   @Input() inputText: string;
   // view logic
   @Input() showCalendar: boolean;
+  @Input() renderYearInput: boolean = true;
   // events
   @Output() onSelect = new EventEmitter<Date>();
   // time
@@ -363,10 +367,11 @@ export class DatepickerComponent implements OnInit, OnChanges {
     this.colors = {
       'black': '#333333',
       'blue': '#1285bf',
+      'purple': '#461d53',
       'lightGrey': '#f1f1f1',
       'white': '#ffffff'
     };
-    this.accentColor = this.colors['blue'];
+    this.accentColor = this.colors['purple'];
     this.altInputStyle = false;
     // time
     this.calendar = new Calendar();
@@ -475,22 +480,23 @@ export class DatepickerComponent implements OnInit, OnChanges {
     if (day.length < 2) {
       day = `0${day}`;
     }
-    // transforms input text into appropiate date format
+    // 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':
-          inputText = `${date.getFullYear()}/${month}/${day}`;
+          inputText = `${date.getFullYear()}${this.dateformatSeperator}${month}${this.dateformatSeperator}${day}`;
           break;
         case 'MM-DD-YYYY':
-          inputText = `${month}/${day}/${date.getFullYear()}`;
+          inputText = `${month}${this.dateformatSeperator}${day}${this.dateformatSeperator}${date.getFullYear()}`;
           break;
         case 'DD-MM-YYYY':
-          inputText = `${day}/${month}/${date.getFullYear()}`;
+          inputText = `${day}${this.dateformatSeperator}${month}${this.dateformatSeperator}${date.getFullYear()}`;
           break;
         default:
-          inputText = `${date.getFullYear()}/${month}/${day}`;
+          inputText = `${date.getFullYear()}${this.dateformatSeperator}${month}${this.dateformatSeperator}${day}`;
           break;
       }
     } else if (typeof dateFormat === 'function') {
@@ -532,9 +538,9 @@ export class DatepickerComponent implements OnInit, OnChanges {
     let newDate = new Date(newYear, newMonth);
     let newDateValid: boolean;
     if (direction === 'left') {
-      newDateValid = !this.rangeStart || newDate.getTime() >= 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 +569,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 +700,43 @@ 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();
+  }
+
+  /**
+   * 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();
+
+    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)) {
+      return this.isHoveredDay(day) ? this.accentColor : this.getDayFontColor(day);
+
+    }
+    return this.colors['lightGrey'];
+  }
 }