Added prototype for jQuery UI based date picker

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 42f29967df53a68844ddf65534f8b13d61893e47..d51756788cb3af4243f2ceef974e16d6e59be685 100644 (file)
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -102,6 +102,7 @@
                new WCF.Style.Chooser();
                WCF.Dropdown.init();
                WCF.System.PageNavigation.init('.pageNavigation');
+               WCF.Date.Picker.init();
                
                {event name='javascriptInit'}
                

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 9ee86c0bd6bbc0762d6933964bae525425f0515c..d1644528f8e617acb603ca771d1c67ea37412493 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -94,6 +94,7 @@
                        new WCF.Effect.SmoothScroll();
                        new WCF.Effect.BalloonTooltip();
                        
+                       WCF.Date.Picker.init();
                        WCF.Dropdown.init();
                        
                        new WCF.ACP.Search();

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 1fff647b14064b865cc18f95a998ac8ee4eac8aa..ab37bf0e4b58c89bd62d3293f3535eebdaf00606 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1999,6 +1999,29 @@ WCF.Action.Scroll = Class.extend({
  */
 WCF.Date = {};
 
+/**
+ * Provides a date picker for date input fields.
+ */
+WCF.Date.Picker = {
+       /**
+        * Initializes the jQuery UI based date picker.
+        */
+       init: function() {
+               $('input[type=date]').each(function(index, input) {
+                       // do *not* use .attr()
+                       var $input = $(input).prop('type', 'text');
+                       
+                       // TODO: we should support all these braindead date formats, at least within output
+                       $input.datepicker({
+                               changeMonth: true,
+                               changeYear: true,
+                               dateFormat: 'yy-mm-dd',
+                               yearRange: '1900:2038' // TODO: make it configurable?
+                       });
+               });
+       }
+};
+
 /**
  * Provides utility functions for date operations.
  */
@@ -2041,8 +2064,7 @@ WCF.Date.Util = {
 /**
  * Handles relative time designations.
  */
-WCF.Date.Time = function() { this.init(); };
-WCF.Date.Time.prototype = {
+WCF.Date.Time = Class.extend({
        /**
         * Initializes relative datetimes.
         */
@@ -2129,7 +2151,7 @@ WCF.Date.Time.prototype = {
                        $(element).text($string.replace(/\%date\%/, $date).replace(/\%time\%/, $time));
                }
        }
-};
+});
 
 /**
  * Hash-like dictionary. Based upon idead from Prototype's hash

diff --git a/wcfsetup/install/files/style/datePicker.less b/wcfsetup/install/files/style/datePicker.less
new file mode 100644 (file)
index 0000000..f413094
--- /dev/null
+++ b/wcfsetup/install/files/style/datePicker.less
@@ -0,0 +1,34 @@
+.ui-datepicker {
+       background-color: rgba(255, 255, 255, .7);
+       border: 1px solid @wcfBorderColor;
+       min-width: 200px;
+       padding: 4px;
+       
+       .borderRadius(5px);
+       
+       .ui-datepicker-prev {
+               float: left;
+       }
+       
+       .ui-datepicker-next {
+               float: right;
+       }
+       
+       .ui-datepicker-title{
+               text-align: center;
+               
+               &:after {
+                       clear: both;
+                       content: "";
+                       display: block;
+               }
+       }
+       
+       .ui-datepicker-calendar {
+               margin-top: 7px;
+               
+               td {
+                       padding: 2px;
+               }
+       }
+}
\ No newline at end of file