Skip to content

Commit

Permalink
fix issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@BhavinPatel04
BhavinPatel04 committed Sep 30, 2019
1 parent 2014cc2 commit c6f31ed
Show file tree
Hide file tree
Showing 8 changed files with 239 additions and 208 deletions.
2 changes: 1 addition & 1 deletion projects/ngx-datetime-range-picker/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-datetime-range-picker",
"version": "1.1.7",
"version": "1.1.8",
"homepage": "https://github.com/BhavinPatel04/ngx-datetime-range-picker",
"bugs": "https://github.com/BhavinPatel04/ngx-datetime-range-picker/issues",
"repository": {
Expand Down
220 changes: 113 additions & 107 deletions projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</div>
<div *ngIf="state.isCalendarVisible" class="calendar-view">
<div class="date-select">
<div *ngIf="state.customRange" style="position: relative;">
<div style="position: relative;">
<div *ngIf="config.timezoneSupport" class="list-inline timezone-select">
<div class="timeZones">
<div
Expand Down Expand Up @@ -66,118 +66,123 @@
<div *ngIf="!state.calendarAvailable[side]" class="calendar-loading">
<!-- <m-loading></m-loading> -->
</div>
<table
<div
*ngIf="state.calendarAvailable[side]"
style="table-layout: fixed; min-width: 250px; position: relative;"
class="calendar-side-container"
style="min-width: 250px; position: relative;"
>
<thead>
<tr>
<th class="prev">
<mat-icon
[ngClass]="{
disabled: !isPrevAvailable(state.dates[side]['label']),
available: isPrevAvailable(state.dates[side]['label'])
}"
fontSet="fa"
fontIcon="fa-chevron-left"
(click)="onClickPrevious(state.dates[side]['label'], side)"
></mat-icon>
</th>
<th [attr.colspan]="getCalendarColspan()" class="calendar-label">
<div class="date-dropdown-container" style="position: relative;">
<div *ngIf="config.type == 'daily'" class="date-dropdown">
<mat-form-field>
<mat-select
class="month-select"
[value]="state.selectedMonth[side]"
(selectionChange)="onCalendarLabelChange($event.value, side, 'month')"
<div class="calendar-label-container">
<div class="prev">
<mat-icon
[ngClass]="{
disabled: !isPrevAvailable(side),
available: isPrevAvailable(side)
}"
fontSet="fa"
fontIcon="fa-chevron-left"
(click)="onClickPrevious(side)"
></mat-icon>
</div>
<div [attr.colspan]="getCalendarColspan()" class="calendar-label">
<div class="date-dropdown-container" style="position: relative;">
<div *ngIf="config.type == 'daily'" class="date-dropdown">
<mat-form-field>
<mat-select
class="month-select"
panelClass="ngx-datetime-range-picker-select-panel month-select-panel"
[value]="state.selectedMonth[side]"
(selectionChange)="onCalendarLabelChange($event.value, side, 'month')"
>
<mat-option
class="dropdown-item"
*ngFor="let month of state.dates[side]['months']"
[value]="month"
>
<mat-option
class="dropdown-item"
*ngFor="let month of state.dates[side]['months']"
[value]="month"
>
{{ month }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="date-dropdown">
<mat-form-field>
<mat-select
class="year-select"
[value]="state.selectedYear[side]"
(selectionChange)="onCalendarLabelChange($event.value, side, 'year')"
{{ month }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="date-dropdown">
<mat-form-field>
<mat-select
class="year-select"
panelClass="ngx-datetime-range-picker-select-panel year-select-panel"
[value]="state.selectedYear[side]"
(selectionChange)="onCalendarLabelChange($event.value, side, 'year')"
>
<mat-option
class="dropdown-item"
*ngFor="let year of state.dates[side]['years']"
[value]="year"
>
<mat-option
class="dropdown-item"
*ngFor="let year of state.dates[side]['years']"
[value]="year"
>
{{ year }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
{{ year }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</th>
<th class="next">
<mat-icon
[ngClass]="{
disabled: !isNextAvailable(state.dates[side]['label']),
available: isNextAvailable(state.dates[side]['label'])
}"
fontSet="fa"
fontIcon="fa-chevron-right"
(click)="onClickNext(state.dates[side]['label'], side)"
></mat-icon>
</th>
</tr>
<tr>
<th *ngIf="config.showRowNumber" class="rowNumber"></th>
<th *ngIf="!config.showRowNumber" class="rowNumberPlaceholder"></th>
<th *ngFor="let day of state.weekDayOptions" class="calendar-week-day capitalize">{{ day }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of state.dates[side]['itemRows']">
<td *ngIf="config.showRowNumber && row.rowNumberText" class="rowNumber">{{ row.rowNumberText }}</td>
<td *ngIf="!config.showRowNumber" class="rowNumberPlaceholder"></td>
<td
#itemCell
*ngFor="let item of row.items"
[attr.firstDay]="item.firstDay"
[attr.lastDay]="item.lastDay"
</div>
</div>
<div class="next">
<mat-icon
[ngClass]="{
available: item.available,
'in-range': item.inRange,
active:
(state.activeStartDate == item.date && side == 'left') ||
(state.activeEndDate == item.date && side == 'right'),
today: item.today
disabled: !isNextAvailable(side),
available: isNextAvailable(side)
}"
(click)="onCellClick(item, itemCell, side)"
(mouseover)="onCellMouseEnter(item, itemCell)"
(mouseleave)="onCellMouseLeave()"
>
<div>{{ item.rowItemText }}</div>
<div *ngIf="item.today" class="todayDate">
<mat-icon
[ngClass]="{
active:
(state.activeStartDate == item.date && side == 'left') ||
(state.activeEndDate == item.date && side == 'right')
}"
fontSet="fa"
fontIcon="fa-circle"
aria-hidden="true"
>
</mat-icon>
</div>
</td>
</tr>
</tbody>
</table>
fontSet="fa"
fontIcon="fa-chevron-right"
(click)="onClickNext(side)"
></mat-icon>
</div>
</div>
<table>
<thead>
<tr>
<th *ngIf="config.showRowNumber" class="rowNumber"></th>
<th *ngFor="let day of state.weekDayOptions" class="calendar-week-day capitalize">{{ day }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of state.dates[side]['itemRows']">
<td *ngIf="config.showRowNumber && row.rowNumberText" class="rowNumber">
{{ row.rowNumberText }}
</td>
<td
#itemCell
*ngFor="let item of row.items"
[attr.firstDay]="item.firstDay"
[attr.lastDay]="item.lastDay"
[ngClass]="{
available: item.available,
'in-range': item.inRange,
active:
(state.activeStartDate == item.date && side == 'left') ||
(state.activeEndDate == item.date && side == 'right'),
today: item.today
}"
(click)="onCellClick(item, itemCell, side)"
(mouseover)="onCellMouseEnter(item, itemCell)"
(mouseleave)="onCellMouseLeave()"
>
<div>{{ item.rowItemText }}</div>
<div *ngIf="item.today" class="todayDate">
<mat-icon
[ngClass]="{
active:
(state.activeStartDate == item.date && side == 'left') ||
(state.activeEndDate == item.date && side == 'right')
}"
fontSet="fa"
fontIcon="fa-circle"
aria-hidden="true"
>
</mat-icon>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
Expand All @@ -189,7 +194,8 @@
<div *ngFor="let timeItem of state.timeItems" class="d-inline-block time-item-container">
<mat-form-field>
<mat-select
class="year-select"
class="timeItem-select"
panelClass="ngx-datetime-range-picker-select-panel timeItem-select-panel"
[value]="getSelectedTimeItemText(timeItem, side)"
(selectionChange)="onTimeLabelChange(timeItem, side, $event.value)"
>
Expand Down
94 changes: 48 additions & 46 deletions projects/ngx-datetime-range-picker/src/lib/ngx-datetime-range-picker.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,13 @@ $fa-font-path: "~font-awesome/fonts";
}

.calendar-view {
position: absolute;
color: inherit;
width: fit-content;
background-color: #fff;
border-radius: 4px;
padding: 12px 8px;
margin-top: 2px;
z-index: 99999;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.calendar-view:before,
Expand Down Expand Up @@ -286,54 +284,57 @@ $fa-font-path: "~font-awesome/fonts";
}

.calendar-table {
th,
td {
white-space: nowrap;
text-align: center;
min-width: 32px;
padding: 5px;
}
.calendar-side-container {
.calendar-label-container {
display: inline-flex;
width: 100%;
padding: 5px;
}

td {
color: #bbb;
table {
table-layout: fixed;
min-width: 100%;

.todayDate {
font-size: 6px;
}
}
th,
td {
white-space: nowrap;
text-align: center;
min-width: 32px;
padding: 5px;
}

td.valid {
cursor: pointer;
}
td {
color: #bbb;

td.available,
th.available {
cursor: pointer;
color: #333;
}
.todayDate {
font-size: 6px;
}
}

th.available {
width: 32px;
}
td.valid {
cursor: pointer;
}

th.prev {
position: absolute;
left: 0;
}
td.available,
th.available {
cursor: pointer;
color: #333;
}

th.next {
position: absolute;
right: 0;
}
th.available {
width: 32px;
}

td.available:hover,
th.available:hover {
background-color: #eee;
}
td.available:hover,
th.available:hover {
background-color: #eee;
}

td.in-range {
background-color: #f6f6f6;
color: #2f7ed8;
td.in-range {
background-color: #f6f6f6;
color: #2f7ed8;
}
}
}
}

Expand All @@ -349,7 +350,8 @@ $fa-font-path: "~font-awesome/fonts";
}

.month-select,
.year-select {
.year-select,
.timeItem-select {
background: #fff;
padding: 0;
box-shadow: none;
Expand Down
Loading

0 comments on commit c6f31ed

Please sign in to comment.