Skip to content

Commit

Permalink
fix(style): timepicker hided
Browse files Browse the repository at this point in the history
  • Loading branch information
@fetrarij
fetrarij committed Feb 7, 2019
1 parent 0df69af commit 3ec5798
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 38 deletions.
106 changes: 68 additions & 38 deletions src/daterangepicker/daterangepicker.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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))">
Expand Down
43 changes: 43 additions & 0 deletions src/daterangepicker/daterangepicker.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 3ec5798

Please # to comment.