Added clear button for date input

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 2001ffb937155e20af3a39806d516aa53b4cc948..fc4eaff97a61aea66de628e76e1a3f358b8dc088 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -114,6 +114,17 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                                element.parentNode.insertBefore(container, element);
                                container.insertBefore(element, button);
                                
+                               button = elCreate('a');
+                               button.className = 'inputSuffix button';
+                               button.addEventListener(WCF_CLICK_EVENT, this.clear.bind(this, element));
+                               if (isEmpty) button.style.setProperty('visibility', 'hidden', '');
+                               
+                               container.appendChild(button);
+                               
+                               icon = elCreate('span');
+                               icon.className = 'icon icon16 fa-times';
+                               button.appendChild(icon);
+                               
                                // check if the date input has one of the following classes set otherwise default to 'short'
                                var hasClass = false, knownClasses = ['tiny', 'short', 'medium', 'long'];
                                for (var j = 0; j < 4; j++) {
@@ -127,6 +138,7 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                                }
                                
                                _data.set(element, {
+                                       clearButton: button,
                                        shadow: shadowElement,
                                        
                                        isDateTime: isDateTime,
@@ -440,6 +452,7 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        
                        _input.value = value;
                        elData(_input, 'value', date.getTime());
+                       data.clearButton.style.removeProperty('visibility');
                        data.shadow.value = shadowValue;
                },
                
@@ -673,6 +686,7 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        element.removeAttribute('data-value');
                        element.value = '';
                        
+                       data.clearButton.style.setProperty('visibility', 'hidden', '');
                        data.isEmpty = true;
                        data.shadow.value = '';
                },