Skip to content

Commit

Permalink
Merge branch 'release/2.0.2'
Browse files Browse the repository at this point in the history
  • Loading branch information
@fetrarij
fetrarij committed Feb 7, 2019
2 parents 0df69af + 2681fc6 commit 58b9730
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 41 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
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
6 changes: 5 additions & 1 deletion src/daterangepicker/daterangepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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)
}
}

}
Expand Down

0 comments on commit 58b9730

Please sign in to comment.