如何将React Calendar点击返回的日期格式化为YYYY-MM-DD格式

你拿到的日历点击返回值是标准JS Date对象，直接做本地时间拼接就能得到符合数据库要求的YYYY-MM-DD格式，注意规避时区偏移导致的日期差1天的常见bug即可。

无依赖原生实现 #

不需要引入任何第三方库，直接在日期变更回调里加格式化逻辑即可，修改后的完整代码如下：

const Calendar = () => {
    const CalendarChange = () => {
        console.log("hi");
    };
    
    const [date, setDate] = useState(new Date());

    // 日期格式化工具方法，取本地时间避免时区偏移
    const formatDateForDB = (targetDate) => {
        const year = targetDate.getFullYear();
        // 月份从0开始计数，需要+1，不足两位补前导0
        const month = String(targetDate.getMonth() + 1).padStart(2, '0');
        const day = String(targetDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    const onDateChange = (newDate) => {
        setDate(newDate);
        const dbReadyDate = formatDateForDB(newDate);
        console.log(dbReadyDate); // 输出示例：2022-06-07
        // 后续在这里传入dbReadyDate调用接口，查询对应日期的预约记录即可
    }

    const locale = 'fr-CA';

    return (
        <>
           <CalendarContainer>
                 <Calendarcom 
                    calendarType='US' 
                    format="dd-MM-yyyy" 
                    className='react-calendar' 
                    onChange={onDateChange}           
                    value={date} 
                />
             </CalendarContainer>
        </>
    );
};

export default Calendar;

• 这个实现完全基于本地时间计算，不会出现选中日期和转换结果不一致的问题。
• 你之前注释的Intl.DateTimeFormat也可以实现，把locale设为fr-CA即可，该地区默认日期格式就是YYYY-MM-DD，写法为new Intl.DateTimeFormat('fr-CA').format(newDate)，但旧版浏览器对这个locale的兼容性不如手动拼接的方案稳定。

已有日期库的简化写法 #

如果你的项目已经引入了常用日期处理库，可以直接用库自带的格式化能力，代码更简洁：

• 用dayjs的写法：

import dayjs from 'dayjs';
const dbReadyDate = dayjs(newDate).format('YYYY-MM-DD');

• 用date-fns的写法：

import { format } from 'date-fns';
const dbReadyDate = format(newDate, 'yyyy-MM-dd');

❌ 避坑提醒：不要用newDate.toISOString().split('T')[0]这种写法，toISOString()会先把时间转为UTC时区，比如你在GMT+2时区选中6月7日0点，转UTC后是6月6日22点，截取出来的日期会变成2022-06-06，和实际选中的日期不符，直接导致预约记录查询错误。

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