React Native中如何实现时间段筛选函数？基于Moment的日期范围处理

Hey Kimako, totally get the confusion here—using Moment.js to grab precise date ranges can feel tricky at first, especially when you need full weeks/months instead of relative calendar labels. Let's break down each of your cases with the correct Moment.js methods, since calendar() is really just for formatting human-readable dates (like "Last Monday") rather than getting the start/end of a full range.

First, let's adjust your execAction function to calculate start and end dates for each range (you can then use these dates to filter your trips or update your state as needed). Here's the revised code with explanations for each case:

import moment from 'moment'; // 确保你已经导入了moment

export default class MyTrips extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      currentDate: new Date(), 
      markedDate: moment(new Date()).format("YYYY-MM-DD"),
      // 新增状态存储选中的时间段范围
      selectedRange: {
        startDate: null,
        endDate: null
      }
    }; 
  } 

  execAction = (val) => { 
    let startDate, endDate;
    switch (val) { 
      case "this week": 
        // 本周：从本周一00:00到本周日23:59:59
        startDate = moment().startOf('isoWeek'); // isoWeek以周一为一周开始
        endDate = moment().endOf('isoWeek');
        break; 
      case "Last week": 
        // 上周：从上周一00:00到上周日23:59:59
        startDate = moment().subtract(1, 'week').startOf('isoWeek');
        endDate = moment().subtract(1, 'week').endOf('isoWeek');
        break; 
      case "this month": 
        // 本月：从当月1号00:00到当月最后一天23:59:59
        startDate = moment().startOf('month');
        endDate = moment().endOf('month');
        break; 
      case "Last month": 
        // 上月：从上个月1号00:00到上个月最后一天23:59:59
        startDate = moment().subtract(1, 'month').startOf('month');
        endDate = moment().subtract(1, 'month').endOf('month');
        break; 
      case "This year": 
        // 本年：从当年1月1号00:00到当年12月31号23:59:59
        startDate = moment().startOf('year');
        endDate = moment().endOf('year');
        break; 
      case "Last year": 
        // 去年：从去年1月1号00:00到去年12月31号23:59:59
        startDate = moment().subtract(1, 'year').startOf('year');
        endDate = moment().subtract(1, 'year').endOf('year');
        break; 
      case "30 last days": 
        // 最近30天：从30天前的00:00到今天23:59:59（包含今天）
        startDate = moment().subtract(29, 'days').startOf('day');
        endDate = moment().endOf('day');
        break; 
      case "90 last days": 
        // 最近90天：从90天前的00:00到今天23:59:59（包含今天）
        startDate = moment().subtract(89, 'days').startOf('day');
        endDate = moment().endOf('day');
        break; 
      case "12 last months": 
        // 方案1：完整的12个自然月（从12个月前的当月1号到当前月最后一天）
        startDate = moment().subtract(12, 'months').startOf('month');
        endDate = moment().endOf('month');
        // 方案2：过去12个月（从今天往前推12个月到今天）
        // startDate = moment().subtract(12, 'months').startOf('day');
        // endDate = moment().endOf('day');
        break; 
      default: 
        console.log(`[${val}] No action defined...`);
        return;
    }

    // 把计算好的日期格式化为你需要的格式，并更新状态
    this.setState({
      selectedRange: {
        startDate: startDate.format("YYYY-MM-DD"),
        endDate: endDate.format("YYYY-MM-DD")
      }
    });

    // 这里可以添加你的业务逻辑，比如根据日期范围筛选数据
    console.log(`Selected range: ${startDate.format("YYYY-MM-DD")} to ${endDate.format("YYYY-MM-DD")}`);
  };
}

关键说明： #

• startOf('isoWeek')：Moment.js的isoWeek以周一为一周的开始，刚好匹配你要的上周“周一到周日”需求。如果需要以周日为一周起点，替换为startOf('week')即可。
• startOf('day')/endOf('day')：确保获取的是当天的起始和结束时间，避免时间部分干扰后续的筛选逻辑。
• 为什么用subtract(29, 'days')而非subtract(30, 'days')？因为要包含当天，比如今天是10号，减29天得到上月11号，这样11号到10号刚好是30天的范围。
• 对于"12 last months"，我提供了两种逻辑，你可以根据业务需求选择：一种是覆盖完整的12个自然月，另一种是从当天往前推12个月的连续范围。

内容的提问来源于stack exchange，提问作者Kimako