Fixed issue rjsf-team#297 - Reordering the alt-date Widget 3 Select B…

…oxes
shvekyha · Mar 3, 2021 · 7565025 · 7565025 · heath-freenome · Feb 18, 2022
1 parent b78d9ef
commit 7565025
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git 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
@@ -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 },