Laravel Blade中如何在标记内传递脚本变量调用函数？

1. 对齐函数名称与选择器 #

你Blade模板里调用的formatDatepickerTermination函数在现有脚本中不存在，先把现有formatDatepickerFilter函数重命名并替换目标选择器，适配你的终止日期输入框：

function formatDatepickerTermination(date) {
    flatpickr(".format-datepicker-terminate-note", {
        altInput: true,
        altFormat: 'Y-m-d',
        dateFormat: 'Y-m-d',
        allowInput: false,
        minDate: date, // 传入目标日期作为最小可选值
        onChange: (selectedDates, dateStr, instance) => {
            if (instance.element?._x_model) {
                instance.element._x_model.set(dateStr);
            }
        },
        onClose: (selectedDates, dateStr, instance) => {
            if (instance.element?._x_model) {
                instance.element._x_model.set(dateStr);
            }
        }
    });
}

2. 正确传递日期参数（两种方案） #

方案一：移除全局变量（推荐） #

全局变量容易引发作用域问题，直接在打开模态框时传入日期参数并初始化选择器：

function terminateNote(date) {
    $('#terminate-note-form').modal();
    // 等待模态框渲染完成后初始化，避免DOM未加载
    setTimeout(() => formatDatepickerTermination(date), 100);
}

同时修改Blade模板，移除不需要的x-init：

<div id="terminate-note-form">
    <x-input class="w-full format-datepicker date_picker_icon format-datepicker-terminate-note" 
             name="end_date" 
             id="end_date" />
</div>

方案二：保留全局变量（不推荐） #

如果必须使用全局变量，先声明全局作用域的ter_date，并在x-init中明确引用：

// 全局声明变量
let ter_date;

function terminateNote(date) {
    ter_date = date;
    $('#terminate-note-form').modal();
}

修改Blade模板的x-init：

<div id="terminate-note-form">
    <x-input class="w-full format-datepicker date_picker_icon format-datepicker-terminate-note" 
             name="end_date" 
             id="end_date"
             x-init="formatDatepickerTermination(window.ter_date)" />
</div>

关键注意点 #

• 确保flatpickr资源已正确引入项目
• 模态框初始化后需等待DOM渲染完成再调用日期选择器初始化，否则会出现元素找不到的问题
• 优先使用参数传递替代全局变量，减少代码耦合

内容的提问来源于stack exchange，提问作者RA.IBOY