primeng 7.1.0-rc.1 → 7.1.3

package/components/calendar/calendar.d.ts

@@ -12,6 +12,7 @@ export interface LocaleSettings {
     today: string;
     clear: string;
     dateFormat?: string;
+    weekHeader?: string;
 }
 export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
     el: ElementRef;
@@ -37,7 +38,6 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     shortYearCutoff: any;
     monthNavigator: boolean;
     yearNavigator: boolean;
-    yearRange: string;
     hourFormat: string;
     timeOnly: boolean;
     stepHour: number;
@@ -46,6 +46,7 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     showSeconds: boolean;
     required: boolean;
     showOnFocus: boolean;
+    showWeek: boolean;
     dataType: string;
     selectionMode: string;
     maxDateCount: number;
@@ -94,7 +95,6 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     maskClickListener: Function;
     overlay: HTMLDivElement;
     overlayVisible: boolean;
-    datepickerClick: boolean;
     onModelChange: Function;
     onModelTouched: Function;
     calendarElement: any;
@@ -109,6 +109,7 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     _minDate: Date;
     _maxDate: Date;
     _showTime: boolean;
+    _yearRange: string;
     preventDocumentListener: boolean;
     dateTemplate: TemplateRef<any>;
     _disabledDates: Array<Date>;
@@ -121,6 +122,7 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     maxDate: Date;
     disabledDates: Date[];
     disabledDays: number[];
+    yearRange: string;
     showTime: boolean;
     locale: LocaleSettings;
     constructor(el: ElementRef, renderer: Renderer2, cd: ChangeDetectorRef);
@@ -130,10 +132,12 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     createWeekDays(): void;
     createMonthPickerValues(): void;
     createMonths(month: number, year: number): void;
+    getWeekNumber(date: Date): number;
     createMonth(month: number, year: number): {
         month: number;
         year: number;
         dates: any[];
+        weekNumbers: any[];
     };
     initTime(date: Date): void;
     navBackward(event: any): void;
@@ -193,14 +197,15 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     updateTime(): void;
     toggleAMPM(event: any): void;
     onUserInput(event: any): void;
-    parseValueFromString(text: string): Date;
+    isValidSelection(value: any): boolean;
+    parseValueFromString(text: string): Date | Date[];
     parseDateTime(text: any): Date;
     populateTime(value: any, timeString: any, ampm: any): void;
     updateUI(): void;
-    onDatePickerClick(event: any): void;
     showOverlay(): void;
     hideOverlay(): void;
     onOverlayAnimationStart(event: AnimationEvent): void;
+    onOverlayAnimationDone(event: AnimationEvent): void;
     appendOverlay(): void;
     restoreOverlayAppend(): void;
     alignOverlay(): void;
@@ -228,6 +233,8 @@ export declare class Calendar implements OnInit, OnDestroy, ControlValueAccessor
     unbindDocumentClickListener(): void;
     bindDocumentResizeListener(): void;
     unbindDocumentResizeListener(): void;
+    isOutsideClicked(event: Event): boolean;
+    isNavIconClicked(event: Event): boolean;
     onWindowResize(): void;
     onOverlayHide(): void;
     ngOnDestroy(): void;

package/components/calendar/calendar.js

@@ -37,6 +37,7 @@ var Calendar = /** @class */ (function () {
         this.stepSecond = 1;
         this.showSeconds = false;
         this.showOnFocus = true;
+        this.showWeek = false;
         this.dataType = 'date';
         this.selectionMode = 'single';
         this.todayButtonStyleClass = 'ui-button-secondary';
@@ -68,7 +69,8 @@ var Calendar = /** @class */ (function () {
             monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
             today: 'Today',
             clear: 'Clear',
-            dateFormat: 'mm/dd/yy'
+            dateFormat: 'mm/dd/yy',
+            weekHeader: 'Wk'
         };
         this.onModelChange = function () { };
         this.onModelTouched = function () { };
@@ -137,6 +139,21 @@ var Calendar = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Calendar.prototype, "yearRange", {
+        get: function () {
+            return this._yearRange;
+        },
+        set: function (yearRange) {
+            if (this.yearNavigator && yearRange) {
+                var years = yearRange.split(':');
+                var yearStart = parseInt(years[0]);
+                var yearEnd = parseInt(years[1]);
+                this.populateYearOptions(yearStart, yearEnd);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Calendar.prototype, "showTime", {
         get: function () {
             return this._showTime;
@@ -172,12 +189,6 @@ var Calendar = /** @class */ (function () {
         var date = this.defaultDate || new Date();
         this.currentMonth = date.getMonth();
         this.currentYear = date.getFullYear();
-        if (this.yearNavigator && this.yearRange) {
-            var years = this.yearRange.split(':');
-            var yearStart = parseInt(years[0]);
-            var yearEnd = parseInt(years[1]);
-            this.populateYearOptions(yearStart, yearEnd);
-        }
         if (this.view === 'date') {
             this.createWeekDays();
             this.initTime(date);
@@ -233,14 +244,22 @@ var Calendar = /** @class */ (function () {
             this.months.push(this.createMonth(m, y));
         }
     };
+    Calendar.prototype.getWeekNumber = function (date) {
+        var checkDate = new Date(date.getTime());
+        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+        var time = checkDate.getTime();
+        checkDate.setMonth(0);
+        checkDate.setDate(1);
+        return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+    };
     Calendar.prototype.createMonth = function (month, year) {
         var dates = [];
         var firstDay = this.getFirstDayOfMonthIndex(month, year);
         var daysLength = this.getDaysCountInMonth(month, year);
         var prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
-        var sundayIndex = this.getSundayIndex();
         var dayNo = 1;
         var today = new Date();
+        var weekNumbers = [];
         for (var i = 0; i < 6; i++) {
             var week = [];
             if (i == 0) {
@@ -271,12 +290,16 @@ var Calendar = /** @class */ (function () {
                     dayNo++;
                 }
             }
+            if (this.showWeek) {
+                weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
+            }
             dates.push(week);
         }
         return {
             month: month,
             year: year,
-            dates: dates
+            dates: dates,
+            weekNumbers: weekNumbers
         };
     };
     Calendar.prototype.initTime = function (date) {
@@ -314,7 +337,6 @@ var Calendar = /** @class */ (function () {
             this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
             this.createMonths(this.currentMonth, this.currentYear);
         }
-        event.preventDefault();
     };
     Calendar.prototype.navForward = function (event) {
         if (this.disabled) {
@@ -335,7 +357,6 @@ var Calendar = /** @class */ (function () {
             this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
             this.createMonths(this.currentMonth, this.currentYear);
         }
-        event.preventDefault();
     };
     Calendar.prototype.decrementYear = function () {
         this.currentYear--;
@@ -391,7 +412,7 @@ var Calendar = /** @class */ (function () {
     };
     Calendar.prototype.shouldSelectDate = function (dateMeta) {
         if (this.isMultipleSelection())
-            return !this.maxDateCount || !this.value || this.maxDateCount > this.value.length;
+            return this.maxDateCount != null ? this.maxDateCount > (this.value ? this.value.length : 0) : true;
         else
             return true;
     };
@@ -682,7 +703,6 @@ var Calendar = /** @class */ (function () {
         this.onFocus.emit(event);
     };
     Calendar.prototype.onInputClick = function (event) {
-        this.datepickerClick = true;
         if (this.overlay && this.autoZIndex) {
             this.overlay.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
         }
@@ -706,7 +726,6 @@ var Calendar = /** @class */ (function () {
         else {
             this.hideOverlay();
         }
-        this.datepickerClick = true;
     };
     Calendar.prototype.onInputKeydown = function (event) {
         this.isKeydown = true;
@@ -951,18 +970,32 @@ var Calendar = /** @class */ (function () {
         var val = event.target.value;
         try {
             var value = this.parseValueFromString(val);
-            if (this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
+            if (this.isValidSelection(value)) {
                 this.updateModel(value);
                 this.updateUI();
             }
         }
         catch (err) {
             //invalid date
-            this.updateModel(null);
         }
         this.filled = val != null && val.length;
         this.onInput.emit(event);
     };
+    Calendar.prototype.isValidSelection = function (value) {
+        var _this = this;
+        var isValid = true;
+        if (this.isSingleSelection()) {
+            if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
+                isValid = false;
+            }
+        }
+        else if (value.every(function (v) { return _this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false); })) {
+            if (this.isRangeSelection()) {
+                isValid = value.length > 1 && value[1] > value[0] ? true : false;
+            }
+        }
+        return isValid;
+    };
     Calendar.prototype.parseValueFromString = function (text) {
         if (!text || text.trim().length === 0) {
             return null;
@@ -1043,12 +1076,11 @@ var Calendar = /** @class */ (function () {
             this.currentSecond = val.getSeconds();
         }
     };
-    Calendar.prototype.onDatePickerClick = function (event) {
-        this.datepickerClick = true;
-    };
     Calendar.prototype.showOverlay = function () {
-        this.updateUI();
-        this.overlayVisible = true;
+        if (!this.overlayVisible) {
+            this.updateUI();
+            this.overlayVisible = true;
+        }
     };
     Calendar.prototype.hideOverlay = function () {
         this.overlayVisible = false;
@@ -1067,8 +1099,6 @@ var Calendar = /** @class */ (function () {
                         this.overlay.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
                     }
                     this.alignOverlay();
-                    this.bindDocumentClickListener();
-                    this.bindDocumentResizeListener();
                 }
                 break;
             case 'void':
@@ -1077,6 +1107,17 @@ var Calendar = /** @class */ (function () {
                 break;
         }
     };
+    Calendar.prototype.onOverlayAnimationDone = function (event) {
+        switch (event.toState) {
+            case 'visible':
+            case 'visibleTouchUI':
+                if (!this.inline) {
+                    this.bindDocumentClickListener();
+                    this.bindDocumentResizeListener();
+                }
+                break;
+        }
+    };
     Calendar.prototype.appendOverlay = function () {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -1452,10 +1493,9 @@ var Calendar = /** @class */ (function () {
         var _this = this;
         if (!this.documentClickListener) {
             this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
-                if (!_this.datepickerClick && _this.overlayVisible) {
+                if (_this.isOutsideClicked(event) && _this.overlayVisible) {
                     _this.hideOverlay();
                 }
-                _this.datepickerClick = false;
                 _this.cd.detectChanges();
             });
         }
@@ -1478,8 +1518,16 @@ var Calendar = /** @class */ (function () {
             this.documentResizeListener = null;
         }
     };
+    Calendar.prototype.isOutsideClicked = function (event) {
+        return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) ||
+            this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+    };
+    Calendar.prototype.isNavIconClicked = function (event) {
+        return (domhandler_1.DomHandler.hasClass(event.target, 'ui-datepicker-prev') || domhandler_1.DomHandler.hasClass(event.target, 'ui-datepicker-prev-icon')
+            || domhandler_1.DomHandler.hasClass(event.target, 'ui-datepicker-next') || domhandler_1.DomHandler.hasClass(event.target, 'ui-datepicker-next-icon'));
+    };
     Calendar.prototype.onWindowResize = function () {
-        if (this.overlayVisible) {
+        if (this.overlayVisible && !domhandler_1.DomHandler.isAndroid()) {
             this.hideOverlay();
         }
     };
@@ -1573,10 +1621,6 @@ var Calendar = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Boolean)
     ], Calendar.prototype, "yearNavigator", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", String)
-    ], Calendar.prototype, "yearRange", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", String)
@@ -1609,6 +1653,10 @@ var Calendar = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Boolean)
     ], Calendar.prototype, "showOnFocus", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Boolean)
+    ], Calendar.prototype, "showWeek", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", String)
@@ -1754,6 +1802,11 @@ var Calendar = /** @class */ (function () {
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [Array])
     ], Calendar.prototype, "disabledDays", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], Calendar.prototype, "yearRange", null);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Boolean),
@@ -1767,7 +1820,7 @@ var Calendar = /** @class */ (function () {
     Calendar = __decorate([
         core_1.Component({
             selector: 'p-calendar',
-            template: "\n        <span [ngClass]=\"{'ui-calendar':true, 'ui-calendar-w-btn': showIcon, 'ui-calendar-timeonly': timeOnly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick($event)\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\"\n                    [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all'\" autocomplete=\"off\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"ui-datepicker-trigger ui-calendar-button\"\n                    [ngClass]=\"{'ui-state-disabled':disabled}\" [disabled]=\"disabled\" tabindex=\"-1\"></button>\n            </ng-template>\n            <div [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all': true, 'ui-datepicker-inline':inline,'ui-shadow':!inline,\n                'ui-state-disabled':disabled,'ui-datepicker-timeonly':timeOnly,'ui-datepicker-multiple-month': this.numberOfMonths > 1, 'ui-datepicker-monthpicker': (view === 'month'), 'ui-datepicker-touch-ui': touchUI}\"\n                (click)=\"onDatePickerClick($event)\" [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}: \n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" \n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"ui-datepicker-group ui-widget-content\" *ngFor=\"let month of months; let i = index;\">\n                        <div class=\"ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all\">\n                            <ng-content select=\"p-header\"></ng-content>\n                            <a class=\"ui-datepicker-prev ui-corner-all\" tabindex=\"0\" (click)=\"navBackward($event)\" *ngIf=\"i === 0\">\n                                <span class=\"pi pi-chevron-left\"></span>\n                            </a>\n                            <a class=\"ui-datepicker-next ui-corner-all\" tabindex=\"0\" (click)=\"navForward($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\">\n                                <span class=\"pi pi-chevron-right\"></span>\n                            </a>\n                            <div class=\"ui-datepicker-title\">\n                                <span class=\"ui-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{locale.monthNames[month.month]}}</span>\n                                <select class=\"ui-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                    <option [value]=\"i\" *ngFor=\"let monthName of locale.monthNames;let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                </select>\n                                <select class=\"ui-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                    <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                </select>\n                                <span class=\"ui-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                            </div>\n                        </div>\n                        <div class=\"ui-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                            <table class=\"ui-datepicker-calendar\">\n                                <thead>\n                                    <tr>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                            <span>{{weekDay}}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates\">\n                                        <td *ngFor=\"let date of week\" [ngClass]=\"{'ui-datepicker-other-month': date.otherMonth,\n                                            'ui-datepicker-current-day':isSelected(date),'ui-datepicker-today':date.today}\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <a class=\"ui-state-default\" *ngIf=\"date.selectable\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\"\n                                                    (click)=\"onDateSelect($event,date)\" draggable=\"false\">\n                                                    <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                </a>\n                                                <span class=\"ui-state-default ui-state-disabled\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\" *ngIf=\"!date.selectable\">\n                                                    {{date.day}}\n                                                </span>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                    <div class=\"ui-monthpicker\" *ngIf=\"view === 'month'\">\n                        <a tabindex=\"0\" *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" class=\"ui-monthpicker-month\" [ngClass]=\"{'ui-state-active': isMonthSelected(i)}\">\n                            {{m}}\n                        </a>\n                    </div>\n                </ng-container>\n                <div class=\"ui-timepicker ui-widget-header ui-corner-all\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"ui-hour-picker\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentHour < 10 ? 'inline': 'none'}\">0</span><span>{{currentHour}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\">\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{timeSeparator}}</span>\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-minute-picker\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentMinute < 10 ? 'inline': 'none'}\">0</span><span>{{currentMinute}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\" *ngIf=\"showSeconds\">\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{timeSeparator}}</span>\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-second-picker\" *ngIf=\"showSeconds\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentSecond < 10 ? 'inline': 'none'}\">0</span><span>{{currentSecond}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <a tabindex=\"0\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <a tabindex=\"0\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"ui-datepicker-buttonbar ui-widget-header\" *ngIf=\"showButtonBar\">\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.today\" (click)=\"onTodayButtonClick($event)\" pButton [ngClass]=\"[todayButtonStyleClass]\"></button>\n                        </div>\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.clear\" (click)=\"onClearButtonClick($event)\" pButton [ngClass]=\"[clearButtonStyleClass]\"></button>\n                        </div>\n                    </div>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </span>\n    ",
+            template: "\n        <span [ngClass]=\"{'ui-calendar':true, 'ui-calendar-w-btn': showIcon, 'ui-calendar-timeonly': timeOnly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick($event)\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\"\n                    [ngClass]=\"'ui-inputtext ui-widget ui-state-default ui-corner-all'\" autocomplete=\"off\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"ui-datepicker-trigger ui-calendar-button\"\n                    [ngClass]=\"{'ui-state-disabled':disabled}\" [disabled]=\"disabled\" tabindex=\"-1\"></button>\n            </ng-template>\n            <div [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all': true, 'ui-datepicker-inline':inline,'ui-shadow':!inline,\n                'ui-state-disabled':disabled,'ui-datepicker-timeonly':timeOnly,'ui-datepicker-multiple-month': this.numberOfMonths > 1, 'ui-datepicker-monthpicker': (view === 'month'), 'ui-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}: \n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" \n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"ui-datepicker-group ui-widget-content\" *ngFor=\"let month of months; let i = index;\">\n                        <div class=\"ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all\">\n                            <ng-content select=\"p-header\"></ng-content>\n                            <a class=\"ui-datepicker-prev ui-corner-all\" (click)=\"navBackward($event)\" *ngIf=\"i === 0\">\n                                <span class=\"ui-datepicker-prev-icon pi pi-chevron-left\"></span>\n                            </a>\n                            <a class=\"ui-datepicker-next ui-corner-all\" (click)=\"navForward($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\">\n                                <span class=\"ui-datepicker-next-icon pi pi-chevron-right\"></span>\n                            </a>\n                            <div class=\"ui-datepicker-title\">\n                                <span class=\"ui-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{locale.monthNames[month.month]}}</span>\n                                <select class=\"ui-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                    <option [value]=\"i\" *ngFor=\"let monthName of locale.monthNames;let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                </select>\n                                <select class=\"ui-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                    <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                </select>\n                                <span class=\"ui-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                            </div>\n                        </div>\n                        <div class=\"ui-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                            <table class=\"ui-datepicker-calendar\">\n                                <thead>\n                                    <tr>\n                                        <th *ngIf=\"showWeek\" class=\"ui-datepicker-weekheader\">\n                                            <span>{{locale['weekHeader']}}</span>\n                                        </th>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                            <span>{{weekDay}}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates; let i = index;\">\n                                        <td *ngIf=\"showWeek\" class=\"ui-datepicker-weeknumber ui-state-disabled\">\n                                            <span>\n                                                {{month.weekNumbers[i]}}\n                                            </span>\n                                        </td>\n                                        <td *ngFor=\"let date of week\" [ngClass]=\"{'ui-datepicker-other-month': date.otherMonth,\n                                            'ui-datepicker-current-day':isSelected(date),'ui-datepicker-today':date.today}\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <a class=\"ui-state-default\" *ngIf=\"date.selectable\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\"\n                                                    (click)=\"onDateSelect($event,date)\" draggable=\"false\">\n                                                    <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                </a>\n                                                <span class=\"ui-state-default ui-state-disabled\" [ngClass]=\"{'ui-state-active':isSelected(date), 'ui-state-highlight':date.today}\" *ngIf=\"!date.selectable\">\n                                                    {{date.day}}\n                                                </span>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                    <div class=\"ui-monthpicker\" *ngIf=\"view === 'month'\">\n                        <a tabindex=\"0\" *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" class=\"ui-monthpicker-month\" [ngClass]=\"{'ui-state-active': isMonthSelected(i)}\">\n                            {{m}}\n                        </a>\n                    </div>\n                </ng-container>\n                <div class=\"ui-timepicker ui-widget-header ui-corner-all\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"ui-hour-picker\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentHour < 10 ? 'inline': 'none'}\">0</span><span>{{currentHour}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\">\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{timeSeparator}}</span>\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-minute-picker\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentMinute < 10 ? 'inline': 'none'}\">0</span><span>{{currentMinute}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-separator\" *ngIf=\"showSeconds\">\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{timeSeparator}}</span>\n                        <a tabindex=\"0\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-second-picker\" *ngIf=\"showSeconds\">\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span [ngStyle]=\"{'display': currentSecond < 10 ? 'inline': 'none'}\">0</span><span>{{currentSecond}}</span>\n                        <a tabindex=\"0\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                    <div class=\"ui-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <a tabindex=\"0\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </a>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <a tabindex=\"0\" (click)=\"toggleAMPM($event)\">\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"ui-datepicker-buttonbar ui-widget-header\" *ngIf=\"showButtonBar\">\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.today\" (click)=\"onTodayButtonClick($event)\" pButton [ngClass]=\"[todayButtonStyleClass]\"></button>\n                        </div>\n                        <div class=\"ui-g-6\">\n                            <button type=\"button\" [label]=\"_locale.clear\" (click)=\"onClearButtonClick($event)\" pButton [ngClass]=\"[clearButtonStyleClass]\"></button>\n                        </div>\n                    </div>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n        </span>\n    ",
             animations: [
                 animations_1.trigger('overlayAnimation', [
                     animations_1.state('visible', animations_1.style({