Skip to content

Commit bd42807

Browse files
author
Pradeep Terli
committed
rangepicker beta update
1 parent fa27e0b commit bd42807

File tree

9 files changed

+201
-80
lines changed

9 files changed

+201
-80
lines changed

‎docs/inline.bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.bundle.js

Lines changed: 48 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/angular2-datetimepicker/datepicker.component.html

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div>{{date | date: 'yyyy'}}</div>
1919
</div>
2020
</div>
21-
<div class="wc-time-sec ng-scope" ng-click="toggleTimeView()">
21+
<div class="wc-time-sec ng-scope">
2222
<div *ngIf="settings.timePicker" class="time" (click)="timeView = !timeView">
2323
{{date | date: 'hh'}} : {{date | date: 'mm'}} {{date | date: 'a'}} <span class="fa fa-clock-o"></span>
2424
</div>
@@ -69,6 +69,7 @@
6969
</div>
7070
</div>
7171
<div class="time-view" [hidden]="!timeView">
72+
<i class="fa fa-close time-close" (click)="timeView = false"></i>
7273
<div class="time">
7374
<div class="hour">
7475
<span class="fa fa-plus inc-btn" (click)="incHour()"></span>
@@ -102,6 +103,9 @@
102103
</tr>
103104
</table>
104105
<div class="cal-util">
106+
<div class="clock-icon" *ngIf="!settings.bigBanner">
107+
<i class="fa fa-clock-o" aria-hidden="true" (click)="timeView = !timeView"></i>
108+
</div>
105109
<div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
106110
</div>
107111
</div>
@@ -158,12 +162,12 @@
158162
<div class="dp-left-section">
159163
<div class="wc-details">
160164
<i class="wc-prev fa fa-angle-left" (click)="prevMonth($event)"></i>
161-
<div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{dateRange.startDate | date: 'MMMM'}}
165+
<div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{leftDate | date: 'MMMM'}}
162166
<!-- <i ng-show="!monthsView" class="fa fa-arrow-down"></i>
163167
<i ng-show="monthsView" class="fa fa-arrow-up"></i> -->
164168
</div>
165169
<div class="month-year" *ngIf="!settings.bigBanner" (click)="toggleMonthView()">
166-
{{dateRange.startDate | date: 'MMMM'}}
170+
{{leftDate | date: 'MMMM'}}
167171
<!-- <i ng-show="!monthsView" class="fa fa-arrow-down" (click)="toggleMonthView()"></i>
168172
<i ng-show="monthsView" class="fa fa-arrow-up" (click)="toggleMonthView()"></i> -->
169173

@@ -172,7 +176,7 @@
172176
</div>
173177
<div class="year-title">
174178
<div class="year-dropdown" (click)="generateYearList('current')">
175-
{{dateRange.startDate | date: 'yyyy'}}
179+
{{leftDate | date: 'yyyy'}}
176180
<i *ngIf="!yearView" class="fa fa-angle-down"></i>
177181
<i *ngIf="yearView" class="fa fa-angle-up"></i>
178182
</div>
@@ -232,21 +236,17 @@
232236

233237
</tr>
234238
</table>
235-
<div class="cal-util">
236-
<div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
237-
</div>
238-
</div>
239239
</div>
240240

241241
<div class="dp-right-section">
242242
<div class="wc-details">
243243
<i class="wc-prev fa fa-angle-left" (click)="prevMonth($event)"></i>
244-
<div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{dateRange.endDate | date: 'MMMM'}}
244+
<div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{rightDate | date: 'MMMM'}}
245245
<!-- <i ng-show="!monthsView" class="fa fa-arrow-down"></i>
246246
<i ng-show="monthsView" class="fa fa-arrow-up"></i> -->
247247
</div>
248248
<div class="month-year" *ngIf="!settings.bigBanner" (click)="toggleMonthView()">
249-
{{dateRange.endDate | date: 'MMMM'}}
249+
{{rightDate | date: 'MMMM'}}
250250
<!-- <i ng-show="!monthsView" class="fa fa-arrow-down" (click)="toggleMonthView()"></i>
251251
<i ng-show="monthsView" class="fa fa-arrow-up" (click)="toggleMonthView()"></i> -->
252252

@@ -255,7 +255,7 @@
255255
</div>
256256
<div class="year-title">
257257
<div class="year-dropdown" (click)="generateYearList('current')">
258-
{{date | date: 'yyyy'}}
258+
{{rightDate | date: 'yyyy'}}
259259
<i *ngIf="!yearView" class="fa fa-angle-down"></i>
260260
<i *ngIf="yearView" class="fa fa-angle-up"></i>
261261
</div>
@@ -315,9 +315,13 @@
315315

316316
</tr>
317317
</table>
318-
<div class="cal-util">
319-
<div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
320-
</div>
321-
</div>
318+
</div>
319+
<div class="cal-util">
320+
<ul class="util-list">
321+
<li><a>Last week</a></li>
322+
<li><a (click)="getCurrentWeek()">Current week</a></li>
323+
<li><a>Next week</a></li>
324+
</ul>
325+
<button class="button btn-xs" (click)="done()"><i class="fa fa-check"></i>Done</button>
322326
</div>
323327
</div>

‎src/app/angular2-datetimepicker/datepicker.component.scss

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ body{
200200
margin: 0px auto;
201201
border: 1px solid $base-color;
202202
border-radius: 3px;
203+
cursor: pointer;
203204
}
204205
.button-sm{
205206
width: 50%;
@@ -309,20 +310,20 @@ body{
309310
.cal-util{
310311
width: 100%;
311312
float: left;
312-
cursor: pointer;
313313
position: absolute;
314314
bottom: 0;
315315
background: #fff;
316+
border-top: 1px solid #f2f2f2;
316317
}
317318
.cal-util > .ok{
318319
width: 100%;
319-
padding: 15px;
320-
border-bottom: 1px solid #d1d1d1;
320+
padding: 5px;
321321
float: left;
322322
color: $base-color;
323323
font-size: 18px;
324324
border-top: 1px solid #d1d1d1;
325325
text-align: center;
326+
cursor: pointer;
326327
}
327328
.ok > i{
328329
margin-right: 5px;
@@ -337,6 +338,16 @@ body{
337338
.cal-util > .ok:hover, .cal-util > .cancel:hover{
338339
box-shadow: inset 0px 0px 20px #ccc;
339340
}
341+
.range-date-popover .cal-util{
342+
padding: 10px;
343+
}
344+
.range-date-popover .cal-util .btn-xs{
345+
float: right;
346+
}
347+
.btn-xs {
348+
padding: 5px 10px;
349+
width: auto;
350+
}
340351
.today > span{
341352
border: 1px solid $base-color;
342353
background: none;
@@ -647,6 +658,7 @@ body{
647658
}
648659
.wc-time-sec > .time{
649660
font-size: 0.35em;
661+
cursor: pointer;
650662
}
651663
.time i{
652664
font-size: 10px;
@@ -742,5 +754,33 @@ input[type=number]::-webkit-outer-spin-button {
742754
margin: 0;
743755
}
744756
.range-highlight {
745-
background: #ccc;
746-
}
757+
background: #f2f2f2;
758+
}
759+
.clock-icon {
760+
text-align: center;
761+
color: $base-color;
762+
}
763+
.time-close{
764+
position: absolute;
765+
right: 15px;
766+
top: 15px;
767+
cursor: pointer;
768+
}
769+
.util-list {
770+
list-style: none;
771+
float: left;
772+
padding: 0px;
773+
margin: 0px;
774+
}
775+
.util-list li {
776+
float: left;
777+
padding: 5px;
778+
}
779+
.util-list li a{
780+
color: #007bff;
781+
cursor: pointer;
782+
}
783+
.util-list li a:hover{
784+
color: #14569d;
785+
text-decoration: underline;
786+
}

0 commit comments

Comments
 (0)