如何用Flatpickr在每个日期下方添加价格标签？

你当前代码的核心问题是beforeDayCreate回调的参数使用错误，Flatpickr的这个回调并不直接传入dayElem和dObj，而是传入dayObj（包含日期元素及相关信息）、dayStr（格式化后的日期字符串）以及实例对象fp。另外代码里的HTML转义字符（<、"）在JS中需要替换为正常的<和"。

以下是修正后的完整代码：

$('.flatpickr4').flatpickr({
    beforeDayCreate: function(dayObj, dayStr, fp) {
        // 将dates和prices转为键值对映射，避免循环遍历，提升匹配效率
        const priceMap = {};
        dates.forEach((date, index) => {
            priceMap[date] = prices[index];
        });

        // 匹配当前日期对应的价格并添加标签
        if (priceMap[dayStr]) {
            dayObj.elem.innerHTML += `<div class="price-label">${priceMap[dayStr]} TRY</div>`;
        }
    },
    dateFormat: "Y-m-d",
    enable: dates,
    minDate: "{{ now()->format('Y-m-d') }}",
    inline: true,
    locale: turkish
});

还需要添加CSS样式，确保价格标签能正确显示在日期下方，不会被遮挡或超出单元格：

/* 调整Flatpickr日期单元格布局为垂直排列 */
.flatpickr-day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* 取消固定高度，让内容撑开单元格 */
    padding: 4px 0;
}

/* 自定义价格标签样式 */
.price-label {
    font-size: 10px;
    margin-top: 2px;
    color: #666;
}

最后确认几个关键点：

• dates和prices数组长度一致，每个日期与价格的映射关系正确
• 页面已正确引入Flatpickr的官方CSS和JS文件
• turkish本地化对象已提前定义并加载

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