From 27637ee04432ee8d84f1450e50f28a19b0711d39 Mon Sep 17 00:00:00 2001 From: swarnadipa-dev Date: Tue, 3 Sep 2024 14:28:04 +0530 Subject: [PATCH 1/4] ELEMENTS-1113:expose date format --- ui/widgets/nuxeo-date-picker.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/widgets/nuxeo-date-picker.js b/ui/widgets/nuxeo-date-picker.js index fcfc33f8b..3e1be5690 100644 --- 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'), From 1c736ad6a6f8d6b4093e72e24c81ffc19812908e Mon Sep 17 00:00:00 2001 From: swarnadipa-dev Date: Tue, 3 Sep 2024 20:27:55 +0530 Subject: [PATCH 2/4] refactored --- ui/widgets/nuxeo-date-picker.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/widgets/nuxeo-date-picker.js b/ui/widgets/nuxeo-date-picker.js index 3e1be5690..a0f31c071 100644 --- a/ui/widgets/nuxeo-date-picker.js +++ b/ui/widgets/nuxeo-date-picker.js @@ -195,10 +195,12 @@ 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 - const convertedFormat = this.format ? this.format : moment.localeData().longformat('L'); - this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat)); + // const convertedFormat = this.format ? this.format : moment.localeData().longformat('L'); + this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(this.format ? this.format : moment.localeData().longDateFormat('L'))); + // this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat)); this.$.date.set('i18n.parseDate', (text) => { - const date = this._moment(text, convertedFormat); + // const date = this._moment(text, convertedFormat); + const date = this._moment(text, this.format ? this.format : moment.localeData().longDateFormat('L')); return { day: date.get('D'), month: date.get('M'), From 442dc339dd16e9ae415d7058a5d08f5b017d3e3a Mon Sep 17 00:00:00 2001 From: swarnadipa-dev Date: Tue, 3 Sep 2024 20:32:28 +0530 Subject: [PATCH 3/4] fixed lint issue --- ui/widgets/nuxeo-date-picker.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/ui/widgets/nuxeo-date-picker.js b/ui/widgets/nuxeo-date-picker.js index a0f31c071..0b8763595 100644 --- a/ui/widgets/nuxeo-date-picker.js +++ b/ui/widgets/nuxeo-date-picker.js @@ -195,12 +195,14 @@ 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 - // const convertedFormat = this.format ? this.format : moment.localeData().longformat('L'); - this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(this.format ? this.format : moment.localeData().longDateFormat('L'))); - // this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat)); + // const convertedFormat = this.format ? this.format : moment.localeData().longformat('L'); + this.$.date.set('i18n.formatDate', (date) => + this._moment(date).format(this.format ? this.format : moment.localeData().longDateFormat('L')), + ); + // this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat)); this.$.date.set('i18n.parseDate', (text) => { - // const date = this._moment(text, convertedFormat); - const date = this._moment(text, this.format ? this.format : moment.localeData().longDateFormat('L')); + // const date = this._moment(text, convertedFormat); + const date = this._moment(text, this.format ? this.format : moment.localeData().longDateFormat('L')); return { day: date.get('D'), month: date.get('M'), From 9f997ea1ac219ad0c57c653180a1c9d129db62bb Mon Sep 17 00:00:00 2001 From: swarnadipa-dev Date: Tue, 3 Sep 2024 20:59:41 +0530 Subject: [PATCH 4/4] removed commented code --- ui/widgets/nuxeo-date-picker.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/widgets/nuxeo-date-picker.js b/ui/widgets/nuxeo-date-picker.js index 0b8763595..0091e8a15 100644 --- a/ui/widgets/nuxeo-date-picker.js +++ b/ui/widgets/nuxeo-date-picker.js @@ -195,13 +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 - // const convertedFormat = this.format ? this.format : moment.localeData().longformat('L'); this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(this.format ? this.format : moment.localeData().longDateFormat('L')), ); - // this.$.date.set('i18n.formatDate', (date) => this._moment(date).format(convertedFormat)); this.$.date.set('i18n.parseDate', (text) => { - // const date = this._moment(text, convertedFormat); const date = this._moment(text, this.format ? this.format : moment.localeData().longDateFormat('L')); return { day: date.get('D'),