Laravel中Bootstrap Datetimepicker禁用过去日期问题求助

你之前的代码没生效，核心问题是混淆了jQuery UI Datepicker和Bootstrap Datetimepicker的初始化方式，两者是不同插件，配置项和调用逻辑完全不一样。另外，日期选择器在模态框内，直接在$(document).ready里初始化可能因模态框未渲染导致失效，得绑定模态框的显示事件来处理。

正确实现步骤： #

1. 确认依赖文件已正确引入（Laravel项目一般在模板头尾或resources/js/bootstrap.js中配置）：

   • jQuery
   • Bootstrap的CSS和JS
   • Moment.js（Bootstrap Datetimepicker依赖它处理日期逻辑）
   • Bootstrap Datetimepicker的CSS和JS

2. 保留原有Blade输入框结构（类名datetimepicker无需修改）：

<div class="form-group">
    <label>From <span class="text-danger">*</span></label>
    <div class="cal-icon">
        <input type="text" class="form-control datetimepicker @error('from_date') is-invalid @enderror" id="from_date" name="from_date">
        @error('from_date')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror
    </div>
</div>

3. 替换初始化脚本，绑定模态框显示事件来初始化日期选择器，并设置禁用过去日期：

// 监听模态框完全显示事件，确保DOM渲染完成后初始化插件
$('#request_leave').on('shown.bs.modal', function() {
    $('#from_date').datetimepicker({
        format: 'YYYY-MM-DD', // 按需求设置日期格式
        minDate: moment(), // 禁用当前日期之前的所有日期
        ignoreReadonly: true, // 允许插件交互（输入框会被插件设为只读）
        useCurrent: false // 避免默认选中当前日期（可选，按需调整）
    });
});

// 模态框隐藏时销毁插件，防止重复初始化引发冲突
$('#request_leave').on('hidden.bs.modal', function() {
    $('#from_date').datetimepicker('destroy');
});

关键细节： #

• minDate: moment()：用moment对象设置最小可选日期为当前日期，也可以直接用new Date()，但moment更适配插件的日期处理逻辑。
• 绑定shown.bs.modal事件：确保模态框完全显示后再初始化插件，解决隐藏元素无法正确渲染的问题。
• 销毁插件：避免模态框多次打开时重复初始化导致的功能异常。

内容的提问来源于stack exchange，提问作者Jay-ar Cristobal