Using htlm5 datepicker

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -39,7 +39,7 @@ $.extend($.fn.bootstrapTable.defaults, {
     },
     datepicker (that, field, value) {
       return Utils.sprintf(
-        '<input type="text" class="form-control date-filter-control bootstrap-table-filter-control-%s" style="width: 100%;" value="%s">',
+        '<input type="date" class="form-control date-filter-control bootstrap-table-filter-control-%s" style="width: 100%;" value="%s">',
         field,
         'undefined' === typeof value ? '' : value
       )

src/extensions/filter-control/utils.js

@@ -465,22 +465,36 @@ export function createControls (that, header) {
       }, that.options.searchTimeOut)
     })
 
-    // Consider support default date picker
+    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
     if (header.find('.date-filter-control').length > 0) {
       $.each(that.columns, (i, { filterDefault, filterControl, field, filterDatepickerOptions }) => {
         if (filterControl !== undefined && filterControl.toLowerCase() === 'datepicker') {
           const $datepicker = header.find(`.date-filter-control.bootstrap-table-filter-control-${field}`)
 
-          $datepicker.datepicker(filterDatepickerOptions)
-
           if (filterDefault) {
-            $datepicker.datepicker('setDate', filterDefault)
+            $datepicker.value(filterDefault)
+          }
+
+          if (filterDatepickerOptions.min) {
+            $datepicker.attr('min', filterDatepickerOptions.min)
+          }
+
+          if (filterDatepickerOptions.max) {
+            $datepicker.attr('max', filterDatepickerOptions.max)
+          }
+
+          if (filterDatepickerOptions.step) {
+            $datepicker.attr('step', filterDatepickerOptions.step)
+          }
+
+          if (filterDatepickerOptions.pattern) {
+            $datepicker.attr('pattern', filterDatepickerOptions.pattern)
           }
 
-          $datepicker.on('changeDate', ({ currentTarget, keyCode }) => {
+          $datepicker.on('change', ({ currentTarget }) => {
             clearTimeout(currentTarget.timeoutId || 0)
             currentTarget.timeoutId = setTimeout(() => {
-              that.onColumnSearch({ currentTarget, keyCode })
+              that.onColumnSearch({ currentTarget })
             }, that.options.searchTimeOut)
           })
         }