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;
+}