Skip to content

Commit bf5b4d2

Browse files
AllenFangAllenFang
committed
fix #377 
1 parent 2432ab3 commit bf5b4d2

File tree

3 files changed

+138
-19
lines changed

3 files changed

+138
-19
lines changed

‎css/react-bootstrap-table.css

+6-3
Original file line numberDiff line numberDiff line change
@@ -108,17 +108,20 @@
108108
font-style: initial;
109109
}
110110

111-
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter {
111+
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter,
112+
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter {
112113
display: flex;
113114
}
114115

115-
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input {
116+
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input,
117+
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input {
116118
margin-left: 5px;
117119
float: left;
118120
width: calc(100% - 67px - 5px);
119121
}
120122

121-
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator {
123+
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator,
124+
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator {
122125
width: 67px;
123126
float: left;
124127
}

‎src/filters/Date.js

+73-9
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,116 @@
33
import React, { Component, PropTypes } from 'react';
44
import Const from '../Const';
55

6+
const legalComparators = [ '=', '>', '>=', '<', '<=', '!=' ];
7+
8+
function dateParser(d) {
9+
return `${d.getFullYear()}-${("0" + (d.getMonth() + 1)).slice(-2)}-${("0" + d.getDate()).slice(-2)}`;
10+
}
11+
612
class DateFilter extends Component {
713
constructor(props) {
814
super(props);
15+
this.dateComparators = this.props.dateComparators || legalComparators;
916
this.filter = this.filter.bind(this);
17+
this.onChangeComparator = this.onChangeComparator.bind(this);
1018
}
1119

1220
setDefaultDate() {
1321
let defaultDate = '';
14-
if (this.props.defaultValue) {
15-
// Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
16-
const defaultValue = new Date(this.props.defaultValue);
17-
defaultDate = `${defaultValue.getFullYear()}-${("0" + (defaultValue.getMonth() + 1)).slice(-2)}-${("0" + defaultValue.getDate()).slice(-2)}`;
22+
const { defaultValue } = this.props;
23+
if (defaultValue && defaultValue.date) {
24+
// Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
25+
defaultDate = dateParser(new Date(defaultValue.date));
1826
}
1927
return defaultDate;
2028
}
2129

30+
onChangeComparator(event) {
31+
let date = this.refs.inputDate.value;
32+
const comparator = event.target.value;
33+
if (date === '') {
34+
return;
35+
}
36+
date = new Date(date);
37+
this.props.filterHandler({ date, comparator }, Const.FILTER_TYPE.DATE);
38+
}
39+
40+
getComparatorOptions() {
41+
const optionTags = [];
42+
optionTags.push(<option key='-1'></option>);
43+
for (let i = 0; i < this.dateComparators.length; i++) {
44+
optionTags.push(
45+
<option key={ i } value={ this.dateComparators[i] }>
46+
{ this.dateComparators[i] }
47+
</option>
48+
);
49+
}
50+
return optionTags;
51+
}
52+
2253
filter(event) {
54+
const comparator = this.refs.dateFilterComparator.value;
2355
const dateValue = event.target.value;
2456
if (dateValue) {
25-
this.props.filterHandler(new Date(dateValue), Const.FILTER_TYPE.DATE);
57+
this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE);
2658
} else {
2759
this.props.filterHandler(null, Const.FILTER_TYPE.DATE);
2860
}
2961
}
3062

3163
componentDidMount() {
64+
const comparator = this.refs.dateFilterComparator.value;
3265
const dateValue = this.refs.inputDate.defaultValue;
33-
if (dateValue) {
34-
this.props.filterHandler(new Date(dateValue), Const.FILTER_TYPE.DATE);
66+
if (comparator && dateValue) {
67+
this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE);
3568
}
3669
}
3770

3871
render() {
72+
const { defaultValue } = this.props;
3973
return (
74+
<div className='filter date-filter'>
75+
<select ref='dateFilterComparator'
76+
className='date-filter-comparator form-control'
77+
onChange={ this.onChangeComparator }
78+
defaultValue={ (defaultValue) ? defaultValue.comparator : '' }>
79+
{ this.getComparatorOptions() }
80+
</select>
4081
<input ref='inputDate'
41-
className='filter date-filter form-control'
82+
className='filter date-filter-input form-control'
4283
type='date'
4384
onChange={ this.filter }
4485
defaultValue={ this.setDefaultDate() } />
86+
</div>
4587
);
4688
}
4789
}
4890

4991
DateFilter.propTypes = {
5092
filterHandler: PropTypes.func.isRequired,
51-
defaultValue: PropTypes.object,
93+
defaultValue: PropTypes.shape({
94+
date: PropTypes.object,
95+
comparator: PropTypes.oneOf(legalComparators)
96+
}),
97+
/* eslint consistent-return: 0 */
98+
dateComparators: function(props, propName) {
99+
if (!props[propName]) {
100+
return;
101+
}
102+
for (let i = 0; i < props[propName].length; i++) {
103+
let comparatorIsValid = false;
104+
for (let j = 0; j < legalComparators.length; j++) {
105+
if (legalComparators[j] === props[propName][i]) {
106+
comparatorIsValid = true;
107+
break;
108+
}
109+
}
110+
if (!comparatorIsValid) {
111+
return new Error(`Date comparator provided is not supported.
112+
Use only ${legalComparators}`);
113+
}
114+
}
115+
},
52116
columnName: PropTypes.string
53117
};
54118

‎src/store/TableDataStore.js

+59-7
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,10 @@ export class TableDataStore {
222222
filterObj[key].value;
223223
break;
224224
}
225+
case Const.FILTER_TYPE.DATE: {
226+
filterVal = filterObj[key].value.date;
227+
break;
228+
}
225229
case Const.FILTER_TYPE.REGEX: {
226230
filterVal = filterObj[key].value;
227231
break;
@@ -251,7 +255,7 @@ export class TableDataStore {
251255
break;
252256
}
253257
case Const.FILTER_TYPE.DATE: {
254-
valid = this.filterDate(targetVal, filterVal);
258+
valid = this.filterDate(targetVal, filterVal, filterObj[key].value.comparator);
255259
break;
256260
}
257261
case Const.FILTER_TYPE.REGEX: {
@@ -324,13 +328,61 @@ export class TableDataStore {
324328
return valid;
325329
}
326330

327-
filterDate(targetVal, filterVal) {
328-
if (!targetVal) {
329-
return false;
331+
filterDate(targetVal, filterVal, comparator) {
332+
// if (!targetVal) {
333+
// return false;
334+
// }
335+
// return (targetVal.getDate() === filterVal.getDate() &&
336+
// targetVal.getMonth() === filterVal.getMonth() &&
337+
// targetVal.getFullYear() === filterVal.getFullYear());
338+
339+
let valid = true;
340+
switch (comparator) {
341+
case '=': {
342+
if (targetVal != filterVal) {
343+
valid = false;
344+
}
345+
break;
346+
}
347+
case '>': {
348+
if (targetVal <= filterVal) {
349+
valid = false;
350+
}
351+
break;
352+
}
353+
case '>=': {
354+
// console.log(targetVal);
355+
// console.log(filterVal);
356+
// console.log(filterVal.getDate());
357+
if (targetVal < filterVal) {
358+
valid = false;
359+
}
360+
break;
330361
}
331-
return (targetVal.getDate() === filterVal.getDate() &&
332-
targetVal.getMonth() === filterVal.getMonth() &&
333-
targetVal.getFullYear() === filterVal.getFullYear());
362+
case '<': {
363+
if (targetVal >= filterVal) {
364+
valid = false;
365+
}
366+
break;
367+
}
368+
case '<=': {
369+
if (targetVal > filterVal) {
370+
valid = false;
371+
}
372+
break;
373+
}
374+
case '!=': {
375+
if (targetVal == filterVal) {
376+
valid = false;
377+
}
378+
break;
379+
}
380+
default: {
381+
console.error('Date comparator provided is not supported');
382+
break;
383+
}
384+
}
385+
return valid;
334386
}
335387

336388
filterRegex(targetVal, filterVal) {

0 commit comments

Comments
 (0)