反应表日期范围筛选器
反应表日期范围筛选器
提问于 2020-10-18 15:06:19
我正在尝试在我的React表中实现一个日期范围过滤器。当我更改开始或结束日期时，它会触发过滤函数，创建最小日期和最大日期，但当它完成时，没有日期被过滤，并且从所选日期开始输入为空。这是我的代码：
const ChartData = () => {
const columns = React.useMemo(
() => [
{
Header: "Date",
columns: [
{
Header: "Date",
accessor: "date",
id: "date",
Filter: chartFilter.DateRangeColumnFilter,
filter: "between"
}
]
}
],
[]
);
const data = React.useMemo(() => dummyData(100000), []);
return (
<div className={classes.tableWrapper}>
<Table columns={columns} data={data} />
</div>
);
};
export default ChartData;过滤器页面：
export function DateRangeColumnFilter({
column: { filterValue = [], preFilteredRows, setFilter, id }
}) {
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
preFilteredRows.forEach((row) => {
min = Math.min(new Date(row.values[id]).getTime(), min);
max = Math.max(new Date(row.values[id]).getTime(), max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<div style={{display: "flex"}}>
<input
value={filterValue[0] || ""}
type="date"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [val || undefined, old[1]]);
}}
style={{
width: "70px",
marginRight: "0.5rem"
}}
/>
to
<input
value={filterValue[1] || ""}
type="date"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [old[0], val || undefined]);
}}
style={{
width: "70px",
marginLeft: "0.5rem"
}}
/>
</div>
);
}我错过了什么？
回答 1
Stack Overflow用户
发布于 2020-11-17 21:38:49
所以我也遇到了同样的问题这是我的解决方案
我用过扁平选择器，moment
DateFilter.tsx
export const DateFilter = ({
column: {
filterValue,
setFilter,
preFilteredRows,
id,
},
rows
}: any) => {
const dates = preFilteredRows.map((val: any) => moment(val.original[id],dateFormat))
const minDate = moment.min(dates).subtract(1,'day') // To include the date
const maxDate = moment.max(dates).add(1, 'day')
return (
<React.Fragment>
<Flatpickr
className='form-control'
onChange={(date) => {
if (date.length === 2) {
setFilter([date[0],date[1]])
}
}}
options={{
enable: [
{
from: minDate.toDate(),
to : maxDate.toDate()
}
],
mode : 'range'
}}
/>
</React.Fragment>)；}；
现在运行您的mainTable组件文件。添加一个名为filtertypes的常量。这就是对象
const filterTypes : any = {
date: (rows: any[], id: any, filterValue: any) => {
let start = moment(filterValue[0]).subtract(1, 'day')
let end = moment(filterValue[1]).add(1, 'day')
return rows.filter(val =>
moment(val.original[id],dateFormat).isBetween(start, end);
)
}
}不要忘记在列定义中添加过滤器和过滤器属性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64410636
复制相关文章
相似问题
腾讯云开发者
