Symfony表单提交后JQuery MultiDatesPicker选中日期无法保留求助

问题概况 #

使用jQuery MultiDatesPicker实现多日期选择，提交Symfony表单后数据已正确存入数据库，但页面上选中的日期无法保留。因inline:block选项无效，采用div块实现日期选择器。

问题原因 #

1. 页面存在两个.picker元素（Symfony表单生成的dateReservation输入框和手动添加的div），初始化MultiDatesPicker时同时作用于两者，导致状态不同步。
2. 页面加载时未从后端取回已保存的日期，无法初始化到日期选择器中。

解决步骤 #

1. 区分日期选择器容器与表单输入框 #

修改表单代码，给div容器单独设置类名，避免和输入框的picker类冲突：

{{ form_start(formReservation) }}   
    {{ form_row(formReservation.firstName, {'attr': {'class': 'input-form-contact'}}) }}
    {{ form_row(formReservation.lastName, {'attr': {'class': 'input-form-contact'}}) }}
    {{ form_row(formReservation.email, {'attr': {'class': 'input-form-contact'}}) }}
    {{ form_row(formReservation.phone, {'attr': {'class': 'input-form-contact'}}) }}
    
    <div class="d-flex justify-content-between div-number-rods align-items-center checkout-rods">
        <button type="button" class="btn btn-dark btn-form-reservation me-2 decrease-btn"><i class="bi bi-dash-lg"></i></button>
        {{ form_row(formReservation.numberRods, (reservation.numberRods is not null ? {'attr': {'value': reservation.numberRods} } : {}) ) }}
        <button type="button" class="btn btn-dark btn-form-reservation ms-2 increase-btn"><i class="bi bi-plus-lg"></i></button>
    </div>

    {{ form_row(formReservation.dateReservation, {'attr': {'class': 'input-form-contact'}}) }}

    <div class="date-picker-container mb-3 rounded"></div>

    <div class="d-flex flex-column align-items-center justify-content-center border mb-3 card-total-price">
        <h5 class="price" data-price="20">20€ par canne à pêche / jour</h5>
        <h4 class="total fw-bold mb-0">Total: <span id="total">{% if reservation.price is not null %}{{ reservation.price }}{% else %}0{% endif %} €</span></h4>
        <h4 class="total fw-bold mb-0">Nombre de journée(s) : <span id="nbDays">{% if reservation.numberDays is not null %}{{ reservation.numberDays }}{% else %}0{% endif %}</span></h4>
        <input type="hidden" id="total-price" name="total-price">
        <input type="hidden" id="total-days" name="total-days" value="1">
    </div>

    <div class="d-flex justify-content-end">
        <button type="submit" id="submit-form-contact" class="btn btn-dark btn-form-contact-message g-recaptcha" data-action='submit'>Valider</button>
    </div>
{{ form_end(formReservation) }}

2. 初始化时加载已保存的日期 #

修改JS代码，指定仅对div容器初始化MultiDatesPicker，并从Symfony模板变量中获取已保存的日期（假设reservation.dateReservation是逗号分隔的日期字符串），初始化到选择器中：

// 从Twig变量获取已保存的日期，转换为数组
const savedDates = '{{ reservation.dateReservation is not null ? reservation.dateReservation : "" }}'.split(',').filter(date => date.trim() !== '');

$('.date-picker-container').multiDatesPicker({
    dateFormat: "dd/mm/yy",
    beforeShowDay: function(date) {
        const day = date.getDay();            
        return [(day === 0 || day === 6)]; // 仅允许周末选择
    },
    // 初始化时设置已保存的日期
    addDates: savedDates,
    onSelect: function(){
        const selectedDates = $('.date-picker-container').multiDatesPicker('value');
        $('#reservation_form_dateReservation').val(selectedDates);
        
        const dateCount = $('.date-picker-container').multiDatesPicker('getDates').length;
        $('#total-days').val(dateCount);
        $('#nbDays').text(dateCount);

        const price = +$(".price").data("price");
        const quantity = +parseInt($('#reservation_form_numberRods').val());
        const total = (price * quantity) * dateCount;
        
        $("#total").text(total + "€");
        $("#total-price").val(total);
    },
});

// 页面加载完成后同步初始值
$(document).ready(function() {
    if (savedDates.length > 0) {
        $('#reservation_form_dateReservation').val(savedDates.join(','));
        const dateCount = savedDates.length;
        $('#total-days').val(dateCount);
        $('#nbDays').text(dateCount);
        
        const price = +$(".price").data("price");
        const quantity = +parseInt($('#reservation_form_numberRods').val());
        const total = (price * quantity) * dateCount;
        
        $("#total").text(total + "€");
        $("#total-price").val(total);
    }
});

3. 关键说明 #

• 确保Symfony实体中dateReservation字段存储的是逗号分隔的日期字符串（格式与dateFormat一致：dd/mm/yy）。
• 初始化时通过addDates参数将已保存的日期传入MultiDatesPicker，实现页面加载时的日期回显。
• 移除重复的.picker类，避免初始化冲突，确保仅对div容器应用日期选择器。

内容的提问来源于stack exchange，提问作者Grégory LACROIX