Last active
August 16, 2022 02:41
-
-
Save najathi/e8628d29419f5cc56305d39ac7e8e910 to your computer and use it in GitHub Desktop.
moment js date range filter using antd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { DatePicker, Button } from "antd"; | |
import styles from "./DateRangeFilter.module.scss"; | |
class DateRangeFilter extends React.PureComponent { | |
handleChange = (value) => { | |
if (!value) return; | |
this.props.setSelectedKeys([value]); | |
// NOTE: the problem is that setState is async so calling confirm here doesn't work | |
this.props.confirm(); | |
// works if you set timeout | |
// setTimeout(() => this.props.confirm(), 10); | |
}; | |
handleResetSearch = (clearFilters) => { | |
clearFilters(); | |
this.props.setFilterDeliveries(null); | |
}; | |
render() { | |
const { clearFilters } = this.props; | |
return ( | |
<div className={styles.wrap}> | |
<DatePicker.RangePicker | |
format="YYYY-MM-DD" | |
placeholder={["from", "to"]} | |
onChange={this.handleChange} | |
onOk={this.search} | |
allowClear={true} | |
/> | |
<Button | |
onClick={() => clearFilters && this.handleResetSearch(clearFilters)} | |
size="small" | |
className={styles.button} | |
> | |
Reset | |
</Button> | |
</div> | |
); | |
} | |
} | |
export default DateRangeFilter; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// column object | |
{ | |
title: "DISPATCH", | |
key: "dateOfDispatch", | |
dataIndex: "dateOfDispatch", | |
render: text => <Text>{text ? moment(text).format("YYYY-MM-DD") : "-"}</Text>, | |
sorter: (a, b) => moment(a.dateOfDispatch).unix() - moment(b.dateOfDispatch).unix(), // firebase timestamp | |
filterDropdown: (props) => <DateRangeFilter {...props} />, | |
onFilter: (value, item) => { | |
//const [from, to] = value; | |
//if (!from || !to) return true; | |
//return from.isSameOrBefore(item.dateOfDispatch) && to.isSameOrAfter(item.dateOfDispatch); | |
// best way of date range | |
const [from, to] = value; | |
if (!from || !to) return true; | |
return moment(item.dateOfArrival).isBetween(from, to, 'days', true); | |
} | |
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment