From 3ec5798e5cbada223101ba73d2b69aecdd53f501 Mon Sep 17 00:00:00 2001
From: Fetrarijaona R <fetrarij@gmail.com>
Date: Thu, 7 Feb 2019 11:34:09 +0300
Subject: [PATCH 1/3] fix(style): timepicker hided

---
 .../daterangepicker.component.html            | 106 +++++++++++-------
 .../daterangepicker.component.scss            |  43 +++++++
 2 files changed, 111 insertions(+), 38 deletions(-)

diff --git a/src/daterangepicker/daterangepicker.component.html b/src/daterangepicker/daterangepicker.component.html
index c070364f..3252bcc6 100644
--- a/src/daterangepicker/daterangepicker.component.html
+++ b/src/daterangepicker/daterangepicker.component.html
@@ -88,25 +88,39 @@
             </table>
         </div>
         <div class="calendar-time" *ngIf="timePicker">
-            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.hours"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledHours.indexOf(i) > -1">{{i}}</option>
-            </select>
-            <select class="minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.minutes; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.left.minutesLabel[index]}}</option>
-            </select>
-            <select  *ngIf="timePickerSeconds" class="secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option *ngFor="let i of timepickerVariables.left.seconds; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.left.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.left.secondsLabel[index]}}</option>
-            </select>
-            <select *ngIf="!timePicker24Hour" class="ampmselect" [(ngModel)]="timepickerVariables.left.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.left)">
-                <option value="AM" [disabled]="timepickerVariables.left.amDisabled">AM</option>
-                <option value="PM"  [disabled]="timepickerVariables.left.pmDisabled">PM</option>
-            </select>
+            <div class="select">
+                <select class="hourselect select-item" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.hours"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledHours.indexOf(i) > -1">{{i}}</option>
+                </select>
+            </div>
+            <div class="select">
+                <select class="select-item minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.minutes; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.left.minutesLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item secondselect" *ngIf="timePickerSeconds" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option *ngFor="let i of timepickerVariables.left.seconds; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.left.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.left.secondsLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item ampmselect" *ngIf="!timePicker24Hour" [(ngModel)]="timepickerVariables.left.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.left)">
+                    <option value="AM" [disabled]="timepickerVariables.left.amDisabled">AM</option>
+                    <option value="PM"  [disabled]="timepickerVariables.left.pmDisabled">PM</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
         </div>
     </div>
     <div class="calendar right"
@@ -179,25 +193,41 @@
             </table>
         </div>
         <div class="calendar-time" *ngIf="timePicker">
-            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.hours"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledHours.indexOf(i) > -1">{{i}}</option>
-            </select>
-            <select class="minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.minutes; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.right.minutesLabel[index]}}</option>
-            </select>
-            <select *ngIf="timePickerSeconds" class="secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option *ngFor="let i of timepickerVariables.right.seconds; let index = index;"
-                [value]="i"
-                [disabled]="timepickerVariables.right.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.right.secondsLabel[index]}}</option>
-            </select>
-            <select *ngIf="!timePicker24Hour" class="ampmselect" [(ngModel)]="timepickerVariables.right.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.right)">
-                <option value="AM" [disabled]="timepickerVariables.right.amDisabled">AM</option>
-                <option value="PM"  [disabled]="timepickerVariables.right.pmDisabled">PM</option>
-            </select>
+            <div class="select">
+                <select class="select-item hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedHour" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.hours"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledHours.indexOf(i) > -1">{{i}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select class="select-item minuteselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedMinute" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.minutes; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledMinutes.indexOf(i) > -1">{{timepickerVariables.right.minutesLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select *ngIf="timePickerSeconds" class="select-item secondselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedSecond" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option *ngFor="let i of timepickerVariables.right.seconds; let index = index;"
+                    [value]="i"
+                    [disabled]="timepickerVariables.right.disabledSeconds.indexOf(i) > -1">{{timepickerVariables.right.secondsLabel[index]}}</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
+            <div class="select">
+                <select *ngIf="!timePicker24Hour" class="select-item ampmselect" [(ngModel)]="timepickerVariables.right.ampmModel" (ngModelChange)="timeChanged($event, sideEnum.right)">
+                    <option value="AM" [disabled]="timepickerVariables.right.amDisabled">AM</option>
+                    <option value="PM"  [disabled]="timepickerVariables.right.pmDisabled">PM</option>
+                </select>
+                <span class="select-highlight"></span>
+                <span class="select-bar"></span>
+            </div>
         </div>
     </div>
     <div class="buttons" *ngIf="!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))">
diff --git a/src/daterangepicker/daterangepicker.component.scss b/src/daterangepicker/daterangepicker.component.scss
index c63135bd..8a685210 100644
--- a/src/daterangepicker/daterangepicker.component.scss
+++ b/src/daterangepicker/daterangepicker.component.scss
@@ -407,6 +407,49 @@ $input-height: 3rem !default;
     margin: 4px auto 0 auto;
     line-height: 30px;
     position: relative;
+    .select {
+      display: inline;
+      .select-item {
+        display: inline-block;
+        width: auto;
+        position: relative;
+        font-family: inherit;
+        background-color: transparent;
+        padding: 10px 10px 10px 0;
+        font-size: 18px;
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid rgba(0,0,0, 0.12);
+        /* Remove focus */
+        &:after {
+          position: absolute;
+          top: 18px;
+          right: 10px;
+          /* Styling the down arrow */
+          width: 0;
+          height: 0;
+          padding: 0;
+          content: '';
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 6px solid rgba(0, 0, 0, 0.12);
+          pointer-events: none;
+        }
+        &:focus {
+          outline: none;
+        }
+        .select-label {
+          color: rgba(0,0,0, 0.26);
+          font-size: 16px;
+          font-weight: normal;
+          position: absolute;
+          pointer-events: none;
+          left: 0;
+          top: 10px;
+          transition: 0.2s ease all;
+        }
+      }
+    }
   }
   
   .calendar-time select.disabled {

From 8957c67caa15d561098c25dfa2aadfe879554b85 Mon Sep 17 00:00:00 2001
From: Fetrarijaona R <fetrarij@gmail.com>
Date: Thu, 7 Feb 2019 11:47:40 +0300
Subject: [PATCH 2/3] fix(ranges): Timepicker not updated when range clicked
 Close #1015

---
 src/daterangepicker/daterangepicker.component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts
index ab9566ed..8ba9cd20 100644
--- a/src/daterangepicker/daterangepicker.component.ts
+++ b/src/daterangepicker/daterangepicker.component.ts
@@ -908,7 +908,7 @@ export class DaterangepickerComponent implements OnInit {
                 this.calculateChosenLabel();
             }
             this.showCalInRanges = (!this.rangesArray.length) || this.alwaysShowCalendars;
-
+            
             if (!this.timePicker) {
                 this.startDate.startOf('day');
                 this.endDate.endOf('day');
@@ -923,6 +923,10 @@ export class DaterangepickerComponent implements OnInit {
             } else {
                 this.renderCalendar(SideEnum.left);
                 this.renderCalendar(SideEnum.right);
+                if (this.timePicker) {
+                    this.renderTimePicker(SideEnum.left)
+                    this.renderTimePicker(SideEnum.right)
+                }
             }
 
         }

From 2681fc6572c4f40088065ce19242729ef79c3efc Mon Sep 17 00:00:00 2001
From: Fetrarijaona R <fetrarij@gmail.com>
Date: Thu, 7 Feb 2019 11:50:43 +0300
Subject: [PATCH 3/3] v2.0.2

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1ef44b2..31d3f46f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-daterangepicker-material",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index ef29ef32..9492c4cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-daterangepicker-material",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Angular 2+ date range picker (with material design theme)",
   "keywords": [
     "angular2",