Implementation of the date selection and the swith of the year and mo…

…nth view.
caribouflex · Mar 20, 2018 · 1e65b88 · 1e65b88
1 parent 550b95c
commit 1e65b88
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 84 deletions.
diff --git a/caribou-date-input.html b/caribou-date-input.html
@@ -56,9 +56,9 @@
                         notify: true,
                         type: String
                     },
-                    _date1: Number,
-                    _date2: Number,
-                    _date3: Number,
+                    _date1: String,
+                    _date2: String,
+                    _date3: String,
                     dateD: {
                         type: Number,
                         notify: true
@@ -89,27 +89,27 @@
 
             _computeValue(date1, date2, date3) {
                 if (date1 !== "" && date1 !== undefined && date1 !== null) {
-                    this.dateD = date1;
+                    this.dateD = Number(date1);
                 }
                 if (date2 !== "" && date2 !== undefined && date2 !== null) {
-                    this.dateM = date2;
+                    this.dateM = Number(date2);
                 }
                 if (date3 !== "" && date3 !== undefined && date3 !== null) {
-                    this.dateY = date3;
+                    this.dateY = Number(date3);
                 }
                 this.value = date1 + '-' + date2 + '-' + date3;
             }
 
             _setDateD(dateD) {
-                this._date1 = dateD;
+                this._date1 = dateD.toString();
             }
 
             _setDateM(dateM) {
-                this._date2 = dateM;
+                this._date2 = dateM.toString();
             }
 
             _setDateY(dateY) {
-                this._date3 = dateY;
+                this._date3 = dateY.toString();
             }
         }
 

diff --git a/caribou-datepicker-overlay.html b/caribou-datepicker-overlay.html
@@ -13,8 +13,8 @@
         </style>
 
         <!-- <caribou-calendar></caribou-calendar> -->
-        <caribou-month date="{{date}}" month={{month}} year="{{year}}"></caribou-month>
-        <caribou-year year="{{year}}"></caribou-year>
+        <caribou-month id="caribouMonth" date="{{date}}" month={{month}} year="{{year}}" year-temp="{{yearTemp}}"></caribou-month>
+        <caribou-year id="caribouYear" year="{{yearTemp}}" hidden></caribou-year>
     </template>
 
     <script>
@@ -50,6 +50,19 @@
 
             ready() {
                 super.ready();
+                this.$.caribouMonth.addEventListener("display-year-view", this._toggleView.bind(this));
+                this.$.caribouYear.addEventListener("year-selected", this._toggleView.bind(this));
+            }
+
+            _toggleView(e) {
+                if (e.type === "display-year-view") {
+                    this.$.caribouMonth.setAttribute("hidden", true);
+                    this.$.caribouYear.removeAttribute("hidden");
+                } else if (e.type === "year-selected") {
+                    this.$.caribouMonth.yearTemp = Number(e.detail.year);
+                    this.$.caribouYear.setAttribute("hidden", true);
+                    this.$.caribouMonth.removeAttribute("hidden");
+                }
             }
         }