ELEMENTS-1113:expose date format

nuxeo · Sep 3, 2024 · 27637ee · 27637ee
1 parent 890e0b5
commit 27637ee
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/ui/widgets/nuxeo-date-picker.js b/ui/widgets/nuxeo-date-picker.js
@@ -125,6 +125,13 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
           type: Boolean,
           value: false,
         },
+        /**
+         * Use this property to provide custom date format
+         */
+        format: {
+          type: String,
+          value: '',
+        },
       };
     }
 
@@ -188,9 +195,10 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
       moment.locale(window.nuxeo.I18n.language ? window.nuxeo.I18n.language.split('-')[0] : 'en');
       // tell vaadin-date-picker how to display dates since default behavior is US locales (MM-DD-YYYY)
       // this way we can take advantage of moment locale and use the date format that is most suitable for the user
-      this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(moment.localeData().longDateFormat('L')));
+      const convertedFormat = this.format ? this.format : moment.localeData().longformat('L');
+      this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat));
       this.$.date.set('i18n.parseDate', (text) => {
-        const date = this._moment(text, moment.localeData().longDateFormat('L'));
+        const date = this._moment(text, convertedFormat);
         return {
           day: date.get('D'),
           month: date.get('M'),