Fixed primefaces#1454

Author: Çağatay Çivici

components/calendar/calendar.css

@@ -180,7 +180,8 @@
     min-width: 1.5em;
 }
 
-.ui-timepicker > .ui-minute-picker {
+.ui-timepicker > .ui-minute-picker,
+.ui-timepicker > .ui-second-picker {
     margin-left: 0;
 }
 

components/calendar/calendar.ts

@@ -97,6 +97,24 @@ export interface LocaleSettings {
                             <span class="fa fa-angle-down"></span>
                         </a>
                     </div>
+                    <div class="ui-separator" *ngIf="showSeconds">
+                        <a href="#">
+                            <span class="fa fa-angle-up"></span>
+                        </a>
+                        <span>:</span>
+                        <a href="#">
+                            <span class="fa fa-angle-down"></span>
+                        </a>
+                    </div>
+                    <div class="ui-second-picker" *ngIf="showSeconds">
+                        <a href="#" (click)="incrementSecond($event)">
+                            <span class="fa fa-angle-up"></span>
+                        </a>
+                        <span [ngStyle]="{'display': currentSecond < 10 ? 'inline': 'none'}">0</span><span>{{currentSecond}}</span>
+                        <a href="#" (click)="incrementSecond($event)">
+                            <span class="fa fa-angle-down"></span>
+                        </a>
+                    </div>
                     <div class="ui-ampm-picker" *ngIf="hourFormat=='12'">
                         <a href="#" (click)="toggleAMPM($event)">
                             <span class="fa fa-angle-up"></span>
@@ -177,6 +195,10 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
     @Input() stepHour: number = 1;
 
     @Input() stepMinute: number = 1;
+    
+    @Input() stepSecond: number = 1;
+    
+    @Input() showSeconds: number = 1;
 
     @Input() required: boolean;
 
@@ -217,6 +239,8 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
     currentMinute: number;
 
+    currentSecond: number;
+    
     pm: boolean;
 
     overlay: HTMLDivElement;
@@ -282,6 +306,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         this.currentYear = date.getFullYear();
         if(this.showTime) {
             this.currentMinute = date.getMinutes();
+            this.currentSecond = date.getSeconds();
             this.pm = date.getHours() > 11;
 
             if(this.hourFormat == '12')
@@ -292,6 +317,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         else if(this.timeOnly) {
             this.currentMinute = 0;
             this.currentHour = 0;
+            this.currentSecond = 0;
         }
 
         this.createMonth(this.currentMonth, this.currentYear);
@@ -454,6 +480,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
                 this.value.setHours(this.currentHour);
 
             this.value.setMinutes(this.currentMinute);
+            this.value.setSeconds(this.currentSecond);
         }
         this.updateModel();
         this.onSelect.emit(this.value);
@@ -652,6 +679,24 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         event.preventDefault();
     }
 
+    incrementSecond(event) {
+        let newSecond = this.currentSecond + this.stepSecond;
+        this.currentSecond = (newSecond > 59) ? newSecond - 60 : newSecond;
+            
+        this.updateTime();
+                
+        event.preventDefault();
+    }
+    
+    decrementSecond(event) {
+        let newSecond = this.currentSecond - this.stepSecond;
+        this.currentSecond = (newSecond < 0) ? 60 + newSecond : newSecond;
+            
+        this.updateTime();
+            
+        event.preventDefault();
+    }
+    
     updateTime() {
         this.value = this.value||new Date();
         if(this.hourFormat === '12' && this.pm && this.currentHour != 12)
@@ -660,6 +705,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
             this.value.setHours(this.currentHour);
 
         this.value.setMinutes(this.currentMinute);
+        this.value.setSeconds(this.currentSecond);
         this.updateModel();
         this.onSelect.emit(this.value);
         this.updateInputfield();
@@ -720,6 +766,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         }
 
         value.setMinutes(time.minute);
+        value.setSeconds(time.second);
     }
 
     updateUI() {
@@ -744,6 +791,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
             }
 
             this.currentMinute = val.getMinutes();
+            this.currentSecond = val.getSeconds();
         }
     }
 
@@ -874,6 +922,7 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         let output = '';
         let hours = date.getHours();
         let minutes = date.getMinutes();
+        let seconds = date.getSeconds();
 
         if(this.hourFormat == '12' && this.pm && hours != 12) {
             hours-=12;
@@ -883,6 +932,11 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
         output += ':';
         output += (minutes < 10) ? '0' + minutes : minutes;
 
+        if(this.showSeconds) {
+            output += ':';
+            output += (seconds < 10) ? '0' + seconds : seconds;
+        }
+        
         if(this.hourFormat == '12') {
             output += this.pm ? ' PM' : ' AM';
         }
@@ -892,21 +946,25 @@ export class Calendar implements AfterViewInit,OnInit,OnDestroy,ControlValueAcce
 
     parseTime(value) {
         let tokens: string[] = value.split(':');
-        if(tokens.length !== 2) {
+        let validTokentLength = this.showSeconds ? 3 : 2;
+        
+        if(tokens.length !== validTokentLength) {
             throw "Invalid time";
         }
 
         let h = parseInt(tokens[0]);
         let m = parseInt(tokens[1]);
-        if(isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12)) {
+        let s = this.showSeconds ? parseInt(tokens[2]) : null;
+        
+        if(isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
             throw "Invalid time";
         }
         else {
             if(this.hourFormat == '12' && h !== 12) {
                 h+= 12;
             }
-
-            return {hour: parseInt(tokens[0]), minute: parseInt(tokens[1])};
+            
+            return {hour: h, minute: m, second: s};
         }
     }
 

showcase/demo/calendar/calendardemo.html

@@ -354,6 +354,12 @@ <h3>Attributes</h3>
                             <td>null</td>
                             <td>Index of the element in tabbing order.</td>
                         </tr>
+                        <tr>
+                            <td>showSeconds</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to show the seconds in time picker.</td>
+                        </tr>
                         <tr>
                             <td>stepHour</td>
                             <td>number</td>
@@ -366,6 +372,12 @@ <h3>Attributes</h3>
                             <td>1</td>
                             <td>Minutes to change per step.</td>
                         </tr>
+                        <tr>
+                            <td>stepSecond</td>
+                            <td>number</td>
+                            <td>1</td>
+                            <td>Seconds to change per step.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>