Display local date format in date picker

ChangeLog

@@ -12,6 +12,7 @@ New features:
 
 Improvements:
 
+* Display local date format in date picker
 * Configure email settings with the user interface in addition to config file
 * Upgrade Docker image to Alpine Linux 3.4
 * Move task import to a separate section

app/Core/DateParser.php

@@ -14,6 +14,7 @@ class DateParser extends Base
 {
     const DATE_FORMAT = 'm/d/Y';
     const DATE_TIME_FORMAT = 'm/d/Y H:i';
+    const TIME_FORMAT = 'H:i';
 
     /**
      * Get date format from settings
@@ -37,6 +38,17 @@ class DateParser extends Base
         return $this->configModel->get('application_datetime_format', DateParser::DATE_TIME_FORMAT);
     }
 
+    /**
+     * Get time format from settings
+     *
+     * @access public
+     * @return string
+     */
+    public function getUserTimeFormat()
+    {
+        return $this->configModel->get('application_time_format', DateParser::TIME_FORMAT);
+    }
+
     /**
      * List of time formats
      *

app/Helper/AppHelper.php

@@ -93,6 +93,39 @@ class AppHelper extends Base
         return $this->languageModel->getJsLanguageCode();
     }
 
+    /**
+     * Get date format for Jquery DatePicker
+     *
+     * @access public
+     * @return string
+     */
+    public function getJsDateFormat()
+    {
+        $format = $this->dateParser->getUserDateFormat();
+        $format = str_replace('m', 'mm', $format);
+        $format = str_replace('Y', 'yy', $format);
+        $format = str_replace('d', 'dd', $format);
+
+        return $format;
+    }
+
+    /**
+     * Get time format for Jquery Plugin DateTimePicker
+     *
+     * @access public
+     * @return string
+     */
+    public function getJsTimeFormat()
+    {
+        $format = $this->dateParser->getUserTimeFormat();
+        $format = str_replace('H', 'HH', $format);
+        $format = str_replace('i', 'mm', $format);
+        $format = str_replace('g', 'h', $format);
+        $format = str_replace('a', 'tt', $format);
+
+        return $format;
+    }
+
     /**
      * Get current timezone
      *

app/Template/layout.php

@@ -48,7 +48,10 @@
           data-login-url="<?= $this->url->href('AuthController', 'login') ?>"
           data-keyboard-shortcut-url="<?= $this->url->href('DocumentationController', 'shortcuts') ?>"
           data-timezone="<?= $this->app->getTimezone() ?>"
-          data-js-lang="<?= $this->app->jsLang() ?>">
+          data-js-lang="<?= $this->app->jsLang() ?>"
+          data-js-date-format="<?= $this->app->getJsDateFormat() ?>"
+          data-js-time-format="<?= $this->app->getJsTimeFormat() ?>"
+    >
 
     <?php if (isset($no_layout) && $no_layout): ?>
         <?= $content_for_layout ?>

assets/js/src/App.js

@@ -107,23 +107,26 @@ Kanboard.App.prototype.chosen = function() {
 };
 
 Kanboard.App.prototype.datePicker = function() {
-    // Datepicker translation
-    $.datepicker.setDefaults($.datepicker.regional[$("body").data("js-lang")]);
+    var bodyElement = $("body");
+    var dateFormat = bodyElement.data("js-date-format");
+    var timeFormat = bodyElement.data("js-time-format");
+    var lang = bodyElement.data("js-lang");
+
+    $.datepicker.setDefaults($.datepicker.regional[lang]);
+    $.timepicker.setDefaults($.timepicker.regional[lang]);
 
     // Datepicker
     $(".form-date").datepicker({
         showOtherMonths: true,
         selectOtherMonths: true,
-        dateFormat: 'yy-mm-dd',
+        dateFormat: dateFormat,
         constrainInput: false
     });
 
     // Datetime picker
     $(".form-datetime").datetimepicker({
-        controlType: 'select',
-        oneLine: true,
-        dateFormat: 'yy-mm-dd',
-        // timeFormat: 'h:mm tt',
+        dateFormat: dateFormat,
+        timeFormat: timeFormat,
         constrainInput: false
     });
 };