Merge branch 'release/1.1.2'

Author: fetrarij

CHANGELOG.md

@@ -1,3 +1,11 @@
+#### 1.1.2 (2018-06-22)
+
+##### Bug Fixes
+
+* **ranges:**  Applied range does not have 'active' class - Fix [#17](https://github.com/fetrarij/ngx-daterangepicker-material/pull/17) ([1c0f03d4](https://github.com/fetrarij/ngx-daterangepicker-material/commit/1c0f03d4bb9e4b66780ee26d635c98249d1ca73d))
+* **autoApply:**  autoApply showing Cancel & Apply buttons - Fix [#16](https://github.com/fetrarij/ngx-daterangepicker-material/pull/16) ([53288f50](https://github.com/fetrarij/ngx-daterangepicker-material/commit/53288f506bbfa276bf8840b34403ed6b17f1eedb))
+* **readme:**  remove showInputs ([672ec99a](https://github.com/fetrarij/ngx-daterangepicker-material/commit/672ec99a106097c59e72923c2c480f9ba92be1c1))
+
 #### 1.1.1 (2018-06-12)
 
 ##### Chores
@@ -6,7 +14,7 @@
 
 ##### New Features
 
-* **#3:**  show 2nd calendar as per maxDate if provided - As, we have provided maxDate, there is no use of showing next month as 2nd calendar as those dates will not be selectable - instead, can it be maxDate's month as second calendar and prev month as first calendar Close [#3](https://github.com/fetrarij/ngx-daterangepicker-material/pull/3) ([daf00119](https://github.com/fetrarij/ngx-daterangepicker-material/commit/daf00119cc6865cb7f3ad7d00307d0cf47b673c0))
+* **#3:**  show 2nd calendar as per maxDate if provided - As, we have provided maxDate, there is no use of showing next month as 2nd calendar as those dates will not be selectable - instead, can it be maxDate's month as second calendar and prev month as first calendar - Fix [#3](https://github.com/fetrarij/ngx-daterangepicker-material/pull/3) ([daf00119](https://github.com/fetrarij/ngx-daterangepicker-material/commit/daf00119cc6865cb7f3ad7d00307d0cf47b673c0))
 * **customisation:**   ability to add custom classes and custom invalid dates function - isCustomDate - isInvalidDate Close [#12](https://github.com/fetrarij/ngx-daterangepicker-material/pull/12) ([145bbf5c](https://github.com/fetrarij/ngx-daterangepicker-material/commit/145bbf5c3401c00545608e9e8286fa58e45e51c4))
 
 ##### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-daterangepicker-material",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Angular 2+ date range picker (with material design theme)",
   "keywords": [
     "angular2",

src/daterangepicker/daterangepicker.component.html

@@ -9,7 +9,7 @@
 }">
     <div class="ranges">
         <ul *ngFor="let range of rangesArray">
-            <li (click)="clickRange($event, range)" [ngClass]="{'active': range === chosenLabel}">{{range}}</li>
+            <li (click)="clickRange($event, range)" [ngClass]="{'active': range === chosenRange}">{{range}}</li>
         </ul>
     </div>
     <div class="calendar" [ngClass]="{right: singleDatePicker, left: !singleDatePicker}"
@@ -138,7 +138,7 @@
             </table>
         </div>
     </div>
-    <div class="buttons" *ngIf="(!autoApply && !rangesArray.length) || (showCalInRanges && !singleDatePicker)">
+    <div class="buttons" *ngIf="!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))">
         <div class="buttons_input">
             <button  *ngIf="showClearButton" class="btn btn-default clear" type="button" (click)="clear()" title="clear the date">
                 <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 -5 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>

src/daterangepicker/daterangepicker.component.ts

@@ -3,12 +3,6 @@ import { FormControl} from '@angular/forms';
 
 import * as _moment from 'moment'; const moment = _moment;
 
-interface Hour {
-    hour: string;
-    minute: string;
-    second: string;
-    ampm: string;
-}
 export enum SideEnum {
     left = 'left',
     right = 'right'
@@ -23,18 +17,11 @@ export enum SideEnum {
 },
 })
 export class DaterangepickerComponent implements OnInit {
-    chosenLabel;
-    oldStartDate;
-    oldEndDate;
+    private _old: {start: any, end: any} = {start: null, end: null};
+    chosenLabel: string;
     calendarVariables: {left: any, right: any} = {left: {}, right: {}};
     daterangepicker: {start: FormControl, end: FormControl} = {start: new FormControl(), end: new FormControl()};
-    disabled: {} = {};
-    daterangepickerEnd: {active?: boolean, model?: any, control: FormControl, focus?: boolean} =
-        {active: false, model: undefined, control: new FormControl(), focus: false};
-    daterangepickerStart: {active?: boolean, model?: any, control: FormControl, focus?: boolean} =
-        {active: false, model: undefined, control: new FormControl(), focus: false};
     applyBtn: {disabled: boolean} = {disabled: false};
-
     startDate = moment().startOf('day');
     endDate = moment().endOf('day');
     minDate: _moment.Moment = null;
@@ -70,6 +57,7 @@ export class DaterangepickerComponent implements OnInit {
     rightCalendar: any = {};
     // custom ranges
     ranges: any = {};
+    chosenRange: string;
     showCustomRangeLabel: boolean;
     rangesArray: Array<any> = [];
     // states
@@ -420,16 +408,8 @@ export class DaterangepickerComponent implements OnInit {
     }
 
     updateView() {
-        if (this.endDate) {
-            this.daterangepickerStart.active = true;
-            this.daterangepickerEnd.active = false;
-        } else {
-            this.daterangepickerStart.active = false;
-            this.daterangepickerEnd.active = true;
-        }
         this.updateMonthsInView();
         this.updateCalendars();
-        this.updateFormInputs();
     }
 
     updateMonthsInView() {
@@ -504,8 +484,8 @@ export class DaterangepickerComponent implements OnInit {
     }
 
     clickCancel(e) {
-        this.startDate = this.oldStartDate;
-        this.endDate = this.oldEndDate;
+        this.startDate = this._old.start;
+        this.endDate = this._old.end;
         this.hide();
     }
     /**
@@ -613,6 +593,9 @@ export class DaterangepickerComponent implements OnInit {
         if (!e.target.classList.contains('available')) {
             return;
         }
+        if (this.rangesArray.length) {
+            this.chosenRange = this.locale.customRangeLabel;
+        }
 
         let date = side ===  SideEnum.left ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
 
@@ -650,7 +633,7 @@ export class DaterangepickerComponent implements OnInit {
      * @param label
      */
     clickRange(e, label) {
-        this.chosenLabel = label;
+        this.chosenRange = label;
         if (label == this.locale.customRangeLabel) {
             this.isShown  = true; // show calendars
             this.showCalInRanges = true;
@@ -672,33 +655,13 @@ export class DaterangepickerComponent implements OnInit {
             this.clickApply();
         }
     };
-    /**
-     *  Update the input after applying 
-     */
-    updateFormInputs() {
-        // ignore mouse movements while an above-calendar text input has focus
-        if (this.daterangepickerEnd.focus || this.daterangepickerStart.focus) {
-            return;
-        }
-
-        this.daterangepickerStart.model = this.startDate.format(this.locale.format);
-        if (this.endDate) {
-            this.daterangepickerEnd.model = this.endDate.format(this.locale.format);
-        }
 
-        if (this.singleDatePicker || (this.endDate && (this.startDate.isBefore(this.endDate) || this.startDate.isSame(this.endDate)))) {
-            this.applyBtn.disabled = false;
-        } else {
-            this.applyBtn.disabled = true;
-        }
-
-    }
 
 
     show(e?) {
         if (this.isShown) { return; }
-        this.oldStartDate = this.startDate.clone();
-        this.oldEndDate = this.endDate.clone();
+        this._old.start = this.startDate.clone();
+        this._old.end = this.endDate.clone();
         this.isShown = true;
         this.updateView();
     }
@@ -709,16 +672,16 @@ export class DaterangepickerComponent implements OnInit {
         }
         // incomplete date selection, revert to last values
         if (!this.endDate) {
-            if (this.oldStartDate) {
-                this.startDate = this.oldStartDate.clone();
+            if (this._old.start) {
+                this.startDate = this._old.start.clone();
             }
-            if (this.oldEndDate) {
-                this.endDate = this.oldEndDate.clone();
+            if (this._old.end) {
+                this.endDate = this._old.end.clone();
             }
         }
 
         // if a new date range was selected, invoke the user callback function
-        if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) {
+        if (!this.startDate.isSame(this._old.start) || !this.endDate.isSame(this._old.end)) {
            // this.callback(this.startDate, this.endDate, this.chosenLabel);
         }