Merge pull request #66 from alecrem/support-24-hour-clock

Support 24 hour clock

Author: JoshDSommer

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

ngx-datetimepicker/src/app/app.component.html

@@ -7,6 +7,7 @@ <h2>Stand-alone</h2>
 <ngx-datetime-picker [(selectedDateTime)]="dateTimeExample" [disableInput]="true"></ngx-datetime-picker>
 <ngx-datetime-picker [(selectedDateTime)]="dateTimeExample" [disablePicker]="true"></ngx-datetime-picker>
 <ngx-datetime-picker [(selectedDateTime)]="dateTimeExample" [doNotCloseOnDateSet]="true"></ngx-datetime-picker>
+<ngx-datetime-picker [(selectedDateTime)]="dateTimeExample" [use24HourClock]="true"></ngx-datetime-picker>
 <hr />
 <label>Date Picker</label>
 <ngx-date-picker [(selectedDate)]="dateExample" #pickerToFocus></ngx-date-picker>
@@ -24,6 +25,7 @@ <h2>Stand-alone</h2>
 <ngx-time-picker [(selectedTime)]="timeExample" [disableButton]="true"></ngx-time-picker>
 <ngx-time-picker [(selectedTime)]="timeExample" [disableInput]="true"></ngx-time-picker>
 <ngx-time-picker [(selectedTime)]="timeExample" [disablePicker]="true"></ngx-time-picker>
+<ngx-time-picker [(selectedTime)]="timeExample" [use24HourClock]="true"></ngx-time-picker>
 
 <br>
 <button (click)="dateExample=null;timeExample=null;dateTimeExample=null;" >Clear All</button>

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"
 			></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>

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<Date>();
 	@Output() closeDatePicker = new EventEmitter<boolean>();

ngx-datetimepicker/src/app/dateTimePicker.component/dateTimePicker.component.html

@@ -14,6 +14,7 @@
 				</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>

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<Date>();
 
@@ -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() {

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);

ngx-datetimepicker/src/app/time.component/time.component.html

@@ -1,7 +1,7 @@
 <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__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>

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<number>();
 
+	@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 <any>( this.selectedHour > 12 ? this.selectedHour - 12 : this.selectedHour);
+		} else {
+			return <any>( this.selectedHour < 10 ? '0' + this.selectedHour : this.selectedHour);
 		}
-		return <any>( 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 {

ngx-datetimepicker/src/app/timePicker.component/timePicker.component.html

@@ -13,7 +13,9 @@
 				</svg>
 			</button>
 			<div class="calendar" [hidden]="!pickerVisible">
-				<ngx-time [selectedHour]="selectedHour" [selectedMinute]="selectedMinute" (selectedHourChange)="setHourNow($event)" (selectedMinuteChange)="setMinuteNow($event)"></ngx-time>
+				<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>