From: Alexander Ebert Date: Wed, 13 Jul 2016 10:50:59 +0000 (+0200) Subject: Added support for time-only datepicker X-Git-Tag: 3.0.0_Beta_1~1176 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4937b4d4902eda3c5df97b792173283ef2a21b61;p=GitHub%2FWoltLab%2FWCF.git Added support for time-only datepicker --- 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 {