Skip to content

Commit

Permalink
fix(igx-date-range-picker): remove sample wrappers #1574
Browse files Browse the repository at this point in the history
  • Loading branch information
Lipata committed May 20, 2020
1 parent e4ddff8 commit 310f456
Show file tree
Hide file tree
Showing 12 changed files with 105 additions and 109 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="date-range-picker-wrapper">
<igx-date-range-picker [(ngModel)]="range">
<label igxLabel>Flight dates</label>
</igx-date-range-picker>
</div>

<igx-date-range-picker [(ngModel)]="range">
<label igxLabel>Flight dates</label>
</igx-date-range-picker>

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.date-range-picker-wrapper {
:host {
display: block;
padding: 1rem;
max-width: 600px;
}
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<div class="date-range-picker-wrapper">
<form>
<div class="towns">
<igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
<igx-prefix>
<igx-icon>flight_takeoff</igx-icon>
</igx-prefix>
<igx-select-item *ngFor="let town of towns" [value]="town">
{{town}}
</igx-select-item>
</igx-select>
<igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
<igx-prefix>
<igx-icon>flight_land</igx-icon>
</igx-prefix>
<igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
{{town}}
</igx-select-item>
</igx-select>
</div>

<igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
[(ngModel)]="range"
[minValue]="minDate"
[maxValue]="maxDate"
[placeholder]="'Depart on - Return on'"
>
<label igxLabel>Flight dates</label>
<igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
Please choose start and end date!
</igx-hint>
</igx-date-range-picker>
</form>
</div>
<form>
<div class="towns">
<igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
<igx-prefix>
<igx-icon>flight_takeoff</igx-icon>
</igx-prefix>
<igx-select-item *ngFor="let town of towns" [value]="town">
{{town}}
</igx-select-item>
</igx-select>
<igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
<igx-prefix>
<igx-icon>flight_land</igx-icon>
</igx-prefix>
<igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
{{town}}
</igx-select-item>
</igx-select>
</div>

<igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
[(ngModel)]="range"
[minValue]="minDate"
[maxValue]="maxDate"
[placeholder]="'Depart on - Return on'"
>
<label igxLabel>Flight dates</label>
<igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
Please choose start and end date!
</igx-hint>
</igx-date-range-picker>
</form>

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.date-range-picker-wrapper {
:host {
display: block;
padding: 1rem;
max-width: 700px;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
<div class="date-range-picker-wrapper">
<igx-date-range-picker value="range" [mode]="'dropdown'"></igx-date-range-picker>
</div>
<igx-date-range-picker value="range" [mode]="'dropdown'"></igx-date-range-picker>
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.date-range-picker-wrapper {
:host {
display: block;
padding: 1rem;
max-width: 600px;
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<div class="date-range-picker-wrapper">
<igx-date-range-picker [(ngModel)]="range">
<igx-date-range-start>
<input igxInput igxDateTimeEditor type="text">
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
</igx-date-range-start>
<igx-date-range-end>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>
</div>
<igx-date-range-picker [(ngModel)]="range">
<igx-date-range-start>
<input igxInput igxDateTimeEditor type="text">
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
</igx-date-range-start>
<igx-date-range-end>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.date-range-picker-wrapper {
:host {
display: block;
padding: 1rem;
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<div class="date-range-picker-wrapper">
<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
<igx-date-range-start>
<input igxInput igxDateTimeEditor type="text">
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
</igx-date-range-start>
<igx-date-range-end>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>
</div>
<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
<igx-date-range-start>
<input igxInput igxDateTimeEditor type="text">
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
</igx-date-range-start>
<igx-date-range-end>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ $custom-calendar-theme: igx-calendar-theme(
}
}

.date-range-picker-wrapper {
:host {
display: block;
padding: 1rem;
}
Original file line number Diff line number Diff line change
@@ -1,37 +1,32 @@
<div class="date-range-picker-wrapper">
<igx-date-range-picker [(ngModel)]="rangeSingle" required>
<label igxLabel>Period</label>
</igx-date-range-picker>
</div>

<div class="date-range-picker-wrapper">
<igx-date-range-picker [(ngModel)]="rangeSeparate" required>
<igx-date-range-start>
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
<label igxLabel>Start Date</label>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-start>
<igx-date-range-end>
<label igxLabel>End Date</label>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>
</div>
<igx-date-range-picker [(ngModel)]="rangeSingle" required>
<label igxLabel>Period</label>
</igx-date-range-picker>

<div class="date-range-picker-wrapper">
<igx-date-range-picker>
<igx-date-range-start>
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
<label igxLabel>Start Date</label>
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
</igx-date-range-start>
<igx-date-range-end>
<label igxLabel>End Date</label>
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
</igx-date-range-end>
</igx-date-range-picker>
</div>
<igx-date-range-picker [(ngModel)]="rangeSeparate" required>
<igx-date-range-start>
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
<label igxLabel>Start Date</label>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-start>
<igx-date-range-end>
<label igxLabel>End Date</label>
<input igxInput igxDateTimeEditor type="text">
</igx-date-range-end>
</igx-date-range-picker>

<igx-date-range-picker>
<igx-date-range-start>
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_today</igx-icon>
</igx-picker-toggle>
<label igxLabel>Start Date</label>
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
</igx-date-range-start>
<igx-date-range-end>
<label igxLabel>End Date</label>
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
</igx-date-range-end>
</igx-date-range-picker>
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.date-range-picker-wrapper {
padding: 1rem;
:host {
igx-date-range-picker {
padding: 1rem;
}
}

0 comments on commit 310f456

Please sign in to comment.