feat(core): add input to customize the datetime format of specific datetime-picker component (#12273)

* feat(core): add feature to customize the datetime format of specific datetime-picker component

With this feature a custom format can be applied to any date-picker or datetime-picker component.
Currently, date-picker or datetime-picker component datetime format depends on the
DATE_TIME_FORMATS value which applies to all the date-picker component.

Closes #12251

* test(e2e): fix the date time picker in reactive form test

Change the scroll view index to focus on correct date time picker in reactive form component.

---------

Co-authored-by: Chandan Kumar Shaw <[email protected]>

Author: shawchandankumar

libs/core/date-picker/date-picker.component.ts

@@ -143,6 +143,10 @@ export class DatePickerComponent<D>
     @Input()
     required = false;
 
+    /** Define a custom datetime format. Can be a string for DayjsDatetimeAdapter or object for FdDatetimeAdapter */
+    @Input()
+    customDateTimeFormat: unknown;
+
     /** Text displayed in message */
     @Input()
     set message(message: string) {
@@ -947,6 +951,9 @@ export class DatePickerComponent<D>
 
     /** @hidden */
     private _formatDate(date: Nullable<D>): string {
+        if (this.customDateTimeFormat) {
+            return this._dateTimeAdapter.format(date, this.customDateTimeFormat);
+        }
         return this._dateTimeAdapter.format(date, this._dateTimeFormats.display.dateInput);
     }
 

libs/core/datetime-picker/datetime-picker.component.ts

@@ -140,6 +140,10 @@ export class DatetimePickerComponent<D>
     @Input()
     required = false;
 
+    /** Define a custom datetime format. Can be a string for DayjsDatetimeAdapter or object for FdDatetimeAdapter  */
+    @Input()
+    customDateTimeFormat: unknown;
+
     /**
      * Whether the time component should be meridian (am/pm).
      * Default value is based on the current locale format option
@@ -813,10 +817,9 @@ export class DatetimePickerComponent<D>
      * Format date time entity.
      */
     private _formatDateTime(dateTime: D): string {
-        const formattedDate: string = this._dateTimeAdapter.format(
-            dateTime,
-            this._dateTimeFormats.display.dateTimeInput
-        );
+        const formattedDate: string = this.customDateTimeFormat
+            ? this._dateTimeAdapter.format(dateTime, this.customDateTimeFormat)
+            : this._dateTimeAdapter.format(dateTime, this._dateTimeFormats.display.dateTimeInput);
         return formattedDate || '';
     }
 

libs/docs/core/date-picker/date-picker-docs.component.html

@@ -67,10 +67,12 @@
 
 <fd-docs-section-title id="formatting" componentName="date-picker"> Formatting </fd-docs-section-title>
 <description>
-    Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config. Note
-    that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as
-    well. The <code>dateFormat</code> pipe can also be utilized to convert the date into a string according to the
-    provided format.
+    Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config, this
+    format applies to all the date-picker component. It is possible to override the custom format for any specific
+    date-picker component through providing <code>[customDateTimeFormat]</code> input. Note that when providing a custom
+    format, the <code>[placeholder]</code> input should be set to match the new format as well. The
+    <code>dateFormat</code> pipe can also be utilized to convert the date into a string according to the provided
+    format.
 </description>
 <component-example>
     <fd-date-picker-format-example></fd-date-picker-format-example>

libs/docs/core/date-picker/examples/date-picker-format-example.component.ts

@@ -39,6 +39,14 @@ export const CUSTOM_FD_DATETIME_FORMATS: DateTimeFormats = {
         <br />
         <div>Selected Date: {{ date | dateFormat }}</div>
         <br />
+        <fd-date-picker
+            [(ngModel)]="date"
+            [customDateTimeFormat]="componentSpecificDateTimeFormat"
+            placeholder="dd-mm-yyyy"
+        ></fd-date-picker>
+        <br />
+        <div>Selected Date: {{ date | dateFormat }}</div>
+        <br />
         <fd-date-picker placeholder="mm/dd/yy to mm/dd/yy" type="range" [(ngModel)]="selectedRange"></fd-date-picker>
         <br />
         <div>Selected First Date: {{ selectedRange?.start | dateFormat }}</div>
@@ -60,6 +68,11 @@ export const CUSTOM_FD_DATETIME_FORMATS: DateTimeFormats = {
 export class DatePickerFormatExampleComponent {
     date: FdDate;
     selectedRange: Nullable<DateRange<FdDate>>;
+    componentSpecificDateTimeFormat = {
+        year: '2-digit',
+        month: 'long',
+        day: '2-digit'
+    };
 
     constructor(private datetimeAdapter: DatetimeAdapter<FdDate>) {
         const today = this.datetimeAdapter.today();

libs/docs/core/datetime-picker/datetime-picker-docs.component.html

@@ -48,10 +48,12 @@
 <separator></separator>
 <fd-docs-section-title id="formatting" componentName="datetime-picker"> Formatting </fd-docs-section-title>
 <description>
-    Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config. Note
-    that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as
-    well. The <code>dateTimeFormat</code> pipe can also be utilized to convert the date into a string according to the
-    provided format.
+    Providing a custom format for the dates is possible through providing <code>DATE_TIME_FORMATS</code> config, this
+    format applies to all the datetime-picker component. It is possible to override the custom format for any specific
+    datetime-picker component through providing <code>[customDateTimeFormat]</code> input. Note that when providing a
+    custom format, the <code>[placeholder]</code> input should be set to match the new format as well. The
+    <code>dateTimeFormat</code> pipe can also be utilized to convert the date into a string according to the provided
+    format.
 </description>
 <component-example>
     <fd-datetime-format-example></fd-datetime-format-example>

libs/docs/core/datetime-picker/e2e/date-time-picker.e2e-spec.ts

@@ -293,26 +293,26 @@ describe('Datetime picker suite', () => {
             // issue with timeouts
             return;
         }
-        await scrollIntoView(datePickerButton, 5);
-        await click(datePickerButton, 5);
+        await scrollIntoView(datePickerButton, 6);
+        await click(datePickerButton, 6);
         await clickDayInCalendarButtonByValue(currentDay);
         await selectHoursMinutesAndPeriod();
         await click(okButton);
-        await expect(await getValue(datePickerInput, 5)).toEqual(date2);
+        await expect(await getValue(datePickerInput, 6)).toEqual(date2);
     });
 
     it('verify date time picker i18n example', async () => {
-        await scrollIntoView(datePickerButton, 7);
+        await scrollIntoView(datePickerButton, 8);
         for (let i = 0; i < i18n.length; i++) {
             // skipped due to https://github.com/SAP/fundamental-ngx/issues/6304
             if (!browserIsFirefox && i !== 4) {
                 await click(optionButton);
                 await click(await getOptionById(i18n[i]));
-                await click(datePickerButton, 7);
+                await click(datePickerButton, 8);
                 await waitForElDisplayed(calendarExpanded);
                 await selectHoursAndMinutes();
                 await click(okButton);
-                await expect(await getValue(datePickerInput, 7)).toContain(dates[i]);
+                await expect(await getValue(datePickerInput, 8)).toContain(dates[i]);
             }
         }
     });

libs/docs/core/datetime-picker/examples/datetime-format-example/datetime-format-example.component.html

@@ -1,5 +1,8 @@
 <fd-datetime-picker placeholder="MMM DD, YYYY, h:mm a" [(ngModel)]="date"></fd-datetime-picker>
 <br />
+Selected: {{ date | dateTimeFormat: 'null' }}
 <br />
 <br />
-Selected: {{ date | dateTimeFormat: 'null' }}
+<fd-datetime-picker [customDateTimeFormat]="specificDateTimeFormat" [(ngModel)]="date"></fd-datetime-picker>
+<br />
+Selected: {{ date }}

libs/docs/core/datetime-picker/examples/datetime-format-example/datetime-format-example.component.ts

@@ -49,4 +49,11 @@ export const CUSTOM_FD_DATETIME_FORMATS: DateTimeFormats = {
 })
 export class DatetimeFormatExampleComponent {
     date = FdDate.getNow();
+    specificDateTimeFormat = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
 }

libs/docs/core/dayjs-datetime-adapter/dayjs-datetime-adapter-docs.component.html

@@ -38,6 +38,7 @@
     The <code>DATE_TIME_FORMATS</code> object is a collection of formats that components such as datepicker, timepicker,
     etc. uses when parsing and displaying dates. These formats are passed through to the <code>DatetimeAdapter</code>.
     The <code>DayjsDatetimeAdapter</code> has <code>DAYJS_DATETIME_FORMATS</code>, provided in the code of the example.
+    To customize a datetime format for a specific datetime component use <code>[customDateTimeFormat]</code> input.
     <br />
     <br />
     These formats could be customized, but be sure they are compatible with the DatetimeAdapter.

libs/docs/core/dayjs-datetime-adapter/examples/dayjs-datetime-formats-example.component.html

@@ -1 +1,2 @@
 <fd-datetime-picker [(ngModel)]="date"></fd-datetime-picker>
+<fd-datetime-picker [(ngModel)]="date" [customDateTimeFormat]="'YYYY-MM-DD h:mm A'"></fd-datetime-picker>