From 4937b4d4902eda3c5df97b792173283ef2a21b61 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Jul 2016 12:50:59 +0200
Subject: [PATCH] Added support for time-only datepicker

---
 .../files/js/WoltLab/WCF/Date/Picker.js       | 35 ++++++++++++++++---
 .../install/files/style/ui/datePicker.scss    | 17 +++++++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index fc4eaff97a..00804f2b85 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -48,15 +48,26 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 				element.readOnly = true;
 				
 				var isDateTime = (elAttr(element, 'type') === 'datetime');
+				var isTimeOnly = (isDateTime && elDataBool(element, 'time-only'));
 				
 				elData(element, 'is-date-time', isDateTime);
+				elData(element, 'is-time-only', isTimeOnly);
 				
 				// convert value
 				var date = null, value = elAttr(element, 'value');
 				if (elAttr(element, 'value')) {
-					date = new Date(value);
+					if (isDateTime) {
+						date = new Date();
+						var tmp = value.split(':');
+						date.setHours(tmp[0], tmp[1]);
+					}
+					else {
+						date = new Date(value);
+					}
+					
 					elData(element, 'value', date.getTime());
-					value = DateUtil['formatDate' + (isDateTime ? 'Time' : '')](date);
+					var format = (isTimeOnly) ? 'formatTime' : ('formatDate' + (isDateTime ? 'Time' : '')); 
+					value = DateUtil[format](date);
 				}
 				
 				var isEmpty = (value.length === 0);
@@ -90,7 +101,12 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 				shadowElement.type = 'hidden';
 				
 				if (date !== null) {
-					shadowElement.value = DateUtil.format(date, (isDateTime) ? 'c' : 'Y-m-d');
+					if (isTimeOnly) {
+						shadowElement.value = DateUtil.format(date, 'H:i');
+					}
+					else {
+						shadowElement.value = DateUtil.format(date, (isDateTime) ? 'c' : 'Y-m-d');
+					}
 				}
 				
 				element.parentNode.insertBefore(shadowElement, element);
@@ -143,6 +159,7 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 					
 					isDateTime: isDateTime,
 					isEmpty: isEmpty,
+					isTimeOnly: isTimeOnly,
 					
 					onClose: null
 				});
@@ -251,6 +268,8 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 				_datePicker.classList.remove('datePickerTime');
 			}
 			
+			_datePicker.classList[(data.isTimeOnly) ? 'add' : 'remove']('datePickerTimeOnly');
+			
 			this._renderPicker(date.getDate(), date.getMonth(), date.getFullYear());
 			
 			UiAlignment.set(_datePicker, _input);
@@ -436,8 +455,14 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 					_dateMinute.value
 				);
 				
-				value = DateUtil.formatDateTime(date);
-				shadowValue = DateUtil.format(date, 'c');
+				if (data.isTimeOnly) {
+					value = DateUtil.formatTime(date);
+					shadowValue = DateUtil.format(date, 'H:i');
+				}
+				else {
+					value = DateUtil.formatDateTime(date);
+					shadowValue = DateUtil.format(date, 'c');
+				}
 			}
 			else {
 				date = new Date(
diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index fd0d06ed5d..52bbb44081 100644
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -18,8 +18,21 @@
 		display: block;
 	}
 	
-	&.datePickerTime > footer {
-		display: block;
+	&.datePickerTime {
+		&.datePickerTimeOnly {
+			> header,
+			> ul {
+				display: none;
+			}
+			
+			> footer {
+				border-top-width: 0;
+			}
+		}
+		
+		> footer {
+			display: block;
+		}
 	}
 	
 	> header {
-- 
2.20.1