docs: improve datepicker/datetimepicker placeholder formatting info (#…

…2206)

* datepicker placeholder should use datepicker format

* improve documentation about datepicker/datetimepicker formatting placeholders

* do not assume placeholder

* use old placeholder

apps/docs/src/app/core/component-docs/date-picker/date-picker-docs.component.html

@@ -50,7 +50,10 @@
 <fd-docs-section-title [id]="'combobox-formatting'" [componentName]="'datePicker'">
     Formatting
 </fd-docs-section-title>
-<description>Providing a custom format for the dates is possible through providing a service.</description>
+<description>
+    Providing a custom format for the dates is possible through providing a service.
+    Note that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as well.
+</description>
 <component-example>
     <fd-date-picker-format-example></fd-date-picker-format-example>
 </component-example>

apps/docs/src/app/core/component-docs/date-picker/examples/date-picker-format-example.component.ts

@@ -24,11 +24,11 @@ export class DateFormatDashes extends DateFormatParser {
 @Component({
     selector: 'fd-date-picker-format-example',
     template: `
-        <fd-date-picker [(ngModel)]="date" placeholder="yyyy/mm/dd"></fd-date-picker>
+        <fd-date-picker [(ngModel)]="date" placeholder="dd-mm-yyyy"></fd-date-picker>
         <br/>
         <div>Selected Date: {{date?.toDateString()}}</div>
         <br/>
-        <fd-date-picker placeholder="yyyy/mm/dd to yyyy/mm/dd"
+        <fd-date-picker placeholder="dd-mm-yyyy to dd-mm-yyyy"
                         [type]="'range'" [(ngModel)]="selectedRange"></fd-date-picker>
         <br/>
         <div>Selected First Date: {{selectedRange?.start?.toDateString()}}</div>

apps/docs/src/app/core/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -58,7 +58,10 @@
 <fd-docs-section-title [id]="'datetime-picker-formatting'" [componentName]="'datetime-picker'">
     Formatting
 </fd-docs-section-title>
-<description>Providing a custom format for the dates is possible through providing a service.</description>
+<description>
+    Providing a custom format for the dates is possible through providing a service.
+    Note that when providing a custom format, the <code>[placeholder]</code> input should be set to match the new format as well.
+</description>
 <component-example>
     <fd-datetime-format-example></fd-datetime-format-example>
 </component-example>

apps/docs/src/app/core/component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component.html

@@ -1,3 +1,3 @@
-<fd-datetime-picker [(ngModel)]="this.date"></fd-datetime-picker>
+<fd-datetime-picker [placeholder]="'yyyy-mm-dd HHhMMmSSs'" [(ngModel)]="this.date"></fd-datetime-picker>
 <br /> <br />
 Selected: {{date ? date.toLocaleDateString() : 'null'}}