easepick日期选择器问题：分离抵达离开日期及yearRange失效

• 使用easepick搭建预订日历，需实现两个输入字段（抵达/离开）+ 预订按钮，点击任一输入框弹出同一日期范围选择器，选中的起止日期分别填入对应字段
• yearRange: "-0:+1"配置无效，访客仍能选择2024年12月31日之后的日期，目前仅能通过硬编码maxDate: "31.12.2024"限制，希望找到更灵活的解决方案
• 当前两个日期均被填入抵达字段，尝试使用RangePlugin的elementEnd功能但配置失败
• 表单需以method="GET"提交至/buchen，日期格式为DD.MM.YYYY
• 额外需求：在日历上方或下方显示停留摘要文本（如"Aufenthalt vom xx.xx.xxxx bis xx.xx.xxxx (x Nächte)"）

解决方案 #

1. 修正HTML结构 #

给离开字段设置明确ID，添加表单字段名称用于提交，同时新增摘要显示容器：

<!-- QuickBookingForm -->
<form id="QBF" autocomplete="off" method="GET" action="/buchen">
  <!-- 抵达字段 -->
  <input id="datepicker-start" class="date-input" placeholder="ANREISE" name="arrival">
  <!-- 离开字段 -->
  <input id="datepicker-end" class="date-input" placeholder="ABREISE" name="departure">
  <!-- 停留摘要容器 -->
  <div id="stay-summary" style="margin: 10px 0; font-size: 14px; color: #333;"></div>
  <!-- 提交按钮 -->
  <input type="hidden" name="lng" value="de">
  <input type="submit" value="BUCHEN">
</form>

2. 配置easepick实现需求 #

通过RangePlugin.elementEnd绑定离开字段，修复yearRange无效问题，同时添加摘要文本逻辑：

<script>
const DateTime = easepick.DateTime;

// 处理已预订日期（替换为你的实际已预订数据）
const bookedDates = [];
const processedBookedDates = bookedDates.map(d => {
    if (d instanceof Array) {
        const start = new DateTime(d[0], 'DD.MM.YYYY');
        const end = new DateTime(d[1], 'DD.MM.YYYY');
        return [start, end];
    }
    return new DateTime(d, 'DD.MM.YYYY');
});

// 计算yearRange对应的maxDate（当前日期+1年）
const today = new DateTime();
const maxDate = today.clone().add(1, 'year');

const picker = new easepick.create({
    element: document.getElementById('datepicker-start'),
    css: [
        'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
        'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css',
    ],
    zIndex: 10,
    plugins: ['RangePlugin', 'LockPlugin'],
    lang: 'de-DE',
    format: "DD.MM.YYYY",
    yearRange: "-0:+1",
    RangePlugin: {
        // 指定结束日期输入字段
        elementEnd: document.getElementById('datepicker-end'),
        tooltipNumber(num) {
            return num - 1;
        },
        locale: {
            one: 'Nacht',
            other: 'Nächte',
        },
        // 选择日期后更新摘要文本
        onSelect(picker) {
            if (picker.startDate && picker.endDate) {
                const nights = picker.endDate.diff(picker.startDate, 'day');
                const summary = `Aufenthalt vom ${picker.startDate.format('DD.MM.YYYY')} bis ${picker.endDate.format('DD.MM.YYYY')} (${nights} ${nights === 1 ? 'Nacht' : 'Nächte'})`;
                document.getElementById('stay-summary').textContent = summary;
            } else {
                document.getElementById('stay-summary').textContent = '';
            }
        }
    },
    LockPlugin: {
        minDate: new Date(),
        minDays: 2,
        maxDate: maxDate, // 使用计算后的日期替代硬编码
        inseparable: true,
        filter(date, picked) {
            if (picked.length === 1) {
                const incl = date.isBefore(picked[0]) ? '[)' : '(]';
                return !picked[0].isSame(date, 'day') && date.inArray(processedBookedDates, incl);
            }
            return date.inArray(processedBookedDates, '[)');
        },
    }
});

// 让离开字段点击也唤起选择器
document.getElementById('datepicker-end').addEventListener('click', () => picker.show());
</script>

关键配置说明 #

• 双字段赋值：通过RangePlugin.elementEnd指定离开字段后，easepick会自动将起止日期分别填入对应输入框
• yearRange修复：用DateTime动态计算maxDate（当前日期+1年），既符合yearRange: "-0:+1"的需求，又避免硬编码的局限性
• 摘要文本：利用RangePlugin.onSelect钩子，在用户选择日期后计算停留天数并更新摘要容器内容
• 表单提交：给两个输入框添加name属性，表单提交时会自动以GET方式将日期参数传递到目标地址

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