From 75650251b943e604132e0c1d0381c97fbcef3d6a Mon Sep 17 00:00:00 2001
From: hadas <hadas@xmpie.com>
Date: Wed, 3 Mar 2021 20:54:34 +0200
Subject: [PATCH] Fixed issue #297 - Reordering the alt-date Widget 3 Select
 Boxes

---
 docs/usage/widgets.md                         |  3 +-
 .../src/components/widgets/AltDateWidget.js   | 45 +++++++++++++++----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/docs/usage/widgets.md b/docs/usage/widgets.md
index 7bff4054d5..a34296c6fe 100644
--- a/docs/usage/widgets.md
+++ b/docs/usage/widgets.md
@@ -64,7 +64,7 @@ Please note that, even though they are standardized, `datetime-local` and `date`
 
 ![](https://i.imgur.com/VF5tY60.png)
 
-You can customize the list of years displayed in the `year` dropdown by providing a ``yearsRange`` property to ``ui:options`` in your uiSchema. Its also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options.
+You can customize the list of years displayed in the `year` dropdown by providing a ``yearsRange`` property to ``ui:options`` in your uiSchema. Its also possible to remove the `Now` and `Clear` buttons with the `hideNowButton` and `hideClearButton` options. Also, you can provide a ``format`` property for controlling the order of display (D for day, M for month, Y for year), default is 'YMD'.
 
 ```jsx
 const schema = {
@@ -77,6 +77,7 @@ const uiSchema = {
     yearsRange: [1980, 2030],
     hideNowButton: true,
     hideClearButton: true,
+    format: 'DMY'
   }
 };
 
diff --git a/packages/core/src/components/widgets/AltDateWidget.js b/packages/core/src/components/widgets/AltDateWidget.js
index 084e8ef053..71608a0451 100644
--- a/packages/core/src/components/widgets/AltDateWidget.js
+++ b/packages/core/src/components/widgets/AltDateWidget.js
@@ -105,15 +105,42 @@ class AltDateWidget extends Component {
   get dateElementProps() {
     const { time, options } = this.props;
     const { year, month, day, hour, minute, second } = this.state;
-    const data = [
-      {
-        type: "year",
-        range: options.yearsRange,
-        value: year,
-      },
-      { type: "month", range: [1, 12], value: month },
-      { type: "day", range: [1, 31], value: day },
-    ];
+    let data;
+    switch (options.format) {
+      case "MDY":
+        data = [
+          { type: "month", range: [1, 12], value: month },
+          { type: "day", range: [1, 31], value: day },
+          {
+            type: "year",
+            range: options.yearsRange,
+            value: year,
+          },
+        ];
+        break;
+      case "DMY":
+        data = [
+          { type: "day", range: [1, 31], value: day },
+          { type: "month", range: [1, 12], value: month },
+          {
+            type: "year",
+            range: options.yearsRange,
+            value: year,
+          },
+        ];
+        break;
+      case "YMD":
+      default:
+        data = [
+          {
+            type: "year",
+            range: options.yearsRange,
+            value: year,
+          },
+          { type: "month", range: [1, 12], value: month },
+          { type: "day", range: [1, 31], value: day },
+        ];
+    }
     if (time) {
       data.push(
         { type: "hour", range: [0, 23], value: hour },