Let WCF.Date.Picker respect the users localization

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index da33326f6fcba7f6975a95db1807c116178d4f63..bfd1ec1712280b10180edc48177dfc3312c776a1 100644 (file)
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -39,9 +39,13 @@
        $(function() {
                WCF.Language.addObject({
                        '__days': [ '{lang}wcf.date.day.sunday{/lang}', '{lang}wcf.date.day.monday{/lang}', '{lang}wcf.date.day.tuesday{/lang}', '{lang}wcf.date.day.wednesday{/lang}', '{lang}wcf.date.day.thursday{/lang}', '{lang}wcf.date.day.friday{/lang}', '{lang}wcf.date.day.saturday{/lang}' ],
+                       '__daysShort': [ '{lang}wcf.date.day.sun{/lang}', '{lang}wcf.date.day.mon{/lang}', '{lang}wcf.date.day.tue{/lang}', '{lang}wcf.date.day.wed{/lang}', '{lang}wcf.date.day.thu{/lang}', '{lang}wcf.date.day.fri{/lang}', '{lang}wcf.date.day.sat{/lang}' ],
+                       '__months': [ '{lang}wcf.date.month.january{/lang}', '{lang}wcf.date.month.february{/lang}', '{lang}wcf.date.month.march{/lang}', '{lang}wcf.date.month.april{/lang}', '{lang}wcf.date.month.may{/lang}', '{lang}wcf.date.month.june{/lang}', '{lang}wcf.date.month.july{/lang}', '{lang}wcf.date.month.august{/lang}', '{lang}wcf.date.month.september{/lang}', '{lang}wcf.date.month.october{/lang}', '{lang}wcf.date.month.november{/lang}', '{lang}wcf.date.month.december{/lang}' ], 
+                       '__monthsShort': [ '{lang}wcf.date.month.jan{/lang}', '{lang}wcf.date.month.feb{/lang}', '{lang}wcf.date.month.mar{/lang}', '{lang}wcf.date.month.apr{/lang}', '{lang}wcf.date.month.may{/lang}', '{lang}wcf.date.month.jun{/lang}', '{lang}wcf.date.month.jul{/lang}', '{lang}wcf.date.month.aug{/lang}', '{lang}wcf.date.month.sep{/lang}', '{lang}wcf.date.month.oct{/lang}', '{lang}wcf.date.month.nov{/lang}', '{lang}wcf.date.month.dec{/lang}' ],
                        'wcf.date.relative.minutes': '{capture assign=relativeMinutes}{lang}wcf.date.relative.minutes{/lang}{/capture}{@$relativeMinutes|encodeJS}',
                        'wcf.date.relative.hours': '{capture assign=relativeHours}{lang}wcf.date.relative.hours{/lang}{/capture}{@$relativeHours|encodeJS}',
                        'wcf.date.relative.pastDays': '{capture assign=relativePastDays}{lang}wcf.date.relative.pastDays{/lang}{/capture}{@$relativePastDays|encodeJS}',
+                       'wcf.date.dateFormat': '{lang}wcf.date.dateFormat{/lang}',
                        'wcf.date.dateTimeFormat': '{lang}wcf.date.dateTimeFormat{/lang}',
                        'wcf.global.button.add': '{lang}wcf.global.button.add{/lang}',
                        'wcf.global.button.cancel': '{lang}wcf.global.button.cancel{/lang}',

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 7292161c0c1f06203bb2227dbe718a50a340987d..a7fca2a5e2772d597b5019d39b4965ad415a7ab2 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -2101,32 +2101,96 @@ WCF.Date = {};
  * Provides a date picker for date input fields.
  */
 WCF.Date.Picker = {
+       _dateFormat: 'yy-mm-dd',
+       
        /**
         * Initializes the jQuery UI based date picker.
         */
        init: function() {
+               this._convertDateFormat();
                this._initDatePicker();
-               
                WCF.DOMNodeInsertedHandler.addCallback('WCF.Date.Picker', $.proxy(this._initDatePicker, this));
        },
        
+       /**
+        * Convert PHPs date() format to jQuery UIs date picker format.
+        */
+       _convertDateFormat: function() {
+               var format = WCF.Language.get('wcf.date.dateFormat');
+               
+               // replacement table
+               // format of PHP date() => format of jQuery UI date picker
+               //
+               // No equivalence in PHP date():
+               // oo   day of the year (three digit)
+               // !    Windows ticks (100ns since 01/01/0001)
+               //
+               // No equivalence in jQuery UI date picker:
+               // N    ISO-8601 numeric representation of the day of the week
+               // S    English ordinal suffix for the day of the month, 2 characters
+               // w    Numeric representation of the day of the week
+               // W    ISO-8601 week number of year, weeks starting on Monday
+               // t    Number of days in the given month
+               // L    Whether it's a leap year
+               var replacementTable = {
+                       // day
+                       'd': 'dd',
+                       'D': 'D',
+                       'j': 'd',
+                       'l': 'DD',
+                       'z': 'o',
+
+                       // month
+                       'F': 'MM',
+                       'm': 'mm',
+                       'M': 'M',
+                       'n': 'm',
+
+                       // year
+                       'o': 'yy',
+                       'Y': 'yy',
+                       'y': 'y',
+
+                       // timestamp
+                       'U': '@'
+               };
+               
+               // do the actual replacement
+               // this is not perfect, but a basic implementation and should work in 99% of the cases
+               // TODO: support literals (magics are escaped in PHP date() by an \, in jQuery UI DatePicker they are enclosed in '')
+               this._dateFormat = format.replace(/([^dDjlzFmMnoYyU\\]*(?:\\.[^dDjlzFmMnoYyU\\]*)*)(d|D|j|l|z|F|m|M|n|o|Y|y|U)/g, function(match, part1, part2, offset, string) {
+                       $.each(replacementTable, function(key, item) {
+                               if(part2 == key) {
+                                       part2 = item;
+                               }
+                       });
+                       return part1 + part2;
+               });
+       },
+       
        /**
         * Initializes the date picker for valid fields.
         */
        _initDatePicker: function() {
-               $('input[type=date]:not(.jsDatePicker)').each(function(index, input) {
+               $('input[type=date]:not(.jsDatePicker)').each($.proxy(function(index, input) {
                        // do *not* use .attr()
                        var $input = $(input).prop('type', 'text').addClass('jsDatePicker');
                        
-                       // TODO: we should support all these braindead date formats, at least within output
                        $input.datepicker({
                                changeMonth: true,
                                changeYear: true,
                                showOtherMonths: true,
-                               dateFormat: 'yy-mm-dd',
-                               yearRange: '1900:2038' // TODO: make it configurable?
+                               dateFormat: this._dateFormat,
+                               yearRange: '1900:2038', // TODO: make it configurable?
+                               
+                               // language
+                               dayNames: WCF.Language.get('__days'),
+                               dayNamesMin: WCF.Language.get('__daysShort'),
+                               dayNamesShort: WCF.Language.get('__daysShort'),
+                               monthNames: WCF.Language.get('__months'),
+                               monthNamesShort: WCF.Language.get('__monthsShort')
                        });
-               });
+               }, this));
        }
 };