如何从开始日期和结束日期过滤具有给定范围的日期？

Question

我有一个要从中获取数据的API，我希望能够按这样选择的日期量来过滤数据

这里是codesanbox

还是可以使用moment.js按日期进行过滤 我的json返回以下结构：

{
"id": "2",
"postUrl": "https://dogtime.com/assets/uploads/2018/10/puppies-cover-1280x720.jpg",
"profileUrl": "",
"textContent": "The post content goes here. Default allows for three lines before content is truncated. User can click in this area to expand to see the entire post…",
"likeCount": 10,
"commentCount": 10,
"username": "Rex",
"postType": "",
"platform": "INSTAGRAM",
"postTarget": "DEPARTMENT_OF_VA",
"postTopic": "customer_service",
"postDate": "2020-04-25T00:00:00",
"interaction": 10,
"sentiment": 0.5,
"hashTags": [
"22aday",
"agentorange"
]
}

我以为这样的事情会起作用，但到目前为止还没有： 我添加了不同的处理程序，以了解选择了以下哪个选项：

const handleForLastSevenDays () {
    let result = [];
    for (let i=0; i <7; i++) {
        let d = new Date();
        d.setDate(d.getDate() - i);
        result.push( (d) )
    }

    return(result.join(','));
}

我现在更关注除Custom以外的所有选择

Answer 1

这是您的方法。

const { useState, useEffect } = React;

const getDates = () => [
  moment().subtract(12, 'hours').toDate(),
  moment().subtract(3, 'days').toDate(),
  moment().subtract(10, 'days').toDate(),
  moment().subtract(20, 'days').toDate(),
  moment().subtract(45, 'days').toDate(),
  moment().subtract(13, 'months').toDate()
]

const filters = [{
  id: 1,
  text: 'Last 24 Hours',
  params: [24, 'hours']
},{
  id: 2,
  text: 'Last 7 days',
  params: [7, 'days']
},{
  id: 3,
  text: 'Last 14 days',
  params: [14, 'days']
},{
  id: 4,
  text: 'Last 30 days',
  params: [30, 'days']
},{
  id: 5,
  text: 'Last 90 days',
  params: [30, 'days']
},{
  id: 6,
  text: 'Last 12 months',
  params: [12, 'months']
}]

const App = () => {
  const [dates, setDates] = useState(getDates())
  const [options, setOptions] = useState(filters);
  const [option, setOption] = useState(1);
  const [filteredDates, setFilteredDates] = useState([]);

  const onChange = ({target: {value}}) => {
    setOption(Number(value));
  }
  
  useEffect(() => {
    
    const optionObj = options.find(pr => pr.id === option);
    const currentDate = moment();
    const certainDate = moment().subtract(optionObj.params[0], optionObj.params[1]);
    const filteredDates = dates.filter(pr => pr > certainDate);
  
    setFilteredDates(filteredDates);
  }, [option])

  return <div>
    <select onChange={onChange}>
      {options.map(pr => <option key={pr.id} value={pr.id}>{pr.text}</option>)}
    </select>
    {filteredDates.map(date => <div key={date}>{date.toString()}</div>)}
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<div id="root"></div>

Answer 2

您可以使用外部库，但对我来说，JS就足够了。您可以将每个日期转换为时间戳，然后使用简单的数学运算法则来过滤落入范围的日期。或者，您可以比较日期字符串。感觉很奇怪，但是可以用相同的方式比较它们。

类似这样的东西

const handleForLastSevenDays = (currenDate) => {
  let d = new Date();
  d.setDate(d.getDate() - 7)
  let sevenDays = d.toJSON();

 return sevenDays > currenDate
}

，最好的做法是使用带时区的日期。因此，将所有日期转换为UTC时间。