FullCalendar多选日期转数组存入数据库问题求助

我正在开发一个预约系统，需要在FullCalendar中实现月份内日期多选功能，最终要将选中日期整理为特定格式的数组存入数据库。预期效果：

• 点击日期可切换选中/取消状态
• 输入框显示格式如 20-03、24-03、25-03 的选中日期
• 提交时以 date=[20-03,24-03,25-03] 的形式存入数据库

目前遇到的问题：

• 点击日期无法实现多选/取消选择
• 选中日期未按要求格式整理，也未正确维护数组
• 尝试使用FullCalendar的format()及moment().format()均无效

原代码如下：

<div id='calendar'></div>

<label for="dates">Dates</label>
<input name="date" value="" readonly>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            start:   'title',
            center: '',
            end: ''
        },
        initialView: 'dayGridMonth',
        selectable: true,
        
        dateClick: function(info) {
            if(selected.includes(info.dateStr)){
                selected.pop(info.dateStr);
            } 
            else{
                selected.push(info.dateStr);
            }
            document.getElementById("dates").value =selected;
        },
    });

    document.getElementById('month').addEventListener('change', function() {
        var date = document.getElementById('month').value;
        console.log(date);
        calendar.gotoDate( date );
    });

    calendar.render();
});
</script>

修正后的完整代码 #

<div id='calendar'></div>

<label for="dates">Dates</label>
<!-- 给输入框添加id，确保能正确赋值 -->
<input id="dates" name="date" value="" readonly>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化选中日期数组，必须提前定义才能使用
    let selected = [];
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            start: 'title',
            center: '',
            end: ''
        },
        initialView: 'dayGridMonth',
        selectable: true,
        
        dateClick: function(info) {
            // 把FullCalendar的Date对象转成DD-MM格式
            const formattedDate = info.date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: '2-digit'
            }).replace('/', '-');
            
            // 判断当前日期是否已选中
            const dateIndex = selected.indexOf(formattedDate);
            if (dateIndex > -1) {
                // 取消选择：删除数组中对应位置的元素
                selected.splice(dateIndex, 1);
            } else {
                // 添加选中日期到数组
                selected.push(formattedDate);
            }
            
            // 更新输入框显示，用顿号分隔日期
            document.getElementById("dates").value = selected.join('、');
        },

        // 可选：给已选中的日期添加样式，方便用户识别
        dayCellDidMount: function(info) {
            const formattedDate = info.date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: '2-digit'
            }).replace('/', '-');
            if (selected.includes(formattedDate)) {
                info.el.classList.add('selected-date');
            }
        }
    });

    document.getElementById('month').addEventListener('change', function() {
        var date = document.getElementById('month').value;
        calendar.gotoDate(date);
    });

    calendar.render();
});
</script>

<style>
/* 选中日期的样式，可自定义 */
.selected-date {
    background-color: #2ecc71;
    color: #fff;
    border-radius: 50%;
}
</style>

关键修正点 #

1. 初始化选中数组：提前定义let selected = []，解决原代码中变量未定义的问题
2. 日期格式转换：FullCalendar v6使用原生Date对象，用toLocaleDateString直接转成DD-MM格式，替代无效的format()调用
3. 正确维护选中状态：用indexOf找元素位置，splice删除指定元素，替代原代码中错误的pop()方法（pop()只会删最后一个元素）
4. 绑定输入框ID：给输入框添加id="dates"，确保能正确更新显示内容
5. 可选视觉反馈：添加dayCellDidMount钩子和CSS样式，标记已选中的日期

提交数据处理 #

如果需要提交时以date=[20-03,24-03,25-03]的格式发送，在表单提交时可以这样处理：

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    // 构造后端需要的数组格式字符串
    const dateStr = `[${selected.join(',')}]`;
    // 把值放到表单中
    this.date.value = dateStr;
    // 或者用FormData发送
    const formData = new FormData(this);
    formData.set('date', dateStr);
    
    // 这里写提交请求的逻辑，比如fetch或axios
    fetch('/your-submit-url', {
        method: 'POST',
        body: formData
    });
});

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