diff --git a/README.md b/README.md index 5c287c7..44479ec 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ Additional options for each picker: [disableButton]="false" (default) [disableInput]="false" (default) [disablePicker]="false" (default) [doNotCloseOnDateSet]="false" (default) Additional options for ngx-date-picker and ngx-datetime-picker: [min]="null" (default) [max]="null" (default) +Additional options for ngx-time-picker and ngx-datetime-picker: +[use24HourClock]="false" (default) ``` ## CSS diff --git a/ngx-datetimepicker/src/app/app.component.html b/ngx-datetimepicker/src/app/app.component.html index 717909f..3e452d6 100644 --- a/ngx-datetimepicker/src/app/app.component.html +++ b/ngx-datetimepicker/src/app/app.component.html @@ -7,6 +7,7 @@

Stand-alone

+
@@ -24,6 +25,7 @@

Stand-alone

+
diff --git a/ngx-datetimepicker/src/app/date.component/date.component.html b/ngx-datetimepicker/src/app/date.component/date.component.html index 3401669..1e7fee0 100644 --- a/ngx-datetimepicker/src/app/date.component/date.component.html +++ b/ngx-datetimepicker/src/app/date.component/date.component.html @@ -51,6 +51,7 @@ [selectedMinute]="selectedMinute" (selectedHourChange)="setSelectedDate(highlightedDate,$event)" (selectedMinuteChange)="setSelectedDate(highlightedDate,null,$event)" + [use24HourClock]="use24HourClock" >
diff --git a/ngx-datetimepicker/src/app/date.component/date.component.ts b/ngx-datetimepicker/src/app/date.component/date.component.ts index 5d8f770..6296b78 100644 --- a/ngx-datetimepicker/src/app/date.component/date.component.ts +++ b/ngx-datetimepicker/src/app/date.component/date.component.ts @@ -14,6 +14,7 @@ export class DateComponent implements OnInit { @Input() doNotCloseOnDateSet: boolean = false; @Input() min: string = null; @Input() max: string = null; + @Input() use24HourClock: boolean = false; @Output() selectedDateChange = new EventEmitter(); @Output() closeDatePicker = new EventEmitter(); diff --git a/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.html b/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.html index 62dc7cf..f399fbf 100644 --- a/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.html +++ b/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.html @@ -14,6 +14,7 @@
diff --git a/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.ts b/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.ts index f8ad444..a91691d 100644 --- a/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.ts +++ b/ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.ts @@ -25,6 +25,7 @@ export class DateTimePickerComponent implements OnInit, ControlValueAccessor { @Input() doNotCloseOnDateSet: boolean = false; @Input() min: string = null; @Input() max: string = null; + @Input() use24HourClock: boolean = false; @Output() selectedDateTimeChange = new EventEmitter(); @@ -39,6 +40,9 @@ export class DateTimePickerComponent implements OnInit, ControlValueAccessor { isMobile: boolean; invalid: boolean; get formattedDate() { + if (this.use24HourClock) { + return this.dateService.formatMMDDYYYY_HHMM(this.selectedDateTime); + } return this.dateService.formatMMDDYYYY_HHMM_AMPM(this.selectedDateTime); } get mobileFormattedDate() { diff --git a/ngx-datetimepicker/src/app/services/date.service.ts b/ngx-datetimepicker/src/app/services/date.service.ts index 2bfd3b8..1588393 100644 --- a/ngx-datetimepicker/src/app/services/date.service.ts +++ b/ngx-datetimepicker/src/app/services/date.service.ts @@ -51,6 +51,16 @@ export class DateService { return `${this.formatMMDDYYYY(date)} ${this.formatHHMM_AMPM(hours, minutes)}`; } + formatMMDDYYYY_HHMM(date: Date): string { + if (!date || typeof date == 'string') { + return ''; + } + const hours = date.getHours(); + const minutes = date.getMinutes(); + + return `${this.formatMMDDYYYY(date)} ${this.formatHHMM(hours, minutes)}`; + } + formatHHMM_AMPM(hour: number, minute: number): string { if (hour == null || minute == null) { return ''; @@ -69,6 +79,16 @@ export class DateService { return `${hour}:${formattedMinute} am`; } + formatHHMM(hour: number, minute: number): string { + if (hour == null || minute == null) { + return ''; + } + let formattedHour = (!hour ? '00' : (hour <= 9 ? `0${hour}` : hour)); + let formattedMinute = (!minute ? '00' : (minute <= 9 ? `0${minute}` : minute)); + + return `${formattedHour}:${formattedMinute}`; + } + getCurrentMonthDays(month: number, year: number): dayOfTheMonth[] { let dayOfTheMonth = new Date(year, month - 1, 1); let nextMonth = new Date(year, month - 1, 1); diff --git a/ngx-datetimepicker/src/app/time.component/time.component.html b/ngx-datetimepicker/src/app/time.component/time.component.html index 9741b6f..797617e 100644 --- a/ngx-datetimepicker/src/app/time.component/time.component.html +++ b/ngx-datetimepicker/src/app/time.component/time.component.html @@ -1,7 +1,7 @@
- - -
+ + +
diff --git a/ngx-datetimepicker/src/app/time.component/time.component.ts b/ngx-datetimepicker/src/app/time.component/time.component.ts index 9af6fd9..7220df4 100644 --- a/ngx-datetimepicker/src/app/time.component/time.component.ts +++ b/ngx-datetimepicker/src/app/time.component/time.component.ts @@ -13,6 +13,8 @@ export class TimeComponent implements OnInit { @Input() selectedMinute: number; @Output() selectedMinuteChange = new EventEmitter(); + @Input() use24HourClock: boolean = false; + public selectedClock: string; public hours = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; @@ -26,10 +28,14 @@ export class TimeComponent implements OnInit { } get formatSelectedHour(): string { - 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); + } else { + return ( this.selectedHour < 10 ? '0' + this.selectedHour : this.selectedHour); } - return ( this.selectedHour > 12 ? this.selectedHour - 12 : this.selectedHour); } ngOnInit() { @@ -42,6 +48,11 @@ export class TimeComponent implements OnInit { if (this.selectedHour >= 12) { this.selectedClock = 'pm'; } + 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 = ''; + } } selectHourChange(hour: number): void { diff --git a/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.html b/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.html index 9da603a..438a5be 100644 --- a/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.html +++ b/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.html @@ -13,7 +13,9 @@
- +
diff --git a/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.ts b/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.ts index 6df8ff7..ba0d809 100644 --- a/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.ts +++ b/ngx-datetimepicker/src/app/timePicker.component/timePicker.component.ts @@ -22,6 +22,7 @@ export class TimePickerComponent implements ControlValueAccessor { @Input() disableInput: boolean = false; @Input() disableButton: boolean = false; @Input() disablePicker: boolean = false; + @Input() use24HourClock: boolean = false; @Output() selectedTimeChange = new EventEmitter(); @@ -41,6 +42,9 @@ export class TimePickerComponent implements ControlValueAccessor { } this.selectedHour = parseInt(this.selectedTime.split(':')[0]); 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); } diff --git a/ngx-datetimepicker/src/assets/ngx-datetime-picker.css b/ngx-datetimepicker/src/assets/ngx-datetime-picker.css index d212ab2..3cd56ca 100644 --- a/ngx-datetimepicker/src/assets/ngx-datetime-picker.css +++ b/ngx-datetimepicker/src/assets/ngx-datetime-picker.css @@ -12,6 +12,8 @@ cursor: pointer; } .ngx-picker--btn:focus { outline-color: transparent; } + .ngx-picker--btn__24h { + width: 50%; } .ngx-picker--btn__month:hover { border-top-left-radius: 0.2em; }