rangepicker beta update

Author: Pradeep Terli

docs/inline.bundle.js.map

@@ -18,7 +18,7 @@
  <div>{{date | date: 'yyyy'}}</div>
  </div>
  </div>
- <div class="wc-time-sec ng-scope" ng-click="toggleTimeView()">
+ <div class="wc-time-sec ng-scope">
  <div *ngIf="settings.timePicker" class="time" (click)="timeView = !timeView">
  {{date | date: 'hh'}} : {{date | date: 'mm'}} {{date | date: 'a'}} <span class="fa fa-clock-o"></span>
  </div>
@@ -69,6 +69,7 @@
  </div>
  </div>
  <div class="time-view" [hidden]="!timeView">
+ <i class="fa fa-close time-close" (click)="timeView = false"></i>
  <div class="time">
  <div class="hour">
  <span class="fa fa-plus inc-btn" (click)="incHour()"></span>
@@ -102,6 +103,9 @@
  </tr>
  </table>
  <div class="cal-util">
+ <div class="clock-icon" *ngIf="!settings.bigBanner">
+ <i class="fa fa-clock-o" aria-hidden="true" (click)="timeView = !timeView"></i>
+ </div>
  <div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
  </div>
  </div>
@@ -158,12 +162,12 @@
  <div class="dp-left-section">
  <div class="wc-details">
  <i class="wc-prev fa fa-angle-left" (click)="prevMonth($event)"></i>
- <div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{dateRange.startDate | date: 'MMMM'}}
+ <div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{leftDate | date: 'MMMM'}}
  <!-- <i ng-show="!monthsView" class="fa fa-arrow-down"></i>
  <i ng-show="monthsView" class="fa fa-arrow-up"></i> -->
  </div>
  <div class="month-year" *ngIf="!settings.bigBanner" (click)="toggleMonthView()">
- {{dateRange.startDate | date: 'MMMM'}}
+ {{leftDate | date: 'MMMM'}}
  <!-- <i ng-show="!monthsView" class="fa fa-arrow-down" (click)="toggleMonthView()"></i>
  <i ng-show="monthsView" class="fa fa-arrow-up" (click)="toggleMonthView()"></i> -->
 
@@ -172,7 +176,7 @@
  </div>
  <div class="year-title">
  <div class="year-dropdown" (click)="generateYearList('current')">
- {{dateRange.startDate | date: 'yyyy'}}
+ {{leftDate | date: 'yyyy'}}
  <i *ngIf="!yearView" class="fa fa-angle-down"></i>
  <i *ngIf="yearView" class="fa fa-angle-up"></i>
  </div>
@@ -232,21 +236,17 @@
 
  </tr>
  </table>
- <div class="cal-util">
- <div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
- </div>
- </div>
  </div>
 
  <div class="dp-right-section">
  <div class="wc-details">
  <i class="wc-prev fa fa-angle-left" (click)="prevMonth($event)"></i>
- <div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{dateRange.endDate | date: 'MMMM'}}
+ <div class="month-year" *ngIf="settings.bigBanner" (click)="toggleMonthView()">{{rightDate | date: 'MMMM'}}
  <!-- <i ng-show="!monthsView" class="fa fa-arrow-down"></i>
  <i ng-show="monthsView" class="fa fa-arrow-up"></i> -->
  </div>
  <div class="month-year" *ngIf="!settings.bigBanner" (click)="toggleMonthView()">
- {{dateRange.endDate | date: 'MMMM'}}
+ {{rightDate | date: 'MMMM'}}
  <!-- <i ng-show="!monthsView" class="fa fa-arrow-down" (click)="toggleMonthView()"></i>
  <i ng-show="monthsView" class="fa fa-arrow-up" (click)="toggleMonthView()"></i> -->
 
@@ -255,7 +255,7 @@
  </div>
  <div class="year-title">
  <div class="year-dropdown" (click)="generateYearList('current')">
- {{date | date: 'yyyy'}}
+ {{rightDate | date: 'yyyy'}}
  <i *ngIf="!yearView" class="fa fa-angle-down"></i>
  <i *ngIf="yearView" class="fa fa-angle-up"></i>
  </div>
@@ -315,9 +315,13 @@
 
  </tr>
  </table>
- <div class="cal-util">
- <div class="ok" (click)="done()"><i class="fa fa-check"></i>Done
- </div>
- </div>
+ </div>
+ <div class="cal-util">
+ <ul class="util-list">
+ <li><a>Last week</a></li>
+ <li><a (click)="getCurrentWeek()">Current week</a></li>
+ <li><a>Next week</a></li>
+ </ul>
+ <button class="button btn-xs" (click)="done()"><i class="fa fa-check"></i>Done</button>
  </div>
 </div>

docs/main.bundle.js

@@ -200,6 +200,7 @@ body{
  margin: 0px auto;
  border: 1px solid $base-color;
  border-radius: 3px;
+ cursor: pointer;
 }
 .button-sm{
  width: 50%;
@@ -309,20 +310,20 @@ body{
 .cal-util{
  width: 100%;
  float: left;
- cursor: pointer;
  position: absolute;
  bottom: 0;
  background: #fff;
+ border-top: 1px solid #f2f2f2;
 }
 .cal-util > .ok{
  width: 100%;
- padding: 15px;
- border-bottom: 1px solid #d1d1d1;
+ padding: 5px;
  float: left;
  color: $base-color;
  font-size: 18px;
  border-top: 1px solid #d1d1d1;
  text-align: center;
+ cursor: pointer;
 }
 .ok > i{
  margin-right: 5px;
@@ -337,6 +338,16 @@ body{
 .cal-util > .ok:hover, .cal-util > .cancel:hover{
  box-shadow: inset 0px 0px 20px #ccc;
 }
+.range-date-popover .cal-util{
+ padding: 10px;
+}
+.range-date-popover .cal-util .btn-xs{
+ float: right;
+}
+.btn-xs {
+ padding: 5px 10px;
+ width: auto;
+}
 .today > span{
 border: 1px solid $base-color;
  background: none;
@@ -647,6 +658,7 @@ body{
  }
  .wc-time-sec > .time{
  font-size: 0.35em;
+ cursor: pointer;
  }
  .time i{
  font-size: 10px;
@@ -742,5 +754,33 @@ input[type=number]::-webkit-outer-spin-button {
  margin: 0;
 }
 .range-highlight {
- background: #ccc;
-}
+ background: #f2f2f2;
+}
+.clock-icon {
+ text-align: center;
+ color: $base-color;
+}
+.time-close{
+ position: absolute;
+ right: 15px;
+ top: 15px;
+ cursor: pointer;
+}
+.util-list {
+ list-style: none;
+ float: left;
+ padding: 0px;
+ margin: 0px;
+}
+.util-list li {
+ float: left;
+ padding: 5px;
+}
+.util-list li a{
+ color: #007bff;
+ cursor: pointer;
+}
+.util-list li a:hover{
+ color: #14569d;
+ text-decoration: underline;
+}