From 577432a58c6b18dfe0c51747ed20887f36a38206 Mon Sep 17 00:00:00 2001
From: Thomas Plessis <thomas.plessis@insidegroup.fr>
Date: Mon, 15 Jan 2018 15:55:59 +0100
Subject: [PATCH] Add readonly option on input. Allow component to be used in a
 reactive form with an empty date without having an "Invalid date" message and
 with days of the current month.

---
 package-lock.json                              | 2 +-
 src/ng-datepicker/ng-datepicker.component.html | 2 +-
 src/ng-datepicker/ng-datepicker.component.ts   | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 591add3f3..0380aa040 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-datepicker",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/ng-datepicker/ng-datepicker.component.html b/src/ng-datepicker/ng-datepicker.component.html
index 5194deb6d..e86792684 100644
--- a/src/ng-datepicker/ng-datepicker.component.html
+++ b/src/ng-datepicker/ng-datepicker.component.html
@@ -1,5 +1,5 @@
 <div class="ngx-datepicker-container">
-  <input type="text" *ngIf="!headless" class="ngx-datepicker-input" [(ngModel)]="displayValue" readonly (click)="toggle()">
+  <input type="text" *ngIf="!headless" class="ngx-datepicker-input" [(ngModel)]="displayValue" [readonly]="readonly" (click)="toggle()">
   <ng-content></ng-content>
   <div class="ngx-datepicker-calendar-container ngx-datepicker-position-{{position}}" *ngIf="isOpened">
     <div class="topbar-container">
diff --git a/src/ng-datepicker/ng-datepicker.component.ts b/src/ng-datepicker/ng-datepicker.component.ts
index 65b80c16e..84f2efda2 100644
--- a/src/ng-datepicker/ng-datepicker.component.ts
+++ b/src/ng-datepicker/ng-datepicker.component.ts
@@ -28,6 +28,7 @@ export interface DatepickerOptions {
   barTitleFormat?: string; // default: 'MMMM YYYY'
   firstCalendarDay?: number; // 0 = Sunday (default), 1 = Monday, ..
   locale?: object;
+  readonly?: boolean;
   minDate?: Date;
   maxDate?: Date;
 }
@@ -69,6 +70,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
   private positions = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
 
   innerValue: Date;
+  readonly: boolean;
   displayValue: string;
   displayFormat: string;
   date: Date;
@@ -148,6 +150,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
     this.barTitleFormat = this.options && this.options.barTitleFormat || 'MMMM YYYY';
     this.firstCalendarDay = this.options && this.options.firstCalendarDay || 0;
     this.locale = this.options && { locale: this.options.locale } || {};
+    this.readonly = this.options && this.options.readonly || false;
   }
 
   nextMonth(): void {
@@ -199,8 +202,8 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
   }
 
   init(): void {
-    const start = startOfMonth(this.date);
-    const end = endOfMonth(this.date);
+    const start = startOfMonth(this.date || new Date(Date.now()));
+    const end = endOfMonth(this.date || new Date(Date.now()));
 
     this.days = eachDay(start, end).map(date => {
       return {
@@ -266,7 +269,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
       this.date = val;
       this.innerValue = val;
       this.init();
-      this.displayValue = format(this.innerValue, this.displayFormat, this.locale);
+        this.displayValue = this.innerValue ? format(this.innerValue, this.displayFormat, this.locale) : '';
       this.barTitle = format(startOfMonth(val), this.barTitleFormat, this.locale);
     }
   }