Added implementation to handle the error on the input directly.

caribou-calendar.html

@@ -66,7 +66,7 @@
         </div>
 
         <caribou-month id="caribouMonth" class="calendarBody" date="{{date}}" month="{{month}}" day="{{day}}" year="{{year}}" year-temp="{{yearTemp}}"
-            hidden$="{{!isMonthView}}" month-error="{{monthError}}" year-error="{{yearError}}" date-error="{{dateError}}"></caribou-month>
+            hidden$="{{!isMonthView}}"></caribou-month>
         <caribou-year id="caribouYear" class="calendarBody" year="{{yearTemp}}" hidden$="{{isMonthView}}"></caribou-year>
 
         <div class="actionButtons">
@@ -106,40 +106,17 @@
                     todayButtonHidden: {
                         type: Boolean,
                         value: false
-                    },
-
-                    monthError: Boolean,
-                    yearError: Boolean,
-                    dateError: Boolean
+                    }
                 };
             }
 
-            static get observers() {
-                return [
-                    '_fireError(monthError,yearError,dateError)'
-                ]
-            }
-
             ready() {
                 super.ready();
                 this.$.caribouMonth.addEventListener("display-year-view", this._toggleView.bind(this));
                 this.$.caribouYear.addEventListener("year-selected", this._toggleView.bind(this));
                 this.getCurrentDate();
             }
 
-            _fireError() {
-
-                if (monthError || yearError || dateError) {
-                    this.dispatchEvent(new CustomEvent('date-error', {
-                        detail: {
-                            message: errorMessage
-                        },
-                        bubbles: true,
-                        composed: true
-                    }));
-                }
-            }
-
             _getYearFocusClass(isMonthView) {
                 return isMonthView ? "focus-secondary" : "focus";
             }

caribou-date-input.html

@@ -75,6 +75,11 @@
                     validator: {
                         type: String,
                         value: 'ssn-validator'
+                    },
+                    invalidDate: {
+                        type: Boolean,
+                        value: false,
+                        notify: true
                     }
                 }
             }
@@ -89,6 +94,15 @@
             }
 
             _computeValue(date1, date2, date3) {
+
+                var date = new Date(date3, date2 - 1, date1);
+                if (date3 < 1900 || !date || (date.getMonth() + 1) != date2) {
+                    this.invalidDate = true;
+                    return;
+                } else
+                    this.invalidDate = false;
+
+
                 if (date1 !== "" && date1 !== undefined && date1 !== null) {
                     this.dateD = Number(date1);
                 }

caribou-datepicker.html

@@ -20,9 +20,10 @@
       }
     </style>
 
-    <paper-input-container id="inputContainer" always-float-label attr-for-value="value" invalid="{{invalid}}">
+    <paper-input-container id="inputContainer" always-float-label attr-for-value="value" invalid="[[invalid]]">
       <label slot="label">{{inputLabel}}</label>
-      <caribou-date-input class="paper-input-input" slot="input" date-d="{{date}}" date-m="{{month}}" date-y="{{year}}"></caribou-date-input>
+      <caribou-date-input class="paper-input-input" slot="input" invalid-date="{{invalid}}" date-d="{{date}}" date-m="{{month}}"
+        date-y="{{year}}"></caribou-date-input>
       <paper-icon-button id="calendarIcon" slot="suffix" on-tap="open" icon="caribou-datepicker-icons:calendar"></paper-icon-button>
       <paper-input-error slot="add-on">{{inputError}}</paper-input-error>
     </paper-input-container>
@@ -59,13 +60,12 @@
 
           inputError: {
             type: String,
-            value: "Error !"
+            value: "Invalid date"
           },
 
           invalid: {
             type: Boolean,
-            value: false,
-            observer: "catch"
+            value: false
           },
 
           date: Number,
@@ -89,12 +89,6 @@
         this.$.datepickerOverlay.addEventListener("date-selected", this._setDateInput.bind(this));
         this.$.datepickerOverlay.addEventListener("ok-selected", this._setDateInput.bind(this));
         this.$.datepickerOverlay.addEventListener("close-overlay", this.closeOverlay.bind(this));
-        this.$.datepickerOverlay.addEventListener("date-error", this._setError.bind(this));
-
-      }
-
-      catch (e) {
-        console.log(e);
       }
 
       open() {
@@ -119,12 +113,6 @@
       closeOverlay() {
         this.$.dropdown.close();
       }
-
-      _setError(e) {
-        this.invalid = true;
-        this.inputError = e.detail.message;
-      }
-
     }
 
     window.customElements.define(CaribouDatepicker.is, CaribouDatepicker);

caribou-month.html

@@ -330,21 +330,6 @@
                     showYear: {
                         type: Boolean,
                         value: false
-                    },
-
-                    yearError: {
-                        type: Boolean,
-                        value: False
-                    },
-
-                    dateError: {
-                        type: Boolean,
-                        value: False
-                    },
-
-                    monthError: {
-                        type: Boolean,
-                        value: False
                     }
                 };
             }
@@ -443,7 +428,7 @@
                 if (day > 0)
                     return minValue ? this.__daysValue[day].min : this.__daysValue[day].max;
                 else
-                    this._dispatchErrorEvent("Invalid day value");
+                    console.error("Invalid day : " + day);
             }
 
             /** 
@@ -456,7 +441,7 @@
                 if (month >= 0)
                     return minValue ? this.__monthsValue[month - 1].min : this.__monthsValue[month - 1].max;
                 else
-                    this._dispatchErrorEvent("Invalid month value");
+                    console.error("Invalid month : " + month);
             }
 
             /**
@@ -473,7 +458,7 @@
                 try {
                     return new Date(year, month - 1, date).getDay();
                 } catch (err) {
-                    console.log(err);
+                    console.error("Invalid day");
                 }
             }
 
@@ -563,15 +548,10 @@
 
             }
 
-            // _toggleYearView() {
-            //     this.dispatchEvent(new CustomEvent('display-year-view', {
-            //         bubbles: true,
-            //         composed: true
-            //     }));
-            // }
-
             /**
              * This function is called when a date is selected to set the selected parameter.
+             * @param {Object} e The event object.
+             * @private
              */
             _dateSelected(e) {
                 // This is important to set the this.date at the end because there is value binded to it,
@@ -591,12 +571,7 @@
                     bubbles: true,
                     composed: true
                 }));
-                console.log("caribou-month", "Date selected : " + this.date + " / " + (Number(this.month) + 1) +
-                    " / " +
-                    this.year);
             }
-
-
         }
 
         window.customElements.define(CaribouMonthElement.is, CaribouMonthElement);

caribou-year.html

@@ -180,8 +180,6 @@
                 //set the last year as the year selected before redraw the array
                 this.setYear(Number(e.currentTarget.dataset.year));
 
-                console.log("caribou-year", "Year selected : " + this.year);
-
                 //The scroll year view has to be set to the top
                 this.scrollTop = 0;