enhancement(Datepicker) implemented date format rendering in supporti…

…ng text field if present materializecss#558

src/datepicker.ts

@@ -442,6 +442,10 @@ export class Datepicker extends Component<DatepickerOptions> {
       this.el.classList.add('datepicker-date-input');
     }
 
+    if (this.el.parentElement.querySelector('.datepicker-format') !== undefined) {
+      this._renderDateInputFormat(this.el);
+    }
+
     if (this.options.isDateRange) {
       if (!this.options.dateRangeEndEl) {
         this.endDateEl = this.createDateInput();
@@ -450,6 +454,9 @@ export class Datepicker extends Component<DatepickerOptions> {
         console.warn('Specified date range end input element in dateRangeEndEl not found');
       } else {
         this.endDateEl = document.querySelector(this.options.dateRangeEndEl) as HTMLInputElement;
+        if (this.endDateEl.parentElement.querySelector('.datepicker-format') !== undefined) {
+          this._renderDateInputFormat(this.endDateEl);
+        }
       }
     }
 
@@ -472,6 +479,13 @@ export class Datepicker extends Component<DatepickerOptions> {
     }
   }
 
+  /**
+   * Renders the date input format
+   */
+  _renderDateInputFormat(el: HTMLInputElement) {
+    el.parentElement.querySelector('.datepicker-format').innerHTML = this.options.format.toString();
+  }
+
   /**
    * Gets a string representation of the given date.
    */