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

Question

我有一个API，我想从API中获取数据，我希望能够通过选择的日期数量来过滤数据，就像这样。

这里有一个 密码箱

或者是否可以使用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是足够的。你可以将每个日期转换成时间戳，然后使用简单的数学来过滤落入范围的日期。或者你可以比较datetrings。这感觉很奇怪，但它们可以用同样的方式进行比较。

就像这样

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

 return sevenDays > currenDate
}

而且最好的做法是使用带有时区的日期。所以把所有的日期转换成UTC时间。