feat(timepicker): enabling timepicker

#52
fetrarij · Nov 27, 2018 · 02b4c65 · 02b4c65
1 parent 61f40c5
commit 02b4c65
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 10 deletions.
diff --git a/src/daterangepicker/daterangepicker.component.html b/src/daterangepicker/daterangepicker.component.html
@@ -81,6 +81,27 @@
                 </tbody>
             </table>
         </div>
+        <div class="calendar-time" *ngIf="timePicker">
+            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.left.selectedHour" (ngModelChange)="timeChanged($event, '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, '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, '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, 'left')">
+                <option value="AM" [disabled]="timepickerVariables.left.amDisabled">AM</option>
+                <option value="PM"  [disabled]="timepickerVariables.left.pmDisabled">PM</option>
+            </select>
+        </div>
     </div>
     <div class="calendar right"
         *ngIf="showCalInRanges && !singleDatePicker"
@@ -145,6 +166,27 @@
                 </tbody>
             </table>
         </div>
+        <div class="calendar-time" *ngIf="timePicker">
+            <select class="hourselect" [disabled]="!endDate" [(ngModel)]="timepickerVariables.right.selectedHour" (ngModelChange)="timeChanged($event, '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, '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, '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, 'right')">
+                <option value="AM" [disabled]="timepickerVariables.right.amDisabled">AM</option>
+                <option value="PM"  [disabled]="timepickerVariables.right.pmDisabled">PM</option>
+            </select>
+        </div>
     </div>
     <div class="buttons" *ngIf="!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))">
         <div class="buttons_input">

diff --git a/src/daterangepicker/daterangepicker.component.scss b/src/daterangepicker/daterangepicker.component.scss
@@ -365,6 +365,18 @@ $input-height: 3rem !default;
       margin: 0;
       cursor: default;
     }
+    &.hourselect, 
+    &.minuteselect,
+    &.secondselect,
+    &.ampmselect {
+      width: 50px;
+      margin: 0 auto;
+      background: #eee;
+      border: 1px solid #eee;
+      padding: 2px;
+      outline: 0;
+      font-size: 12px;
+    }
 
     &.monthselect {
       margin-right: 2%;
@@ -375,6 +387,17 @@ $input-height: 3rem !default;
       width: 40%;
     }
   }
+  .calendar-time {
+    text-align: center;
+    margin: 4px auto 0 auto;
+    line-height: 30px;
+    position: relative;
+  }
+
+  .calendar-time select.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+  }
 
   .label-input {
     border: $md-drppicker-control-border-size solid $md-drppicker-control-border-color;