From 6a897b1072ffa41100d5e6864f7bc396c7ca8d2e Mon Sep 17 00:00:00 2001
From: jfoliveira <jefersonfoliveira@gmail.com>
Date: Mon, 18 Apr 2016 16:11:40 -0300
Subject: [PATCH] Datepicker: allow specify display format (#1919)

* Apply datepicker `format` property reading from config.

* Using the format property on partial.
---
 modules/backend/formwidgets/DatePicker.php                 | 7 +++++++
 .../backend/formwidgets/datepicker/assets/js/datepicker.js | 7 +++++--
 .../formwidgets/datepicker/partials/_datepicker.htm        | 4 +++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/modules/backend/formwidgets/DatePicker.php b/modules/backend/formwidgets/DatePicker.php
index e6d38ba97..70980753a 100644
--- a/modules/backend/formwidgets/DatePicker.php
+++ b/modules/backend/formwidgets/DatePicker.php
@@ -19,6 +19,11 @@ class DatePicker extends FormWidgetBase
     // Configurable properties
     //
 
+    /**
+     * @var string Display format.
+     */
+    public $format = 'YYYY-MM-DD';
+
     /**
      * @var bool Display mode: datetime, date, time.
      */
@@ -49,6 +54,7 @@ class DatePicker extends FormWidgetBase
     public function init()
     {
         $this->fillFromConfig([
+            'format',
             'mode',
             'minDate',
             'maxDate',
@@ -119,6 +125,7 @@ class DatePicker extends FormWidgetBase
 
         $this->vars['value'] = $value ?: '';
         $this->vars['field'] = $this->formField;
+        $this->vars['format'] = $this->format;
         $this->vars['mode'] = $this->mode;
         $this->vars['minDate'] = $this->minDate;
         $this->vars['maxDate'] = $this->maxDate;
diff --git a/modules/backend/formwidgets/datepicker/assets/js/datepicker.js b/modules/backend/formwidgets/datepicker/assets/js/datepicker.js
index e81e3c63d..4938552aa 100644
--- a/modules/backend/formwidgets/datepicker/assets/js/datepicker.js
+++ b/modules/backend/formwidgets/datepicker/assets/js/datepicker.js
@@ -1,8 +1,9 @@
 /*
  * DatePicker plugin
- * 
+ *
  * Data attributes:
  * - data-control="datepicker" - enables the plugin on an element
+ * - data-format="value" - display format
  * - data-min-date="value" - minimum date to allow
  * - data-max-date="value" - maximum date to allow
  * - data-year-range="value" - range of years to display
@@ -38,6 +39,7 @@
             minDate: new Date(options.minDate),
             maxDate: new Date(options.maxDate),
             yearRange: options.yearRange,
+            format: options.format,
             setDefaultDate: moment(this.$input.val()).toDate(),
             i18n: $.oc.lang.get('datepicker'),
             onOpen: function() {
@@ -57,6 +59,7 @@
     DatePicker.DEFAULTS = {
         minDate: '2000-01-01',
         maxDate: '2020-12-31',
+        format: 'YYYY-MM-DD',
         yearRange: 10
     }
 
@@ -93,4 +96,4 @@
         $('[data-control="datepicker"]').datePicker()
     });
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/modules/backend/formwidgets/datepicker/partials/_datepicker.htm b/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
index 88f0838ff..171caf2dd 100644
--- a/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
+++ b/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
@@ -8,6 +8,7 @@
             id="<?= $this->getId() ?>"
             class="field-datepicker"
             data-control="datepicker"
+            data-format="<?= $format ?>"
             data-min-date="<?= $minDate ?>"
             data-max-date="<?= $maxDate ?>">
             <div class="input-with-icon right-align">
@@ -32,6 +33,7 @@
                     id="<?= $this->getId() ?>"
                     class="field-datepicker"
                     data-control="datepicker"
+                    data-format="<?= $format ?>"
                     data-min-date="<?= $minDate ?>"
                     data-max-date="<?= $maxDate ?>">
                     <div class="input-with-icon right-align">
@@ -95,4 +97,4 @@
 
     <?php endif ?>
 
-<?php endif ?>
\ No newline at end of file
+<?php endif ?>