如何计算react-date-range日历中入住与退房日期的间隔天数

你可以通过日期对象的差值计算入住天数，核心逻辑是将结束日期与开始日期的毫秒差值转换为天数，再取整得到实际入住天数。以下是修改后的完整组件代码：

import React, { useState } from 'react'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRangePicker } from 'react-date-range';

const CalendarFunc = (props) => {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    const [stayDays, setStayDays] = useState(0); // 新增状态存储入住天数

    const handleSelect=(ranges) =>{
        const selectedStart = ranges.selection.startDate;
        const selectedEnd = ranges.selection.endDate;
        
        // 更新日期状态
        setStartDate(selectedStart);
        setEndDate(selectedEnd);
        
        // 计算入住天数
        const timeDiff = selectedEnd.getTime() - selectedStart.getTime();
        const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        setStayDays(daysDiff);
        
        console.log(`入住天数：${daysDiff}天`);
    }

    const selectionRange = {
        startDate: startDate,
        endDate: endDate,
        key: "selection"
    }

    return (
        <div className='calendarHolder'>
            {props.buttonopenState && (
                <>
                    <DateRangePicker 
                        ranges={[selectionRange]} 
                        minDate={new Date()} 
                        rangeColors={["#FD5B61"]} 
                        onChange={handleSelect} 
                    />
                    {/* 可在此处展示入住天数 */}
                    {stayDays > 0 && <p>入住天数：{stayDays}天</p>}
                </>
            )}
        </div>
    )
}

export default CalendarFunc

关键逻辑说明： #

• 日期差值计算：通过getTime()方法获取日期的毫秒时间戳，两者相减得到时间差（毫秒）。
• 转换为天数：将毫秒数除以1000*60*60*24（一天的毫秒数），用Math.floor()取整，确保得到准确的整数天数（比如1号到10号会得到9天）。
• 状态管理：新增stayDays状态存储计算结果，方便在组件内展示或传递给父组件。

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