use the filterDefault option also for the datepicker (#5359)

Co-authored-by: Dennis Hernández <dennishernandezvargas@gmail.com>

site/docs/extensions/filter-control.md

@@ -215,6 +215,8 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 - **Detail:**
 
    Set the default value of the filter.
+   
+   If you use the datepicker, make sure your date format match the [format](https://bootstrap-datepicker.readthedocs.io/en/stable/options.html?highlight=format#format) of the datepicker. You can change the datepicker format using [filterDatepickerOptions](https://bootstrap-table.com/docs/extensions/filter-control/#filterdatepickeroptions).
 
 - **Default:** `undefined`
 

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

@@ -56,7 +56,7 @@ $.extend($.fn.bootstrapTable.columnDefaults, {
   filterControl: undefined, // input, select, datepicker
   filterDataCollector: undefined,
   filterData: undefined,
-  filterDatepickerOptions: undefined,
+  filterDatepickerOptions: {},
   filterStrictSearch: false,
   filterStartsWithSearch: false,
   filterControlPlaceholder: '',

src/extensions/filter-control/utils.js

@@ -460,17 +460,23 @@ export function createControls (that, header) {
     })
 
     if (header.find('.date-filter-control').length > 0) {
-      $.each(that.columns, (i, { filterControl, field, filterDatepickerOptions }) => {
+      $.each(that.columns, (i, { filterDefault, filterControl, field, filterDatepickerOptions }) => {
         if (filterControl !== undefined && filterControl.toLowerCase() === 'datepicker') {
-          header.find(`.date-filter-control.bootstrap-table-filter-control-${field}`)
-            .datepicker(filterDatepickerOptions)
-            .on('changeDate', ({ currentTarget, keyCode }) => {
-              clearTimeout(currentTarget.timeoutId || 0)
-              currentTarget.timeoutId = setTimeout(() => {
-                syncControls(that)
-                that.onColumnSearch({ currentTarget, keyCode })
-              }, that.options.searchTimeOut)
-            })
+          const $datepicker = header.find(`.date-filter-control.bootstrap-table-filter-control-${field}`)
+
+          $datepicker.datepicker(filterDatepickerOptions)
+
+          if (filterDefault) {
+            $datepicker.datepicker('setDate', filterDefault)
+          }
+
+          $datepicker.on('changeDate', ({ currentTarget, keyCode }) => {
+            clearTimeout(currentTarget.timeoutId || 0)
+            currentTarget.timeoutId = setTimeout(() => {
+              syncControls(that)
+              that.onColumnSearch({ currentTarget, keyCode })
+            }, that.options.searchTimeOut)
+          })
         }
       })
     }