Merge pull request #784 from janibolkvadze/FSPE-6800-Add-support-of-r…

…eset-method-to-Date-Picker-web-component [FSPE-6800] Added support of resetDate to Date Picker wc
CenturyLinkCloud · Dec 22, 2020 · dc0bfd5 · dc0bfd5
2 parents 06b1e02 + 95a58d6
commit dc0bfd5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/src/custom-elements/docs/docs.json b/src/custom-elements/docs/docs.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2020-12-17T19:13:01",
+  "timestamp": "2020-12-22T12:02:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "1.8.9",
@@ -911,6 +911,17 @@
           "docs": "Gets date",
           "docsTags": []
         },
+        {
+          "name": "resetDate",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "resetDate() => Promise<void>",
+          "parameters": [],
+          "docs": "Resets date",
+          "docsTags": []
+        },
         {
           "name": "setDate",
           "returns": {

diff --git a/src/custom-elements/src/components/date-picker/date-picker.tsx b/src/custom-elements/src/components/date-picker/date-picker.tsx
@@ -155,6 +155,14 @@ export class DatePicker {
     this.value = date;
   }
 
+  /**
+   * Resets date
+   */
+  @Method()
+  async resetDate() {
+    this.value = null;
+  }
+
   /**
    * Gets date
    */

diff --git a/src/custom-elements/src/components/date/date.tsx b/src/custom-elements/src/components/date/date.tsx
@@ -75,12 +75,18 @@ export class Date {
 
   @Watch('value')
   dateChanged(newValue: string, oldValue: string) {
-    if (newValue !== oldValue) {
-      this._vm.date = newValue ? dayjs(newValue) : null;
-      if (this._vm.date && !this._vm.date.isValid()) {
-        throw new Error(`Date ${newValue} has an invalid format. `);
+    if (newValue !== oldValue && (newValue || oldValue)) {
+      if (newValue) {
+        this._vm.date = newValue ? dayjs(newValue) : null;
+        if (this._vm.date && !this._vm.date.isValid()) {
+          throw new Error(`Date ${newValue} has an invalid format. `);
+        }
+        this.viewMonth = this._vm.date;
+      } else {
+        this._initCalendarViewModel();
+        this.viewMonth = this.value ? this.fromString(this.value) : dayjs();
+        this._updateViewMonth();
       }
-      this.viewMonth = this._vm.date;
     }
   }