(fix/enhancement) HTML5 input date support #230

Author: gselderslaghs

sass/components/forms/_input-fields.scss

@@ -317,4 +317,27 @@ textarea {
       margin: 5px 15px;
     }
   }
-}
+}
+
+/* Datepicker date input fields */
+.datepicker-date-input {
+  position: relative;
+  text-indent: -9999px;
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 1.10rem;
+    content: attr(data-date);
+    color: var(--input-color);
+    text-indent: 0;
+  }
+
+  &:focus-visible {
+    text-indent: 0;
+  }
+
+  &:focus-visible:after {
+    text-indent: -9999px;
+  }
+}

src/datepicker.ts

@@ -301,6 +301,11 @@ export class Datepicker extends Component<DatepickerOptions> {
       this.gotoDate(new Date());
     }
     this.isOpen = false;
+
+    // HTML5 input date field support
+    if(this.el.type == 'date') {
+      this.el.classList.add('datepicker-date-input');
+    }
   }
 
   static get defaults() {
@@ -417,6 +422,10 @@ export class Datepicker extends Component<DatepickerOptions> {
     if (typeof format === 'function') return format(this.date);
     if (!Datepicker._isDate(this.date)) return '';
     // String Format
+    return this.formatDate(format);
+  }
+
+  formatDate(format) {
     const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
     const formattedDate = formatArray
       .map(label => this.formats[label] ? this.formats[label]() : label)
@@ -458,11 +467,23 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
   }
 
+  /**
+   * Sets the data-date attribute on the date input field
+   */
+  setDataDate() {
+    this.el.setAttribute('data-date', this.toString())
+  }
+
   /**
    * Sets current date as the input value.
    */
   setInputValue() {
-    this.el.value = this.toString();
+    if(this.el.type == 'date') {
+      this.setDataDate()
+      this.el.value = this.formatDate('yyyy-mm-dd')
+    } else {
+      this.el.value = this.toString();
+    }
     this.el.dispatchEvent(new CustomEvent('change', {bubbles:true, cancelable:true, composed:true, detail: {firedBy: this}}));
   }
 
@@ -925,7 +946,11 @@ export class Datepicker extends Component<DatepickerOptions> {
     this.calendarEl.removeEventListener('click', this._handleCalendarClick);
   }
 
-  _handleInputClick = () => {
+  _handleInputClick = (e) => {
+    // Prevents default browser datepicker modal rendering
+    if(this.el.type == 'date') {
+      e.preventDefault()
+    }
     this.open();
   }
 
@@ -1008,7 +1033,12 @@ export class Datepicker extends Component<DatepickerOptions> {
     else {
       date = new Date(Date.parse(this.el.value));
     }
-    if (Datepicker._isDate(date)) this.setDate(date);
+    if (Datepicker._isDate(date)) {
+      this.setDate(date);
+      if (this.el.type == 'date') {
+        this.setDataDate();
+      }
+    }
   }
 
   renderDayName(opts, day, abbr: boolean = false) {