ngx-datetime-picker - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

date.component/date.component.d.ts

@@ -10,2 +10,3 @@ import { OnInit, EventEmitter, ElementRef } from '@angular/core';
     max: string;
+    use24HourClock: boolean;
     selectedDateChange: EventEmitter<Date>;
@@ -12,0 +13,0 @@ closeDatePicker: EventEmitter<boolean>;

date.component/date.component.js

@@ -11,2 +11,3 @@ "use strict";
         this.max = null;
+        this.use24HourClock = false;
         this.selectedDateChange = new core_1.EventEmitter();
@@ -201,3 +202,3 @@ this.closeDatePicker = new core_1.EventEmitter();
                     selector: 'ngx-date',
-                    template: "<div class=\"calendar\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__month\" (click)=\"toggleMonthMenu(); showYearSelection = false\">{{ selectedMonthText }}</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__year\" (click)=\"toggleYearMenu(); showMonthSelection = false\">{{ selectedYear }}</button> <span class=\"calendar--previous-and-next\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__previous\" (click)=\"previousMonth()\">&lt;</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__next\" (click)=\"nextMonth()\" >&gt;</button> </span> <div class=\"calendar--months-select\" #monthSelect [hidden]=\"!showMonthSelection\"> <span class=\"calendar--month\" [class.calendar--month__selected]=\"i+ 1 == selectedMonth\" [class.calendar--month__disabled]=\"!canSelectMonth(i)\" (click)=\"selectedMonth = i+ 1; showMonthSelection = false;\" *ngFor=\"let month of months; let i = index ;\">{{ month }}</span> </div> <div class=\"calendar--years-select\" #yearSelect [hidden]=\"!showYearSelection\"> <span class=\"calendar--year\" [class.calendar--year__selected]=\"selectedYear == year\" [class.calendar--year__disabled]=\"!canSelectYear(year)\" (click)=\"selectedYear = year; showMonthSelection = true; showYearSelection = false;\" *ngFor=\"let year of years\"> {{ year }} </span> </div> <div class=\"calendar--days-and-weeks\" *ngIf=\"showMonthSelection == false && showYearSelection == false\"> <div class=\"calendar--days-of-week\"> <span class=\"calendar--day-of-week\">Su</span> <span class=\"calendar--day-of-week\">Mo</span> <span class=\"calendar--day-of-week\">Tu</span> <span class=\"calendar--day-of-week\">We</span> <span class=\"calendar--day-of-week\">Th</span> <span class=\"calendar--day-of-week\">Fr</span> <span class=\"calendar--day-of-week\">Sa</span> </div> <div class=\"calendar--days-select\"> <span class=\"calendar--day\" [class.calendar--day__muted]=\"day.month != selectedMonth\" [class.calendar--day__selected]=\"day.date.getDate() == highlightedDate?.getDate() && day.date.getFullYear() == highlightedDate?.getFullYear() && day.date.getMonth() == highlightedDate?.getMonth() \" [class.calendar--day__disabled]=\"!canSelectDay(day.day, day.date.getMonth())\" (click)=\"setSelectedDate(day.date)\" *ngFor=\"let day of availableDays\"> {{ day.day}} </span> </div> </div> <ngx-time *ngIf=\"includeTime\" [selectedHour]=\"selectedHour\" [selectedMinute]=\"selectedMinute\" (selectedHourChange)=\"setSelectedDate(highlightedDate,$event)\" (selectedMinuteChange)=\"setSelectedDate(highlightedDate,null,$event)\" ></ngx-time> <div class=\"calendar--footer\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__now\" (click)=\"setSelectedDate(null); showMonthSelection = false; showYearSelection = false\">Now</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__close\" (click)=\"closePicker()\">Close</button> </div> </div> ",
+                    template: "<div class=\"calendar\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__month\" (click)=\"toggleMonthMenu(); showYearSelection = false\">{{ selectedMonthText }}</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__year\" (click)=\"toggleYearMenu(); showMonthSelection = false\">{{ selectedYear }}</button> <span class=\"calendar--previous-and-next\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__previous\" (click)=\"previousMonth()\">&lt;</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__next\" (click)=\"nextMonth()\" >&gt;</button> </span> <div class=\"calendar--months-select\" #monthSelect [hidden]=\"!showMonthSelection\"> <span class=\"calendar--month\" [class.calendar--month__selected]=\"i+ 1 == selectedMonth\" [class.calendar--month__disabled]=\"!canSelectMonth(i)\" (click)=\"selectedMonth = i+ 1; showMonthSelection = false;\" *ngFor=\"let month of months; let i = index ;\">{{ month }}</span> </div> <div class=\"calendar--years-select\" #yearSelect [hidden]=\"!showYearSelection\"> <span class=\"calendar--year\" [class.calendar--year__selected]=\"selectedYear == year\" [class.calendar--year__disabled]=\"!canSelectYear(year)\" (click)=\"selectedYear = year; showMonthSelection = true; showYearSelection = false;\" *ngFor=\"let year of years\"> {{ year }} </span> </div> <div class=\"calendar--days-and-weeks\" *ngIf=\"showMonthSelection == false && showYearSelection == false\"> <div class=\"calendar--days-of-week\"> <span class=\"calendar--day-of-week\">Su</span> <span class=\"calendar--day-of-week\">Mo</span> <span class=\"calendar--day-of-week\">Tu</span> <span class=\"calendar--day-of-week\">We</span> <span class=\"calendar--day-of-week\">Th</span> <span class=\"calendar--day-of-week\">Fr</span> <span class=\"calendar--day-of-week\">Sa</span> </div> <div class=\"calendar--days-select\"> <span class=\"calendar--day\" [class.calendar--day__muted]=\"day.month != selectedMonth\" [class.calendar--day__selected]=\"day.date.getDate() == highlightedDate?.getDate() && day.date.getFullYear() == highlightedDate?.getFullYear() && day.date.getMonth() == highlightedDate?.getMonth() \" [class.calendar--day__disabled]=\"!canSelectDay(day.day, day.date.getMonth())\" (click)=\"setSelectedDate(day.date)\" *ngFor=\"let day of availableDays\"> {{ day.day}} </span> </div> </div> <ngx-time *ngIf=\"includeTime\" [selectedHour]=\"selectedHour\" [selectedMinute]=\"selectedMinute\" (selectedHourChange)=\"setSelectedDate(highlightedDate,$event)\" (selectedMinuteChange)=\"setSelectedDate(highlightedDate,null,$event)\" [use24HourClock]=\"use24HourClock\" ></ngx-time> <div class=\"calendar--footer\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__now\" (click)=\"setSelectedDate(null); showMonthSelection = false; showYearSelection = false\">Now</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__close\" (click)=\"closePicker()\">Close</button> </div> </div> ",
                     encapsulation: core_1.ViewEncapsulation.None,
@@ -216,2 +217,3 @@ },] },
         'max': [{ type: core_1.Input },],
+        'use24HourClock': [{ type: core_1.Input },],
         'selectedDateChange': [{ type: core_1.Output },],
@@ -218,0 +220,0 @@ 'closeDatePicker': [{ type: core_1.Output },],

date.component/date.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-date","templateUrl":"./date.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["yearSelect"]}]}],"monthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSelect"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/date.service","name":"DateService"}]}],"setSelectedDate":[{"__symbolic":"method"}],"loadCalendarMonth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}],"scrollToYear":[{"__symbolic":"method"}],"scrollToMonth":[{"__symbolic":"method"}],"previousMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"toggleMonthMenu":[{"__symbolic":"method"}],"toggleYearMenu":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-date","templateUrl":"./date.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["yearSelect"]}]}],"monthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSelect"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/date.service","name":"DateService"}]}],"setSelectedDate":[{"__symbolic":"method"}],"loadCalendarMonth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}],"scrollToYear":[{"__symbolic":"method"}],"scrollToMonth":[{"__symbolic":"method"}],"previousMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"toggleMonthMenu":[{"__symbolic":"method"}],"toggleYearMenu":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-date","templateUrl":"./date.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["yearSelect"]}]}],"monthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSelect"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/date.service","name":"DateService"}]}],"setSelectedDate":[{"__symbolic":"method"}],"loadCalendarMonth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}],"scrollToYear":[{"__symbolic":"method"}],"scrollToMonth":[{"__symbolic":"method"}],"previousMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"toggleMonthMenu":[{"__symbolic":"method"}],"toggleYearMenu":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-date","templateUrl":"./date.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"yearSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["yearSelect"]}]}],"monthSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSelect"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/date.service","name":"DateService"}]}],"setSelectedDate":[{"__symbolic":"method"}],"loadCalendarMonth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}],"scrollToYear":[{"__symbolic":"method"}],"scrollToMonth":[{"__symbolic":"method"}],"previousMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"toggleMonthMenu":[{"__symbolic":"method"}],"toggleYearMenu":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]

dateTimePicker.component/dateTimePicker.component.d.ts

@@ -17,2 +17,3 @@ import { OnInit, EventEmitter, ElementRef } from '@angular/core';
     max: string;
+    use24HourClock: boolean;
     selectedDateTimeChange: EventEmitter<Date>;
@@ -19,0 +20,0 @@ offClick(event: any): void;

dateTimePicker.component/dateTimePicker.component.js

@@ -18,2 +18,3 @@ "use strict";
         this.max = null;
+        this.use24HourClock = false;
         this.selectedDateTimeChange = new core_1.EventEmitter();
@@ -31,2 +32,5 @@ this.pickerVisible = false;
         get: function () {
+            if (this.use24HourClock) {
+                return this.dateService.formatMMDDYYYY_HHMM(this.selectedDateTime);
+            }
             return this.dateService.formatMMDDYYYY_HHMM_AMPM(this.selectedDateTime);
@@ -77,3 +81,3 @@ },
                     selector: 'ngx-datetime-picker',
-                    template: "<div [ngSwitch]=\"isMobile\" [class.invalid]=\"invalid\"> <div *ngSwitchCase=\"true\"> <input type=\"datetime-local\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"mobileFormattedDate\" (change)=\"setDateTime($event.target.value)\" /> </div> <div *ngSwitchDefault> <div class=\"ngx-picker\"> <input type=\"text\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" (click)=\"pickerVisible = !pickerVisible\" [value]=\"formattedDate\" (change)=\"setDateTime($event.target.value)\" /> <button type=\"button\" [disabled]=\"disableButton || disablePicker\" (click)=\"pickerVisible = !pickerVisible\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\"  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path fill=\"#000000\" d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" /> </svg> </button> <ngx-date [hidden]=\"!pickerVisible\" includeTime=\"true\" [doNotCloseOnDateSet]=\"doNotCloseOnDateSet\" (closeDatePicker)=\"closePicker($event)\" (selectedDateChange)=\"newDatePicked($event)\" [min]=\"min\" [max]=\"max\" [selectedDate]=\"selectedDateTime\"> </ngx-date> </div> </div> </div> ",
+                    template: "<div [ngSwitch]=\"isMobile\" [class.invalid]=\"invalid\"> <div *ngSwitchCase=\"true\"> <input type=\"datetime-local\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"mobileFormattedDate\" (change)=\"setDateTime($event.target.value)\" /> </div> <div *ngSwitchDefault> <div class=\"ngx-picker\"> <input type=\"text\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" (click)=\"pickerVisible = !pickerVisible\" [value]=\"formattedDate\" (change)=\"setDateTime($event.target.value)\" /> <button type=\"button\" [disabled]=\"disableButton || disablePicker\" (click)=\"pickerVisible = !pickerVisible\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\"  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path fill=\"#000000\" d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" /> </svg> </button> <ngx-date [hidden]=\"!pickerVisible\" includeTime=\"true\" [doNotCloseOnDateSet]=\"doNotCloseOnDateSet\" (closeDatePicker)=\"closePicker($event)\" (selectedDateChange)=\"newDatePicked($event)\" [min]=\"min\" [max]=\"max\" [use24HourClock]=\"use24HourClock\" [selectedDate]=\"selectedDateTime\"> </ngx-date> </div> </div> </div> ",
                     encapsulation: core_1.ViewEncapsulation.None,
@@ -104,2 +108,3 @@ providers: [
         'max': [{ type: core_1.Input },],
+        'use24HourClock': [{ type: core_1.Input },],
         'selectedDateTimeChange': [{ type: core_1.Output },],
@@ -106,0 +111,0 @@ 'offClick': [{ type: core_1.HostListener, args: ['document:click', ['$event'],] },],

dateTimePicker.component/dateTimePicker.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DateTimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-datetime-picker","templateUrl":"./dateTimePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true}]}]}],"members":{"selectedDateTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDateTime":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"newDatePicked":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DateTimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-datetime-picker","templateUrl":"./dateTimePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true}]}]}],"members":{"selectedDateTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDateTime":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"newDatePicked":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DateTimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-datetime-picker","templateUrl":"./dateTimePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true}]}]}],"members":{"selectedDateTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDateTime":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"newDatePicked":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DateTimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-datetime-picker","templateUrl":"./dateTimePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true}]}]}],"members":{"selectedDateTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doNotCloseOnDateSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedDateTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDateTime":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"newDatePicked":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ngx-datetime-picker",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Date, DateTime & Time Picker components that uses native HTML5 components on mobile",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -40,2 +40,4 @@ # ngx-datetime-picker
 and ngx-datetime-picker: [min]="null" (default) [max]="null" (default)
+Additional options for ngx-time-picker and ngx-datetime-picker:
+[use24HourClock]="false" (default)
 ```
@@ -42,0 +44,0 @@

services/date.service.d.ts

@@ -15,3 +15,5 @@ export interface dayOfTheMonth {
     formatMMDDYYYY_HHMM_AMPM(date: Date): string;
+    formatMMDDYYYY_HHMM(date: Date): string;
     formatHHMM_AMPM(hour: number, minute: number): string;
+    formatHHMM(hour: number, minute: number): string;
     getCurrentMonthDays(month: number, year: number): dayOfTheMonth[];
@@ -18,0 +20,0 @@ getDateList(Month: number, Year: number): dayOfTheMonth[];

services/date.service.js

@@ -40,2 +40,10 @@ "use strict";
     };
+    DateService.prototype.formatMMDDYYYY_HHMM = function (date) {
+        if (!date || typeof date == 'string') {
+            return '';
+        }
+        var hours = date.getHours();
+        var minutes = date.getMinutes();
+        return this.formatMMDDYYYY(date) + " " + this.formatHHMM(hours, minutes);
+    };
     DateService.prototype.formatHHMM_AMPM = function (hour, minute) {
@@ -57,2 +65,10 @@ if (hour == null || minute == null) {
     };
+    DateService.prototype.formatHHMM = function (hour, minute) {
+        if (hour == null || minute == null) {
+            return '';
+        }
+        var formattedHour = (!hour ? '00' : (hour <= 9 ? "0" + hour : hour));
+        var formattedMinute = (!minute ? '00' : (minute <= 9 ? "0" + minute : minute));
+        return formattedHour + ":" + formattedMinute;
+    };
     DateService.prototype.getCurrentMonthDays = function (month, year) {
@@ -59,0 +75,0 @@ var dayOfTheMonth = new Date(year, month - 1, 1);

services/date.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"dayOfTheMonth":{"__symbolic":"interface"},"DateService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"addLeadingZero":[{"__symbolic":"method"}],"formatMobileYYYYMMDD":[{"__symbolic":"method"}],"formatMobileYYYYMMDDTHHMM":[{"__symbolic":"method"}],"formatMMDDYYYY":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM_AMPM":[{"__symbolic":"method"}],"formatHHMM_AMPM":[{"__symbolic":"method"}],"getCurrentMonthDays":[{"__symbolic":"method"}],"getDateList":[{"__symbolic":"method"}],"getPreviousMonthDays":[{"__symbolic":"method"}],"getNextMonthDays":[{"__symbolic":"method"}],"getMonths":[{"__symbolic":"method"}],"getMonthText":[{"__symbolic":"method"}],"getAvailableYears":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"dayOfTheMonth":{"__symbolic":"interface"},"DateService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"addLeadingZero":[{"__symbolic":"method"}],"formatMobileYYYYMMDD":[{"__symbolic":"method"}],"formatMobileYYYYMMDDTHHMM":[{"__symbolic":"method"}],"formatMMDDYYYY":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM_AMPM":[{"__symbolic":"method"}],"formatHHMM_AMPM":[{"__symbolic":"method"}],"getCurrentMonthDays":[{"__symbolic":"method"}],"getDateList":[{"__symbolic":"method"}],"getPreviousMonthDays":[{"__symbolic":"method"}],"getNextMonthDays":[{"__symbolic":"method"}],"getMonths":[{"__symbolic":"method"}],"getMonthText":[{"__symbolic":"method"}],"getAvailableYears":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"dayOfTheMonth":{"__symbolic":"interface"},"DateService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"addLeadingZero":[{"__symbolic":"method"}],"formatMobileYYYYMMDD":[{"__symbolic":"method"}],"formatMobileYYYYMMDDTHHMM":[{"__symbolic":"method"}],"formatMMDDYYYY":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM_AMPM":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM":[{"__symbolic":"method"}],"formatHHMM_AMPM":[{"__symbolic":"method"}],"formatHHMM":[{"__symbolic":"method"}],"getCurrentMonthDays":[{"__symbolic":"method"}],"getDateList":[{"__symbolic":"method"}],"getPreviousMonthDays":[{"__symbolic":"method"}],"getNextMonthDays":[{"__symbolic":"method"}],"getMonths":[{"__symbolic":"method"}],"getMonthText":[{"__symbolic":"method"}],"getAvailableYears":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"dayOfTheMonth":{"__symbolic":"interface"},"DateService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"addLeadingZero":[{"__symbolic":"method"}],"formatMobileYYYYMMDD":[{"__symbolic":"method"}],"formatMobileYYYYMMDDTHHMM":[{"__symbolic":"method"}],"formatMMDDYYYY":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM_AMPM":[{"__symbolic":"method"}],"formatMMDDYYYY_HHMM":[{"__symbolic":"method"}],"formatHHMM_AMPM":[{"__symbolic":"method"}],"formatHHMM":[{"__symbolic":"method"}],"getCurrentMonthDays":[{"__symbolic":"method"}],"getDateList":[{"__symbolic":"method"}],"getPreviousMonthDays":[{"__symbolic":"method"}],"getNextMonthDays":[{"__symbolic":"method"}],"getMonths":[{"__symbolic":"method"}],"getMonthText":[{"__symbolic":"method"}],"getAvailableYears":[{"__symbolic":"method"}],"canSelectYear":[{"__symbolic":"method"}],"canSelectMonth":[{"__symbolic":"method"}],"canSelectDay":[{"__symbolic":"method"}]}}}}]

time.component/time.component.d.ts

@@ -7,2 +7,3 @@ import { OnInit, EventEmitter } from '@angular/core';
     selectedMinuteChange: EventEmitter<number>;
+    use24HourClock: boolean;
     selectedClock: string;
@@ -9,0 +10,0 @@ hours: string[];

time.component/time.component.js

@@ -8,2 +8,3 @@ "use strict";
         this.selectedMinuteChange = new core_1.EventEmitter();
+        this.use24HourClock = false;
         this.hours = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
@@ -21,6 +22,11 @@ this.minutes = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
         get: function () {
-            if (this.selectedHour == 12 || this.selectedHour == 0) {
-                return '12';
+            if (!this.use24HourClock) {
+                if (this.selectedHour == 12 || this.selectedHour == 0) {
+                    return '12';
+                }
+                return (this.selectedHour > 12 ? this.selectedHour - 12 : this.selectedHour);
             }
-            return (this.selectedHour > 12 ? this.selectedHour - 12 : this.selectedHour);
+            else {
+                return (this.selectedHour < 10 ? '0' + this.selectedHour : this.selectedHour);
+            }
         },
@@ -40,2 +46,7 @@ enumerable: true,
         }
+        if (this.use24HourClock) {
+            this.hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
+            this.minutes = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+            this.selectedClock = '';
+        }
     };
@@ -79,3 +90,3 @@ TimeComponent.prototype.selectHourChange = function (hour) {
                     selector: 'ngx-time',
-                    template: "<div class=\"time-picker\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__hour\" (click)=\"toggleHourMenu()\">{{ formatSelectedHour }}</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__minute\" (click)=\"toggleMinuteMenu()\">{{ formatSelectedMinute }}</button> <div class=\"time--periods\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__am\" (click)=\"selectClockChange('am')\" [class.ngx-picker--btn__selected]=\"selectedHour < 12\">AM</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__pm\" (click)=\"selectClockChange('pm')\" [class.ngx-picker--btn__selected]=\"selectedHour >= 12\">PM</button> </div> <div class=\"time--selection__hours\" [hidden]=\"!hoursOpen\"> <div class=\"time--values\"> <div class=\"time--value\" [class.time--value__selected]=\"selectedHour == hour\" (click)=\"selectHourChange(hour)\" *ngFor=\"let hour of hours\">{{ hour }}</div> </div> </div> <div class=\"time--selection__minutes\" [hidden]=\"!minutesOpen\"> <div class=\"time--values\"> <div class=\"time--value\" [class.time--value__selected]=\"selectedMinute == minute\" (click)=\"selectMinuteChange(minute)\" *ngFor=\"let minute of minutes\">{{ minute }}</div> </div> </div> </div> ",
+                    template: "<div class=\"time-picker\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__hour\" (click)=\"toggleHourMenu()\" [class.ngx-picker--btn__24h]=\"use24HourClock\">{{ formatSelectedHour }}</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__minute\" (click)=\"toggleMinuteMenu()\" [class.ngx-picker--btn__24h]=\"use24HourClock\">{{ formatSelectedMinute }}</button> <div class=\"time--periods\" *ngIf=\"!use24HourClock\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__am\" (click)=\"selectClockChange('am')\" [class.ngx-picker--btn__selected]=\"selectedHour < 12\">AM</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__pm\" (click)=\"selectClockChange('pm')\" [class.ngx-picker--btn__selected]=\"selectedHour >= 12\">PM</button> </div> <div class=\"time--selection__hours\" [hidden]=\"!hoursOpen\"> <div class=\"time--values\"> <div class=\"time--value\" [class.time--value__selected]=\"selectedHour == hour\" (click)=\"selectHourChange(hour)\" *ngFor=\"let hour of hours\">{{ hour }}</div> </div> </div> <div class=\"time--selection__minutes\" [hidden]=\"!minutesOpen\"> <div class=\"time--values\"> <div class=\"time--value\" [class.time--value__selected]=\"selectedMinute == minute\" (click)=\"selectMinuteChange(minute)\" *ngFor=\"let minute of minutes\">{{ minute }}</div> </div> </div> </div> ",
                     encapsulation: core_1.ViewEncapsulation.None,
@@ -91,2 +102,3 @@ },] },
         'selectedMinuteChange': [{ type: core_1.Output },],
+        'use24HourClock': [{ type: core_1.Input },],
     };
@@ -93,0 +105,0 @@ return TimeComponent;

time.component/time.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TimeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time","templateUrl":"./time.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedHourChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedMinuteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"selectHourChange":[{"__symbolic":"method"}],"selectMinuteChange":[{"__symbolic":"method"}],"selectClockChange":[{"__symbolic":"method"}],"toggleHourMenu":[{"__symbolic":"method"}],"toggleMinuteMenu":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TimeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time","templateUrl":"./time.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedHourChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedMinuteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"selectHourChange":[{"__symbolic":"method"}],"selectMinuteChange":[{"__symbolic":"method"}],"selectClockChange":[{"__symbolic":"method"}],"toggleHourMenu":[{"__symbolic":"method"}],"toggleMinuteMenu":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TimeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time","templateUrl":"./time.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedHourChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedMinuteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"selectHourChange":[{"__symbolic":"method"}],"selectMinuteChange":[{"__symbolic":"method"}],"selectClockChange":[{"__symbolic":"method"}],"toggleHourMenu":[{"__symbolic":"method"}],"toggleMinuteMenu":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TimeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time","templateUrl":"./time.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"selectedHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedHourChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedMinute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedMinuteChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"selectHourChange":[{"__symbolic":"method"}],"selectMinuteChange":[{"__symbolic":"method"}],"selectClockChange":[{"__symbolic":"method"}],"toggleHourMenu":[{"__symbolic":"method"}],"toggleMinuteMenu":[{"__symbolic":"method"}]}}}}]

timePicker.component/timePicker.component.d.ts

@@ -14,2 +14,3 @@ import { ElementRef, EventEmitter } from '@angular/core';
     disablePicker: boolean;
+    use24HourClock: boolean;
     selectedTimeChange: EventEmitter<string>;
@@ -16,0 +17,0 @@ offClick(event: any): void;

timePicker.component/timePicker.component.js

@@ -15,2 +15,3 @@ "use strict";
         this.disablePicker = false;
+        this.use24HourClock = false;
         this.selectedTimeChange = new core_1.EventEmitter();
@@ -33,2 +34,5 @@ this.pickerVisible = false;
             this.selectedMinute = parseInt(this.selectedTime.split(':')[1]);
+            if (this.use24HourClock) {
+                return this.dateService.formatHHMM(this.selectedHour, this.selectedMinute);
+            }
             return this.dateService.formatHHMM_AMPM(this.selectedHour, this.selectedMinute);
@@ -116,3 +120,3 @@ },
                     selector: 'ngx-time-picker',
-                    template: "<div [ngSwitch]=\"isMobile\"> <div *ngSwitchCase=\"true\"> <input type=\"time\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"mobileFormattedTime\" (change)=\"setMobileFormattedTime($event.target.value)\" /> </div> <div *ngSwitchDefault> <div class=\"ngx-picker\"> <input type=\"text\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"formattedTime\" (change)=\"setFormattedTime($event.target.value)\" (click)=\"pickerVisible = !pickerVisible\" /> <button type=\"button\" [disabled]=\"disableButton || disablePicker\" (click)=\"pickerVisible = !pickerVisible\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\"  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path fill=\"#000000\" d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" /> </svg> </button> <div class=\"calendar\" [hidden]=\"!pickerVisible\"> <ngx-time [selectedHour]=\"selectedHour\" [selectedMinute]=\"selectedMinute\" (selectedHourChange)=\"setHourNow($event)\" (selectedMinuteChange)=\"setMinuteNow($event)\"></ngx-time> <div class=\"calendar--footer\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__now\" (click)=\"setTimeToNow()\">Now</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__close\" (click)=\"closePicker()\">Close</button> </div> </div> </div> </div> </div> ",
+                    template: "<div [ngSwitch]=\"isMobile\"> <div *ngSwitchCase=\"true\"> <input type=\"time\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"mobileFormattedTime\" (change)=\"setMobileFormattedTime($event.target.value)\" /> </div> <div *ngSwitchDefault> <div class=\"ngx-picker\"> <input type=\"text\" [disabled]=\"disableInput || disablePicker\" [placeholder]=\"placeholder\" [value]=\"formattedTime\" (change)=\"setFormattedTime($event.target.value)\" (click)=\"pickerVisible = !pickerVisible\" /> <button type=\"button\" [disabled]=\"disableButton || disablePicker\" (click)=\"pickerVisible = !pickerVisible\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\"  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path fill=\"#000000\" d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" /> </svg> </button> <div class=\"calendar\" [hidden]=\"!pickerVisible\"> <ngx-time [selectedHour]=\"selectedHour\" [selectedMinute]=\"selectedMinute\" [use24HourClock]=\"use24HourClock\" (selectedHourChange)=\"setHourNow($event)\" (selectedMinuteChange)=\"setMinuteNow($event)\"></ngx-time> <div class=\"calendar--footer\"> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__now\" (click)=\"setTimeToNow()\">Now</button> <button type=\"button\" class=\"ngx-picker--btn ngx-picker--btn__close\" (click)=\"closePicker()\">Close</button> </div> </div> </div> </div> </div> ",
                     encapsulation: core_1.ViewEncapsulation.None,
@@ -140,2 +144,3 @@ providers: [
         'disablePicker': [{ type: core_1.Input },],
+        'use24HourClock': [{ type: core_1.Input },],
         'selectedTimeChange': [{ type: core_1.Output },],
@@ -142,0 +147,0 @@ 'offClick': [{ type: core_1.HostListener, args: ['document:click', ['$event'],] },],

timePicker.component/timePicker.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time-picker","templateUrl":"./timePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TimePickerComponent"},"multi":true}]}]}],"members":{"selectedTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setMobileFormattedTime":[{"__symbolic":"method"}],"setFormattedTime":[{"__symbolic":"method"}],"setTimeToNow":[{"__symbolic":"method"}],"setHourNow":[{"__symbolic":"method"}],"setMinuteNow":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time-picker","templateUrl":"./timePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TimePickerComponent"},"multi":true}]}]}],"members":{"selectedTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setMobileFormattedTime":[{"__symbolic":"method"}],"setFormattedTime":[{"__symbolic":"method"}],"setTimeToNow":[{"__symbolic":"method"}],"setHourNow":[{"__symbolic":"method"}],"setMinuteNow":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time-picker","templateUrl":"./timePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TimePickerComponent"},"multi":true}]}]}],"members":{"selectedTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setMobileFormattedTime":[{"__symbolic":"method"}],"setFormattedTime":[{"__symbolic":"method"}],"setTimeToNow":[{"__symbolic":"method"}],"setHourNow":[{"__symbolic":"method"}],"setMinuteNow":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TimePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-time-picker","templateUrl":"./timePicker.component.html","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TimePickerComponent"},"multi":true}]}]}],"members":{"selectedTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"use24HourClock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedTimeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/isMobile.service","name":"IsMobileService"},{"__symbolic":"reference","module":"../services/date.service","name":"DateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setMobileFormattedTime":[{"__symbolic":"method"}],"setFormattedTime":[{"__symbolic":"method"}],"setTimeToNow":[{"__symbolic":"method"}],"setHourNow":[{"__symbolic":"method"}],"setMinuteNow":[{"__symbolic":"method"}],"closePicker":[{"__symbolic":"method"}]}}}}]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

1336

increased by3.89%

Number of lines in readme file

92

increased by2.22%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

108838

decreased by-34.12%

Number of package files

35

decreased by-2.78%

No dependency changes