diff --git a/css/react-bootstrap-table.css b/css/react-bootstrap-table.css index 5d7bda57d..0fea93d56 100644 --- a/css/react-bootstrap-table.css +++ b/css/react-bootstrap-table.css @@ -108,17 +108,20 @@ font-style: initial; } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter { display: flex; } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input { margin-left: 5px; float: left; width: calc(100% - 67px - 5px); } -.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator { +.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator, +.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator { width: 67px; float: left; } diff --git a/src/filters/Date.js b/src/filters/Date.js index 1b21b79dd..38ae9b67b 100644 --- a/src/filters/Date.js +++ b/src/filters/Date.js @@ -3,52 +3,116 @@ import React, { Component, PropTypes } from 'react'; import Const from '../Const'; +const legalComparators = [ '=', '>', '>=', '<', '<=', '!=' ]; + +function dateParser(d) { + return `${d.getFullYear()}-${("0" + (d.getMonth() + 1)).slice(-2)}-${("0" + d.getDate()).slice(-2)}`; +} + class DateFilter extends Component { constructor(props) { super(props); + this.dateComparators = this.props.dateComparators || legalComparators; this.filter = this.filter.bind(this); + this.onChangeComparator = this.onChangeComparator.bind(this); } setDefaultDate() { let defaultDate = ''; - if (this.props.defaultValue) { - // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" - const defaultValue = new Date(this.props.defaultValue); - defaultDate = `${defaultValue.getFullYear()}-${("0" + (defaultValue.getMonth() + 1)).slice(-2)}-${("0" + defaultValue.getDate()).slice(-2)}`; + const { defaultValue } = this.props; + if (defaultValue && defaultValue.date) { + // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" + defaultDate = dateParser(new Date(defaultValue.date)); } return defaultDate; } + onChangeComparator(event) { + let date = this.refs.inputDate.value; + const comparator = event.target.value; + if (date === '') { + return; + } + date = new Date(date); + this.props.filterHandler({ date, comparator }, Const.FILTER_TYPE.DATE); + } + + getComparatorOptions() { + const optionTags = []; + optionTags.push(); + for (let i = 0; i < this.dateComparators.length; i++) { + optionTags.push( + + ); + } + return optionTags; + } + filter(event) { + const comparator = this.refs.dateFilterComparator.value; const dateValue = event.target.value; if (dateValue) { - this.props.filterHandler(new Date(dateValue), Const.FILTER_TYPE.DATE); + this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE); } else { this.props.filterHandler(null, Const.FILTER_TYPE.DATE); } } componentDidMount() { + const comparator = this.refs.dateFilterComparator.value; const dateValue = this.refs.inputDate.defaultValue; - if (dateValue) { - this.props.filterHandler(new Date(dateValue), Const.FILTER_TYPE.DATE); + if (comparator && dateValue) { + this.props.filterHandler({ date: new Date(dateValue), comparator }, Const.FILTER_TYPE.DATE); } } render() { + const { defaultValue } = this.props; return ( +