Merge pull request #826 from dxc-technology/fix-762

[Minor] Added new prop defaultValue in date input

Author: Jialecl

projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html

@@ -18,6 +18,11 @@
       uncontrolled and the value will be managed internally by the component.
     </td>
   </tr>
+  <tr>
+    <td>defaultValue: string</td>
+    <td></td>
+    <td>Initial value of the date input, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>label: string</td>
     <td></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/date-input-preview/date-input-preview.component.html

@@ -2,18 +2,36 @@
   <dxc-heading text="Light Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#FFFFFF">
     <tbuilder-component-mode text="Default">
-      <dxc-date-input label="Date of birth" format="dd-MM-yyyy" margin="xsmall" helperText="helper text">
+      <dxc-date-input
+        defaultValue="04-10-1996"
+        value="22-10-1996"
+        label="Date of birth"
+        format="dd-MM-yyyy"
+        margin="xsmall"
+        helperText="helper text"
+      >
       </dxc-date-input>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Disabled">
-      <dxc-date-input label="Date of birth" format="dd-MM-yyyy" margin="xsmall" helperText="helper text" disabled>
+      <dxc-date-input
+        label="Date of birth"
+        format="dd-MM-yyyy"
+        margin="xsmall"
+        helperText="helper text"
+        disabled
+      >
       </dxc-date-input>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Error">
-      <dxc-date-input label="Date of birth" format="dd-MM-yyyy" margin="xsmall" helperText="helper text"
-        error="Error date">
+      <dxc-date-input
+        label="Date of birth"
+        format="dd-MM-yyyy"
+        margin="xsmall"
+        helperText="helper text"
+        error="Error date"
+      >
       </dxc-date-input>
     </tbuilder-component-mode>
   </background-provider>

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.html

@@ -1,6 +1,7 @@
 <dxc-text-input
   #dxcInput
   [value]="renderedValue"
+  [defaultValue]="defaultValue"
   [clearable]="clearable"
   [error]="error"
   [label]="label"

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts

@@ -150,6 +150,7 @@ describe("DxcDate", () => {
     await render(DxcDateInputComponent, {
       componentProperties: {
         label: "test-input",
+        defaultValue: "22-10-1998",
         onChange: {
           emit: onChange,
         } as any,
@@ -173,7 +174,7 @@ describe("DxcDate", () => {
         },
       ],
     });
-
+    expect(screen.getByDisplayValue("22-10-1998"));
     const input = <HTMLInputElement>screen.getByRole("textbox");
     input.focus();
     fireEvent.input(input, { target: { value: newValue } });
@@ -446,6 +447,7 @@ describe("DxcDate", () => {
       componentProperties: {
         label: "test-input",
         value: "03-12-1995",
+        defaultValue: "12-04-1995",
         onChange: {
           emit: onChange,
         } as any,
@@ -472,6 +474,7 @@ describe("DxcDate", () => {
         },
       ],
     });
+    expect(screen.getByDisplayValue("03-12-1995"));
     const input = <HTMLInputElement>screen.getByRole("textbox");
 
     input.focus();

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts

@@ -27,8 +27,6 @@ import {
   Spacing,
 } from "./dxc-date-input.types";
 
-
-
 @Component({
   selector: "dxc-date-input",
   templateUrl: "./dxc-date-input.component.html",
@@ -49,6 +47,10 @@ export class DxcDateInputComponent implements OnInit {
    * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
    */
   @Input() value: string;
+  /**
+   * Initial value of the date input, only when it is uncontrolled.
+   */
+  @Input() defaultValue: string;
   /**
    * Helper text to be placed above the date.
    */
@@ -140,6 +142,7 @@ export class DxcDateInputComponent implements OnInit {
     tabIndexValue: 0,
     placeholder: false,
     autocomplete: "off",
+    defaultValue: undefined,
   });
 
   /**

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.types.ts

@@ -13,6 +13,7 @@ export interface DateInputProperties {
   size?: "medium" | "large" | "fillParent";
   tabIndexValue?: number;
   autocomplete?: string;
+  defaultValue?: string;
 }
 
 export type Space =