Preface
About five months works, we finally get a first drop for react-bootstrap-table2. I just want to say that I'm very sorry to let you guys to wait for a long time.
I know a lots of people experienced many bugs or feel hard to customize on table. Anyway, I'm very appreciated everyone's helps and feedbacks, I think that's the reason why I decided to rebuilt react-bootstrap-table2.
For the first drop, I really can't finish all the legacy features, but I will work more hard to finish them by March or April. Please see the release plan for more details.
diff --git a/docs/basic-filter.html b/docs/basic-filter.html
index b59c193..8871871 100644
--- a/docs/basic-filter.html
+++ b/docs/basic-filter.html
@@ -23,6 +23,7 @@
TextFilter
SelectFilter
NumberFilter
+DateFilter
Coming soon!
Text Filter
@@ -129,6 +130,40 @@
getFilter: (f) => { ... }
})
+
+
+Date Filter
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+ dataField: 'date',
+ text: 'Product date',
+ filter: dateFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+
+
+Notes: date filter accept a Javascript Date object in your raw data.
+
+Date filter is same as other filter, you can custom the date filter via dateFilter factory function:
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+
+const dateFilter = dateFilter({
+ delay: 600,
+ placeholder: 'custom placeholder',
+ withoutEmptyComparatorOption: true,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display: 'inline-grid' },
+ className: 'custom-dateFilter-class',
+ comparatorStyle: { backgroundColor: 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class',
+ dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+ dateClassName: 'custom-date-class',
+ defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
+});
+
@@ -172,5 +207,6 @@
Example For Programmtically Text Filter
Example For Programmtically Select Filter
Example For Programmtically Number Filter
+Example For Programmtically Date Filter